259
246

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

259
246
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
259
246

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?