ObjecTips

基本Objective-Cで iOS とか OS X とか

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

サンプルとして UINavigationControllerrootViewControllerUITableViewController を設定したものを使う。
UINavigationItem に適当にボタンを設定して UITableViewtableViewHeaderUIImageViewaspectToFill で入れて画像を設定。
Storyboardはこんな感じ

f:id:Koze:20151006224427p:plain

ビルドするとこうなる

f:id:Koze:20151006224912p:plain

単純に UINavigationBar を非表示にしたい時は

[self.navigationController setNavigationBarHidden:YES animated:YES];

f:id:Koze:20151006230055p:plain

透明にしたい時は空の画像を背景に設定してやる。

[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];

一見変化が無いように見えるけど、テーブルをスクロールをするとナビゲーションバーが透明になっているのが分かる。

f:id:Koze:20151006230358p:plain f:id:Koze:20151006230402p:plain

スクロール無しでデフォルトで tableView の内容を画面上端に表示させるには

self.automaticallyAdjustsScrollViewInsets = NO;

を設定するか自前で self.tableView.contentInsetself.tableView.scrollIndicatorInsetstop0 を設定してやるかで対応できる。
今回はとりあえず前者を使う。
スクロールしてみるとスクロール領域が画像の上端までになっているのが分かる。

f:id:Koze:20151006232406p:plain f:id:Koze:20151006232416p:plain

ナビゲーションバーの下線を消すには shadowImage にナビゲーションバーに背景画像を設定した時と同じく空画像を設定してやる。

self.navigationController.navigationBar.shadowImage = [UIImage new];

f:id:Koze:20151006232631p:plain

仕上げに見た目を整える。
ナビゲーションバー上の UIBarButtonItemUINavigationBartintColor を設定する事でまとめて tintColor を反映させる事ができる。
またタイトル部分は UINavigationBartitleTextAttributes でテキストスタイルをカスタマイズする事ができる。

self.navigationController.navigationBar.tintColor = [UIColor whiteColor];
self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName: [UIColor whiteColor]};

f:id:Koze:20151006233215p:plain

ステータスバーの文字色は 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 が反映されるようになりステータスバーの文字色を白色にしたり黒色にしたり動的に変更できる。

これでようやく完成

f:id:Koze:20151006235358p:plain

今回のコード

*1:ターゲット設定では View controller-based status bar appearance と表記される