頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


ナビゲーションバーをフラットデザインっぽくしてみる

ナビゲーションバーをグラデーションではなく、単色で表示する方法を探してみたってお話だよ。

まずはtintColorで設定してみたんだ。コードはこんなの。

[[UINavigationBar appearance] setTintColor:[UIColor colorWithRed:0.842 green:0.451 blue:0.225 alpha:1.000]];

navigation bar にtintColorを設定
↑結果はこれだけど、思ってたのと少し違う。
グラデーションがかかってるし、ステータスバーの色もナビゲーションバーの色にあわせてオレンジっぽくなってる。

そうだよな、確かそうなるんだったよなあってことでここは画像を使うことに。
640x88px サイズの画像(もちろんRetina用)を用意して適用してみた。もちろん単色ね。
UIImage *image = [UIImage imageNamed:@"image.png"];
[[UINavigationBar appearance] setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

navigation bar に画像を設定
↑結果はこれ。
まあ画像を使ってるから当然といえば当然だけど単色になってる。よしよし。

ただナビゲーションバーの色にあわせてステータスバーの色が変わってる。
個人的にはステータスバーがナビゲーションバーの色に合わせるのが好みじゃないので、ステータスバーの設定を変えてみたいと思ったんだよ。
アプリのTARGETS/Summary/Status BarってところのStyleをDefault→Black Translucentに変えてみる。

status barの設定をBlack Translucent
↑濃いグレーみたいになった。惜しい、もう一声ってことで今度はBlack TranslucentだったのをBlack Opaqueに変えてみる。

status barの設定をBlack Opaque
↑そうそう、黒くなった。これが好きなんだよ。やっぱりパンストとナビゲーションバーは黒い方がいいよね。

ん、待て。ステータスバーを黒くするとナビゲーションバーの上側両隅が丸くなってるじゃない?

Black Opaqueに設定したstatus barの拡大図
↑拡大してみたけどRが付いてるよね。
このRをなしにしようと思ってwindowやnavigationBarのlayer.cornerRadiusとかいろいろいじってみたけど、、、だめだったよ。
ステータスバーが黒かつナビゲーションバーのRなし、ってのは不可能なのかな、、、?




<< ナビゲーションバーのテキストの影をなくす   TopPage  アース製薬のあみ戸に貼るだけ!で蚊対策してみたが >>

コメント


管理者にだけ表示を許可する
 

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/753-da26df6a




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad