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

公開日： 2014/04/16 : 最終更新日：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を渡してレンダリングモードを変更しないと画像が見た目通りに表示されないので注意しましょう。