XcodeでUISliderを追加する方法【初心者向け】

iPhoneアプリ開発で便利な、UIパーツの使い方を初心者向けに紹介する記事です。

今回はUISlider（スライダー）の追加方法を解説します。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UISliderとは

UISlider（スライダー）は、ある一定範囲（設定可能）の数値を変化させるのに利用するUIパーツです。

アプリのボリュームや画面の明暗などの調整が可能になります。

 

 

UISliderを設置

他のUIパーツのように、UISliderをStoryboardのViewにドラッグ&ドロップして追加します。

 

さらにUISliderからヘッダーファイルへ右ドラッグをして、IBOutletを作成します。

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

UISliderの初期化

UISliderの数値の設定を行います。

設定可能なのは下記の3つです。また、設定はviewDidLoadで行います。

• 最小値
• 最大値
• 現在値

 

例えば、下記のコードで実行すると、スライダーは左端に寄って表示されます。

_slider.minimumValue = 0;
_slider.maximumValue = 100;
_slider.value = 0;

また、UISliderにはdelegateメソッドがないため、スライダーを動かされた時に値を取得するためのメソッドを登録します。

[_slider addTarget:self action:@selector(didValueChanged:) forControlEvents:UIControlEventValueChanged];

addTargetは自クラス内で処理をするのでselfです。actionでdidValueChangedメソッドが呼び出されることを指定します。

また、didValueChangedメソッドは今回は単純にNSLogで値を表示するだけとしました。

– (void)didValueChanged:( UISlider *)slider
{
NSLog(@”%f”, slider.value);
}

 

 

応用編：UISliderへのアイコン付加

最後に応用編です。

一般にUISliderは左へ動かすと値が小さく、右へ動かすと値が大きくなるイメージが強いですが、それを明示的に示すことも可能です。

UISliderの左右それぞれに画像を設定することができるので、このように記述します。

（画像はあらかじめプロジェクトに取り込んでおく必要があります）

UIImage *minImage = [UIImage imageNamed:@”VolumeMin.png”];
UIImage *maxImage = [UIImage imageNamed:@”VolumeMax.png”];
_slider.minimumValueImage = minImage;
_slider.maximumValueImage = maxImage;

 

するとこのように表示されました。

 

今回は以上です。

Xcodeをさらに使いこなしたい場合は、XcodeでUIImageViewを追加する方法を合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。