2014年3月31日月曜日

UISegmentedControlのカスタマイズ



UISegmentedControlは非常に便利なコントロールです。
画面上部に置いてライクな使用も出来るし、
ナビゲーションバー上に置いて、複数ボタンのように扱う事も出来ます。
本来の役割はラジオボタンに近いのですがね。

ただし、このカスタマイズ方法がかなり特殊なので、
今回はそれについてまとめたいと思います。
※Storyboardの使用を前提としています。


OS共通









左記の枠内のプロパティは基本的に共通です。
さほど複雑なものもないので、細かい説明は割愛します。
実際に値をセットしてみて確認してください。

強いて言うなら、TitleとImageはどちらか一つしか設定出来ません
というくらいでしょうか。

























Color

iOS7の場合






BackgroundColorは各Segment内外の背景色(内側が透過のため)。
TintColorは文字色&ボーダー色。

iOS6の場合







BackgroundColorは各Segment外の背景色(内側がImageのため
)。
TintColorは特にどこにも当たっていないような気がします。




Style

iOS7の場合

特に変化がありません。

iOS6の場合


Styleによって、大きく見た目が変化します。



TextAttributes

OS共通で以下のコードを使用して設定します。

NSDictionary *attributesNormal = @{UITextAttributeTextColor:[UIColor whiteColor]
                                        ,UITextAttributeFont:[UIFont systemFontOfSize:12.0f]
                                        ,UITextAttributeTextShadowOffset:[NSValue valueWithCGPoint:CGPointMake(0, 0)]};
    [_seg setTitleTextAttributes:attributesNormal forState:UIControlStateNormal];
    
    NSDictionary *attributesPressed = @{UITextAttributeTextColor:[UIColor whiteColor]
                                        ,UITextAttributeFont:[UIFont systemFontOfSize:12.0f]
                                        ,UITextAttributeTextShadowOffset:[NSValue valueWithCGPoint:CGPointMake(0, 0)]};
    [_seg setTitleTextAttributes:attributesPressed forState:UIControlStateSelected];

iOS7の場合








適用されます。

iOS6の場合








適用されます。





Image

OS共通で以下のコードを使用して設定します。

[_seg setBackgroundImage:[UIImage imageNamed:@"nav_back"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    [_seg setBackgroundImage:[UIImage imageNamed:@"nav_back"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
    
    [_seg setDividerImage:[UIImage imageNamed:@"divider"]
                  forLeftSegmentState:UIControlStateNormal
                    rightSegmentState:UIControlStateNormal
                           barMetrics:UIBarMetricsDefault];

iOS7の場合









適用されます。

iOS6の場合


適用されます。






まとめ

Color

iOS7のみで利用しましょう。

Style

iOS6のみで利用しましょう。
※iOS7からは非推奨です。

TextAttributes

テキストのフォント、カラー、サイズを変えたい場合に利用しましょう。
※テキストカラーはiOS7であればTintColorでも設定できます。

Image

OS間で見た目の差を作りたくない場合に利用しましょう。

0 件のコメント:

コメントを投稿