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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,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アプリ開発オンラインブートキャンプを開催しています。

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する