ナビゲーションバーを透明にする transparent UINavigationBar

サンプルとして 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 と表記される