サンプルとして UINavigationController の rootViewController に UITableViewController を設定したものを使う。
UINavigationItem に適当にボタンを設定して UITableView の tableViewHeader に UIImageView を aspectToFill で入れて画像を設定。
Storyboardはこんな感じ
ビルドするとこうなる
単純に UINavigationBar を非表示にしたい時は
[self.navigationController setNavigationBarHidden:YES animated:YES];
透明にしたい時は空の画像を背景に設定してやる。
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
一見変化が無いように見えるけど、テーブルをスクロールをするとナビゲーションバーが透明になっているのが分かる。
スクロール無しでデフォルトで tableView の内容を画面上端に表示させるには
self.automaticallyAdjustsScrollViewInsets = NO;
を設定するか自前で
self.tableView.contentInset と self.tableView.scrollIndicatorInsets の top に 0 を設定してやるかで対応できる。
今回はとりあえず前者を使う。
スクロールしてみるとスクロール領域が画像の上端までになっているのが分かる。
ナビゲーションバーの下線を消すには shadowImage にナビゲーションバーに背景画像を設定した時と同じく空画像を設定してやる。
self.navigationController.navigationBar.shadowImage = [UIImage new];
仕上げに見た目を整える。
ナビゲーションバー上の UIBarButtonItem は UINavigationBar の tintColor を設定する事でまとめて tintColor を反映させる事ができる。
またタイトル部分は UINavigationBar の titleTextAttributes でテキストスタイルをカスタマイズする事ができる。
self.navigationController.navigationBar.tintColor = [UIColor whiteColor]; self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName: [UIColor whiteColor]};
ステータスバーの文字色は Info.plist に
UIViewControllerBasedStatusBarAppearance = YES *1
を設定して viewController の preferredStatusBarStyle をオーバーライドする。
- (UIStatusBarStyle)preferredStatusBarStyle { return UIStatusBarStyleLightContent; }
ただ UINavigationController の中に入っている viewController の場合は UINavigationController 自体の preferredStatusBarStyle の設定が反映されてしまうため UINavigationController のサブクラスを作って、表示中の viewController の preferredStatusBarStyle の設定を反映するよう実装する必要がある。
- (UIStatusBarStyle)preferredStatusBarStyle { return self.topViewController.preferredStatusBarStyle; }
こうしておけば viewController がプッシュされる度に、表示中の viewController の preferredStatusBarStyle が反映されるようになりステータスバーの文字色を白色にしたり黒色にしたり動的に変更できる。
これでようやく完成
今回のコード
*1:ターゲット設定では View controller-based status bar appearance と表記される
