2012/10/22更新

[XCODE] UINavigationBarの背景をカスタマイズする方法

このエントリーをはてなブックマークに追加      

こんにちは、休日にiPhoneアプリ開発中の@yoheiMuneです。
今日は、多くのアプリケーションで利用されているナビゲーションUIにおいて、 UINavigationBarの背景デザインをカスタマイズして独自デザインにする方法を記載したいと思います。

画像



UINavigationBarの背景をカスタマイズする

UINavigationBarの背景は、以下のどちらかの方法でカスタマイズすることが出来ます。
  • backgroundColorを指定する
  • 背景画像を指定する
上記以外にUINavigationBarクラスを拡張して描画部分をカスタマイズする方法もありますが、 上記2つのどちらかを行う事で、事足りる事がほとんどなので上記2つを紹介させて頂きます(*゚▽゚)ノ


背景色を指定する

backgroundColorを指定するには、以下のように簡単に行う事が出来ます。
// selfは、navigationController上のUIViewController
self.navigationController.navigationBar.backgroundColor
    = [UIColor colorWithRed:0.215f green:0.215f blue:0.215f alpha:1.0f];

単一色で背景を構成する場合には、上記の方法が一番簡単かなぁと思います。


背景画像を指定する

背景画像を作成して、それをUINavigationBarの背景画像にすることで、独自の背景を自由に設定することが出来るようになります。
iOS5以前ではUINavigatonBarクラスを拡張する必要があるようですが、iOS5以降では実装は以下のように行うことが出来ます。
// selfは、navigationController上のUIViewController
[self.navigationController.navigationBar 
    setBackgroundImage:[UIImage imageNamed:@"bg_navBar.png"]
    forBarMetrics:UIBarMetricsDefault];
こんな感じに簡単に設定できるのは良いなぁと思いました☆



最後に

以上、簡単にですがUINavigationBarの背景をカスタマイズして独自デザインにする方法でした。
iPhoneのデフォルトのデザインも良いけど、自分でカスタマイズしたデザインも良いですね(*´∇`*)
よきデザインでアプリを作れるように今後も色々と試行していけたらと思います。

最後までご覧頂きましてありがとうございました。





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。