プログラムによるUISliderの作成と面白カスタマイズ

プログラムによる生成

以下の例は、viewDidLoad内でスライダーを生成・配置し、
実際にスライダーを動かすと「SliderChanged」のメソッドが呼ばれるようにしています。

@implementation TestViewController

- (void)SliderChanged:(UISlider*)slider {
    
    NSLog(@"スライダーの値が変わりました");
    
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //スライダーの生成
    UISlider *sl = [[UISlider alloc] initWithFrame:CGRectMake(10, 220, 300, 20)];
    
    //イベント発生時にSliderChangedのメソッドへ引き渡す
    [sl addTarget:self action:@selector(SliderChanged:) forControlEvents:UIControlEventValueChanged];
    
    //ビューに追加
    [self.view addSubview:sl];
}

- (void)didReceiveMemoryWarning

シミュレータで実行すると、スライダーができています。
slider10

スライダーのカスタマイズ

バーをカスタマイズしてみます。
以下のプログラム中のコメントの説明を参考にして下さい。

- (void)SliderChanged:(UISlider*)slider {
    
    NSLog(@"スライダーの値が変わりました");
    
    //スライダーの値が5より小さいか、5以上かでカスタマイズを変える
    if (slider.value < 5) {
        
        //5より小さい場合、sad.pngでバー左側の色は青
        [slider setThumbImage:[UIImage imageNamed:@"sad.png"] forState:UIControlStateNormal];
        slider.minimumTrackTintColor = [UIColor blueColor];
        
    } else {
        
        //5以上の場合、happy.pngでバー左側の色は黄色
        [slider setThumbImage:[UIImage imageNamed:@"happy.png"] forState:UIControlStateNormal];
        slider.minimumTrackTintColor = [UIColor yellowColor];
        
    }
    
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //スライダーの生成
    UISlider *sl = [[UISlider alloc] initWithFrame:CGRectMake(10, 220, 300, 20)];
    
    //スライダーの設定(最小値0、最大値10)
    sl.minimumValue = 0.0;
    sl.maximumValue = 10.0;
    
    //スライダーの初期設定(初期値3、初期画像sad.png)
    sl.value = 3.0;
    [sl setThumbImage:[UIImage imageNamed:@"sad.png"] forState:UIControlStateNormal];
    sl.minimumTrackTintColor = [UIColor blueColor];
    
    //スライド中は値変化を反映しない
    sl.continuous = NO;
    
    //イベント発生時にSliderChangedのメソッドへ引き渡す
    [sl addTarget:self action:@selector(SliderChanged:) forControlEvents:UIControlEventValueChanged];
    
    //ビューに追加
    [self.view addSubview:sl];
}

上記のプログラムでは、

・スライダーの値が5より小さいときは、悲しんでいる顔+青色バー
・スライダーの値が5以上のときは、喜んでいる顔+黄色バー

にしています。ちなみに、画像は下の「sad.png」と「happy.png」を使っています。よければそのまま使って下さい。

sad   happy

 
シミュレータで実行してバーを動かすと、下のように変化します。

スライダーカスタマイズ

 


スライダーつまみの画像を変える
[スライダー変数名 setThumbImage:[UIImage imageNamed:@"xxx.png"] forState:UIControlStateNormal];

スライダーバーの色を変える
スライダー変数名.minimumTrackTintColor = [UIColor 色名];
スライダー変数名.maxTrackTintColor = [UIColor 色名];


コメントを残す

サブコンテンツ

このページの先頭へ