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の場合

適用されます。