XcodeでUISliderを追加する方法【初心者向け】
Xcodeで【UISlider(スライダー)を追加する方法】を初心者向けに解説した記事です。UISliderによって、ボリュームや明るさなどを調整できるようになります。応用編として、アイコン付加の方法も紹介しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
iPhoneアプリ開発で便利な、UIパーツの使い方を初心者向けに紹介する記事です。
今回はUISlider（スライダー）の追加方法を解説します。
なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。
UISliderとは
UISlider（スライダー）は、ある一定範囲（設定可能）の数値を変化させるのに利用するUIパーツです。
アプリのボリュームや画面の明暗などの調整が可能になります。
UISliderを設置
他のUIパーツのように、UISliderをStoryboardのViewにドラッグ&ドロップして追加します。
さらにUISliderからヘッダーファイルへ右ドラッグをして、IBOutletを作成します。
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アプリ開発オンラインブートキャンプを開催しています。
