iOS5で搭載された新UI!UIStepper(ステッパー)の使い方

公開日: : 最終更新日:2014/01/06 iOSアプリ開発

2011 10 20 15 15 39

こんにちは。iOS5で追加された新しいAPIをいろいろと試している@akio0911です。

今回は、iOS5で新しく追加されたUI部品「UIStepper(ステッパー)」の使い方を紹介したいと思います。

        

スポンサード リンク

         

UIStepper(ステッパー)とは?

iOS5で新しく追加されたUI部品です。

2011 10 20 15 15 39

右側にある「ー」「+」と書いてあるのが、ステッパーです。

     

ステッパーの使い方

テストアプリを作りながら、解説していきましょう。

     

ラベルとステッパーを配置する

まず、ラベルとステッパーを画面に配置します。

2011 10 20 15 08 50

これがステッパーです。

     

2011 10 20 15 10 13

こんな感じで、ラベルとステッパーを配置します。

    

ラベルのアウトレットを作成する

2011 10 20 15 20 39

ViewControllerに、ラベルのアウトレットを作成します。

    

#import

@interface ViewController : UIViewController

@property (retain, nonatomic) IBOutlet UILabel *label;

@end

2011 10 20 15 20 54

こんな感じ。

   

ステッパーのアクションを作成する

2011 10 20 15 23 31

名前は「changeStepper」としておきましょう。イベントには「Value Changed」を使います。

        

#import

@interface ViewController : UIViewController

@property (retain, nonatomic) IBOutlet UILabel *label;

- (IBAction)changeStepper:(id)sender;

@end

2011 10 20 15 23 46

こんな感じ。

   

ステッパーのアウトレットを作成する

2011 10 20 15 25 52

名前は「stepper」としておきましょう。

    

#import

@interface ViewController : UIViewController

@property (retain, nonatomic) IBOutlet UILabel *label;
@property (retain, nonatomic) IBOutlet UIStepper *stepper;

- (IBAction)changeStepper:(id)sender;

@end

2011 10 20 15 26 02

こんな感じです。

    

ステッパーを初期化する

ステッパーを初期化するコードをviewDidLoadに追加します。

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

self.stepper.value = 0;
self.stepper.minimumValue = 0;
self.stepper.maximumValue = 10;
self.stepper.stepValue = 1;
}

2011 10 20 15 26 16

valueは現在の値、minimumValueは最小値、maximumValueは最大値、stepValueはボタンをタップした時の増減値です。

    

ステッパーのアクションに処理を追加する

ステッパーのボタンがタップされたタイミングでラベルの値を書き換えるコードを追加します。

- (IBAction)changeStepper:(id)sender {
self.label.text = [NSString stringWithFormat:@"%d", (int)self.stepper.value];
}

2011 10 20 15 58 42

changeStepper:メソッドに、上記のようなコードを追加します。stepper.valued現在の値を取得し、それを文字列化してself.label.textに設定しています。

    

実行してみる

シミュレーターで実行してみましょう。

2011 10 20 15 31 07

マイナスボタン・プラスボタンをタップすると、ラベルの値が変化します。

どちらかのボタンを押しっぱなしにすると、値が変化し続けます。

    

押しっぱなしで値が変化しないようにするには

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

self.stepper.value = 0;
self.stepper.minimumValue = 0;
self.stepper.maximumValue = 10;
self.stepper.stepValue = 1;
self.stepper.autorepeat = NO;
}

2011 10 20 15 36 14

autorepeatプロパティの値をNOに設定します。

これでボタンを押しっぱなしにしても値が変化しないようになります。

    

まとめ

ステッパーは見た目がシンプルで分かりやすく、UIStepper使いやすいクラスだと思います。

ぜひアプリに組み込んでみてください。

    

iOS5新機能に関する他の記事はこちらからどうぞ。

iPhoneアプリ開発に関する他の記事はこちらからどうぞ。

    

関連記事

dash-20130802-1818.jpg

【iOSアプリ開発】Dashでドキュメントのページ内を素早く検索する方法があった!

     以前紹介記事を書いた、クラスリファレンスを素早く検索・表示できるMacアプリ

記事を読む

skitched-20130517-135149

第14回 iPhoneアプリ開発もくもく会を開催しました。そして第15回の告知

     昨日(5月16日)、渋谷のコワーキングスペース「Lightningspot」

記事を読む

no image

iPhoneシューティング

画面を縦にしてみた。基本的なロジックはそろそろ入れ終わりそう。次はステージの作り込みに入りた

記事を読む

no image

ARkit for iPhone で遊んでる

簡単に使えて、New BSD License。 素晴らしいですね。

記事を読む

20140416-192437.jpg

【iPhoneアプリ開発】UINavigationBarに複数のUIBarButtonItemを配置する方法

UINavigationBarの左側や右側に、複数のUIBarButtonItemを配置する

記事を読む

skitched-20120423-100628.jpg

15時間でTwitterアプリ開発を行う初心者向け講座をやります

Photo by Rosaura Ochoa      5/12(土)・19

記事を読む

この動画を含む日記

iPhoneのUI設計思想を理解する

iPhoneのUIが最高のものかどうかはさておき、その設計思想を知っておいても損はないと思う。

記事を読む

no image

ImagePickerControllerのタッチイベントをカスタマイズしたい

UIImagePickerControllerを継承して、touchesEndedをオーバーライド

記事を読む

no image

iPhone adhoc ビルドの手順

iPhone のプログラムポータルで配信証明書を作成、ダウンロード 配信証明書をダブルクリ

記事を読む

skitched-20120830-152936.png

eラーニング版「Twitterアプリ for iPhone開発講座」販売開始!

     こんにちは。アキオ(@akio0911)です。      今年の

記事を読む

20140714-144729.jpg
サンフランシスコのピア39にあるチャウダーズでクラムチャウダーを食す!

アップルの開発者向けイベント「WWDC2014」に参加するため

slooProImg_20140714064146.jpg
ミスドのカルピスドーナツとカルピスポンデリングを食べてみた!

ミスドで期間限定のカルピスコラボ商品「カルピスドーナツ」と「カルピ

slooProImg_20140713230358.jpg
十三カレー計画で牛すじカレーネギのせを食す!(大阪・十三)

「iPhoneアプリ開発キャンプ@大阪」のランチで、十三カレー計画

slooProImg_20140712085918.jpg
大阪・難波の加寿屋 法善寺でかすうどんを食す。ランチタイムはおにぎり2個まで無料!

大阪・難波の加寿屋 法善寺 (かすうどん KASUYA)で、かす

20140625-114250.jpg
ライブドアブログで運営していた「あきお商店」を「卵は世界である」に改名しました

少し前からライブドアブログで「あきお商店」というブログをやって

→もっと見る

PAGE TOP ↑