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

Xcodeで【UISlider(スライダー)を追加する方法】を初心者向けに解説した記事です。UISliderによって、ボリュームや明るさなどを調整できるようになります。応用編として、アイコン付加の方法も紹介しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

 

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

 

UISliderとは

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

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

 

 

UISliderを設置

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

slider

XcodeScreenSnapz001

 

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

XcodeScreenSnapz002
XcodeScreenSnapz003

 

 

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

UISliderの初期化

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

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

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

 

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

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

iOS-SimulatorScreenSnapz0017

また、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;

 

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

iOS SimulatorScreenSnapz002

 

今回は以上です。

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

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