iOS7からのUITabBarのデザインのカスタマイズまとめ #iOS

iOS7から変わったUITabBarのデザインよりのカスタマイズについて。と言ってもレンダリングモードだけiOS7からなのでそこだけ注意すればいい。

UITabBarのテキストフォントとカラーを変更する

appearanceのsetTitleTextAttributes:forStateメソッドを使う。タブバーの画像はデフォルト。

選択中が赤色、他は非選択（通常時）の青色を設定。


UIFont *font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:10.0f];
 //タブ選択時のフォントとカラー
NSDictionary *selectedAttributes = @{NSFontAttributeName : font,
                                      NSForegroundColorAttributeName : [UIColor redColor]};

[[UITabBarItem appearance] setTitleTextAttributes:selectedAttributes
                                         forState:UIControlStateSelected];

//通常時のフォントとカラー
NSDictionary *attributesNormal = @{NSFontAttributeName : font,
                                    NSForegroundColorAttributeName : [UIColor blueColor]};

[[UITabBarItem appearance] setTitleTextAttributes:attributesNormal
                                         forState:UIControlStateNormal];

UITabBarの画像を作成する

i0S7になっても変わらず画像は30x30px（Ratina 60x60px)で作成する。このサイズはドキュメントで決められたサイズではないのか公式の記述がないのでだいたいこんなもんだろうという感じだと思う。

元画像は http://icons8.com/free-ios-7-icons-in-vector/ のサイトのpng画像を使った例（brickというキューブな画像を適用）。

画像の作りとして、brickをダウンロードして見ればわかるが、黒色(#000)の線のみで作られた画像がデフォルトでは選択時は薄い青っぽくなり、非選択時（通常時）は灰色になる。

選択時の色を変える

選択時の色を替える場合はtintColorを変更するだけ

[[UITabBar appearance] setTintColor:[UIColor greenColor]];

tintColor原色緑を指定すると薄い緑になる。これはレンダリングモードが画像をテンプレートとして使用しているからだろうと思う。

iOS7からレンダリングモードはUIImageで設定するようになった。画像をテンプレートとしてマスクして使っている。

AppleのiOS7移行ガイド日本語訳参照
https://developer.apple.com/jp/devcenter/ios/library/documentation/UserExperience/Conceptual/TransitionGuide/Bars/Bars.html

画像をそのまま表示したい

画像をそのまま使う場合、レンダリングモードをオリジナルにする。

UIImage *image = [[UIImage imageNamed:@"brick"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

item.selectedImage = image;

ちょっとわかりづらいのは、RenderingModeはオブジェクトのプロパティで自由に設定変更できるわけではなく、設定したらUIImageを再生成するところ。UIImageのインスタンスに対してimageWithRenderingMode:メソッドで生成した戻り値がモードの変更されたUIImageになっているのでそれを利用する。

レンダリングモードをオリジナルにすると画像をそのまま使う。brickの画像はこのような黒い線で構成される画像だったのでそのまま表示される。

UITabBarの背景を変更したい

背景色を指定する

barTintColorを設定することでバー自体の色を変更できる。

[UITabBar appearance].barTintColor = [UIColor brownColor];

ブラウンカラーに設定する

iOS7からbarTintColorに従って半透明になっていたが、iOS7.0.3からbarTintColorを設定すると半透明にならなくなったので、どうしても半透明にしたければUIColor自身に透明度を指定する (http://qiita.com/yimajo/items/4781d5d2712e34677db2 )。

背景画像を変更する

背景画像は320x49px (Ratina 640x96px)の画像を用意し、backgroundImageに設定する。iOS7になってもこの部分は変わってない。

[UITabBar appearance].backgroundImage = [UIImage imageNamed:@"tab_background"];