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

XcodeのUIパーツ【UIStepper(ステッパー)】を追加する方法を初心者向けに解説した記事です。プラスとマイナスのボタンなどで、増減量を変化させる時に使うことができるパーツです。実際にボタンが動くようにコードも紹介。

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

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。

今回は、XcodeUIStepper(ステッパー)を追加する方法を初心者向けに解説します。

 

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

 

UIStepperについて

UIStepperは、下限値と上限値および増減量を決めて値を変化させるために使います。デフォルトでは「+(プラス)」と「-(マイナス)」のボタンが表示されます。

iOS5から追加されたUIパーツです。

 

 

UIStepperを配置する

ストーリーボードにUIStepperを配置していみましょう。

「Stepper」と表示されている箇所です。

XcodeScreenSnapz001

 

これを他のUIパーツでと同じように、ドラッグ&ドロップで配置します。

XcodeScreenSnapz002

 

今回は現在の値を示すためにLabelも配置しておきます。
XcodeScreenSnapz003

 

また、UIStepperの4つの値(下限値・上限値・現在値・増減量)はインスペクタで設定できます。

XcodeScreenSnapz004

パーツの配置は以上です。

 

 

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

UIStepperの使い方

配置しただけでは動きませんので、動くように設定していきます。

まずはUIStepperのIBOutletを作成します。ドラッグ&ドロップの操作でこのような画面が表示されることを確認してください。

XcodeScreenSnapz005

 

この時の名前はuiStepperとしておきます。

XcodeScreenSnapz006

 

同じように、値を表示するLabelのIBOutletも作成します。

XcodeScreenSnapz007

 

こちらの名前はlabelValueとしました。

XcodeScreenSnapz008

 

続いて、UIStepperのActionを作成します。

XcodeScreenSnapz009

 

この際の名前はstepperChangedとします。対象となるEventはValue Changedです。

XcodeScreenSnapz010

 

ここまで操作すると、ViewController.hに以下の3行が追加されます。

@property (weak, nonatomic) IBOutlet UIStepper *uiStepper;
@property (weak, nonatomic) IBOutlet UILabel *labelValue;
– (IBAction)stepperChanged:(id)sender;

 

最後にUIStepperの値が操作された時の処理を記述します。単純にUIStepperの現在値をラベルに表示するだけのコードです。

– (IBAction)stepperChanged:(id)sender
{
_labelValue.text = [NSString stringWithFormat:@”%zd”, _uiStepper.value];
}

 

これでUIStepperの値を取得することができるようになりました。

今回の記事は以上です。

 

他のUIパーツも追加してみたい場合は、XcodeでUITableViewを追加する方法も合わせてご覧ください。

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