【iOS】NavigationControllerのデザイン変更


Objective c

最近RailsでのWebアプリ開発と並行してiOSアプリも作っています。
どっちも楽しいのですが、時間がたりなさすぎて四苦八苦です。

けどどちらも7月中にはリリースをしたいです。

で、今回ナビゲーションコントローラ内のバーのデザインを変更するのに予想以上に時間をとられたのでメモっておきます。

なお、バージョンはiOS 7.1.1Xcode5.1.1


今日の目標

つまり、今回修正して以下のようなバーのデザインにする事を目標とします。

遷移元のView(TableView)のバーと、遷移先のView(普通のUIView)のどちらのナビゲーションバーにも赤いアンダーラインをひきます。 あと文字色を赤に。 そして、遷移先のバーの「Back」という戻るボタンの文字を消します。
※戻るボタンの文字を消してるアプリはあまり見ないですが、リジェクトされないよね・・


スクリーンショット 2014 06 14 14 56 59


スクリーンショット 2014 06 14 14 57 18

ちなみに、これ以降のコード類は NavigationControllerのRootViewの実装ファイル内で viewDidLoadメソッドの中にかいた。

全体的なデザインの変更

ナビゲーションバーの背景色。 戻るボタン(<)の色の変更。 タイトル文字の変更。

// ナビゲーションバー全体の背景色
self.navigationController.navigationBar.barTintColor = [UIColor whiteColor];

// 戻るボタンの横の矢印(<)の色が変わる
self.navigationController.navigationBar.tintColor = [UIColor redColor];

// ナビゲーションバーのタイトルの文字色の変更
self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName: [UIColor redColor]};

// ちなみに、タブバーコントローラの背景色は以下のコードで透過できたのだが、ナビゲーションバーがうまくいかない。
// 追って調査しよう
self.tabBar.barTintColor = [UIColor whiteColor];
self.tabBar.alpha = 0.98f;
self.tabBar.translucent = YES;

NavigationControllerにアンダーラインをひく

これが一番苦労した。。
今回、ナビゲーションバーの高さを勝手に目で確かめながら直に入力したのですが動的に対応できるよう変更した方がいいです。 めんどくせーので試してないですが、 navigationBar.frame.size.height でとれるんじゃないっすかね。。

// アンダーラインのパーツを、ナビゲーションバーのサイズに合わせて作ります。
// CGRectMakeの引数の最後の3で太さを調整しています。
CGRect r = CGRectMake(0, 42, self.navigationController.navigationBar.frame.size.width, 3);
UILabel *line = [[UILabel alloc]initWithFrame:r];
ine.backgroundColor = [UIColor redColor];
// ナビゲーションコントローラの、ナビゲーションバーに対して addSubviewするのがポイント。
// selfのviewにaddしたら子のviewに遷移した時にアンダーラインが消えた。 ←アホす
[self.navigationController.navigationBar addSubview:line];

//ちなみに、レイヤーなる要素で、setBorder** をすると周りに枠をひけた
//[self.navigationController.navigationBar.layer setBorderWidth:2.0];// Just to make sure its working
//[self.navigationController.navigationBar.layer setBorderColor:[[UIColor redColor] CGColor]];

ただ、今回はiPhoneを横にした時とか動的に対応していないので、レスポンシブデザインっぽくなっていないのも課題。

Backボタンの文字変更

こちらも同じくviewDidLoadメソッドの中に書く。
なお、よくわかっていないんだが下記のUIBarButtonItemクラスはあくまで「Back」の部分だけ。
左側にある(<)のオブジェクトはこのbackBarButtonItemでは制御されていないらしい。。。(?)

// navigationItemに、backBarButtonItem.title というのがあったのだけども、入れても変化せず。
// このメソッドを実行してハメたらうまく行きました。
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc]
                                         initWithTitle:@""
                                         style:UIBarButtonItemStylePlain
                                         target:nil
                                         action:nil];

おわり。 ちょっとまだプロトタイプ作った段階なので、今後の実装で色々変更出てきそうですが一旦POSTしておきます。
ちなみに「ん、このナビゲーションバーどっかで見たことが。。」と思われる方いるかも。
TEDのiPhoneアプリがカッコ良かったのでインスパイア。。。

2014-06-14 | Posted in Objective-CNo Comments » 


関連記事

Comment





Comment



*