【iPhoneアプリ開発】UIStepperの見た目をカスタマイズする方法

公開日: : 最終更新日:2014/04/16 iOSアプリ開発

以前にUIStepperの使い方を解説する記事を書きましたが、

iOS5で搭載された新UI!UIStepper(ステッパー)の使い方 – 拡張現実ライフ

今回はUIStepperの見た目をカスタマイズする方法について解説したいと思います!

スポンサード リンク

UIStepperの色をカスタマイズする

まずは色の変更方法から。「tintColor」というプロパティを使えば、枠線の色を変更することができます。以下、サンプルコードです。

self.stepper2.tintColor = [UIColor redColor];

UIStepperの見た目をカスタマイズする

次は色だけでなく見た目全体を変更する方法です。まずは以下の4つの画像を作成します。

  • 背景画像
  • +画像
  • −画像
  • 境界画像

ここでは例として以下のような4つの画像を作成しました。

    

背景画像については、以下のようにしてスライシングの設定を行いました。

    

スライシングをプレビューすると以下のようになります。

        

次に、以下の4つのメソッドを使って画像をUIStepperに設定していきます。

  • - (UIImage *)backgroundImageForState:(UIControlState)state
  • - (void)setIncrementImage:(UIImage *)image forState:(UIControlState)state
  • - (void)setDecrementImage:(UIImage *)image forState:(UIControlState)state
  • - (void)setDividerImage:(UIImage *)image forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState

以下、そのサンプルコードです。

UIImage *backgroundImage = [UIImage imageNamed:@"backgroundImage"];
[self.stepper3 setBackgroundImage:backgroundImage
                         forState:UIControlStateNormal];
    
UIImage *incrementImage = [UIImage imageNamed:@"incrementImage"];
incrementImage = [incrementImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[self.stepper3 setIncrementImage:incrementImage
                        forState:UIControlStateNormal];
    
UIImage *decrementImage = [UIImage imageNamed:@"decrementImage"];
decrementImage = [decrementImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[self.stepper3 setDecrementImage:decrementImage
                        forState:UIControlStateNormal];
    
UIImage *dividerImage = [UIImage imageNamed:@"dividerImage"];
dividerImage = [dividerImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[self.stepper3 setDividerImage:dividerImage
           forLeftSegmentState:UIControlStateNormal
             rightSegmentState:UIControlStateNormal];

ただしこれだけだと無効時の見た目が変わらないので、UIControlStateDisabledなども使って画像を設定して下さい。

また、imageWithRenderingMode:にUIImageRenderingModeAlwaysOriginalを渡してレンダリングモードを変更しないと画像が見た目通りに表示されないので注意しましょう。

    

@akio0911はこう思った。

画像を何枚も用意しなければいけないのでちょっとメンドクサイですが、アプリのテイストをしっかりと出していきたい場合には避けて通れない道かなと思います。また、imageWithRenderingMode:メソッドを呼ばなければいけないという点は僕が最初にハマったポイントでした。気をつけましょう!

    

告知

東京・大阪・広島(尾道)で初心者向けのアプリ開発講座をやります!

東京では4月20日・4月27日・5月11日の3日間で開講です。

iPhoneアプリ開発講座のアプリ道場 第19期を4月20日から開講します! – 拡張現実ライフ

    

大阪では5月17日〜18日の2日間で開催です。(合宿ではありません)

初心者向け講座「iPhoneアプリ開発キャンプ@大阪」の第2回を5月17日〜18日で開催します! – 拡張現実ライフ

    

広島(尾道)では6月14日〜15日の2日間で開催です。(こちらは合宿形式です)

広島の尾道でiPhoneアプリ開発講座やります。6月14日〜15日の合宿形式! – 拡張現実ライフ

みなさまのお申し込み、お待ちしています!

関連記事

skitched-20121011-211731.png

iOSでアプリからカレンダーに予定を追加する方法

     こんにちは。アキオ(@akio0911)です。 前回はiPhoneのカ

記事を読む

no image

iPhoneシューティング

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

記事を読む

20140527-000424.jpg

CGPoint・CGSize・CGRectをログ出力する際に便利な関数

今日は、iOSアプリ開発でCGPoint・CGSize・CGRectをログ出力する際に便利な

記事を読む

20140530-000241.jpg

【Xcode 5】複数のストーリーボード間で画面遷移させる方法

今日は、ストーリーボードから他のストーリーボードへ画面遷移させる方法を紹介します。  

記事を読む

no image

iPhoneのアプリケーションを横長モードで開始するには

Info.plist に UIInterfaceOrientation キーを追加し、UII

記事を読む

skitched-20120830-152936.png

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

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

記事を読む

no image

ARkit for iPhone で遊んでる

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

記事を読む

20140304-013828.jpg

UISegmentedControlを使ってUIViewControllerを切り替える方法

先日紹介した「カスタムコンテナビューコントローラーを作る」の応用例として、UISegment

記事を読む

no image

iPhone adhoc ビルドの手順

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

記事を読む

no image

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

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

記事を読む

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑