Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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

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

スクリーンショット 2013-11-11 10.21.54.png

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

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というキューブな画像を適用)。

名称未設定.png

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

選択時の色を変える

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

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

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

スクリーンショット 2013-11-11 11.22.04.png

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になっているのでそれを利用する。

スクリーンショット 2013-11-11 11.44.36.png

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

UITabBarの背景を変更したい

背景色を指定する

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

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

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

bar.png

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"];

tab.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした