Swift5でUINavigationControllerの文字色、背景色の変更や背景の透過方法【Swift/Objective-C/iOS13】

2020年8月29日

UINavigationControllerのNavigationBar(ナビゲーションバー)のカスタマイズ方法をご紹介します。

カスタマイズの種類は5つ
・ナビゲーションアイテムの文字色の変更
・ナビゲーションバーのタイトルの文字色の変更
・ナビゲーションバーの背景色の変更
・ナビゲーションバーの背景の透過
・ナビゲーションバーの下の影を無くす

設定方法は2種類
・全てに適応する方法
・個別に設定する方法

全てにカスタマイズを適応する

全てのUINavigationControllerのNavigationBarにカスタマイズを適応する場合は、以下のプログラムをAppDelegateで設定します。

Swift5

// ナビゲージョンアイテムの文字色
UINavigationBar.appearance().tintColor = UIColor.red

// ナビゲーションバーのタイトルの文字色
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.blue]

// ナビゲーションバーの背景色
UINavigationBar.appearance().barTintColor = UIColor.yellow
 
// ナビゲーションバーの背景の透過
(UINavigationBar.appearance() as UINavigationBar).setBackgroundImage(UIImage(), for: .default)

// ナビゲーションバーの下の影を無くす
UINavigationBar.appearance().shadowImage = UIImage()

Objective-C

// ナビゲージョンアイテムの文字色
[UINavigationBar appearance].tintColor = [UIColor redColor];

// ナビゲーションバーのタイトルの文字色
[UINavigationBar appearance].titleTextAttributes = @{NSForegroundColorAttributeName: [UIColor blueColor]};

// ナビゲーションバーの背景色
[UINavigationBar appearance].barTintColor = [UIColor yellowColor];
 
// ナビゲーションバーの背景の透過
[(UINavigationBar *)[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];

// ナビゲーションバーの下の影を無くす
[UINavigationBar appearance].shadowImage = [UIImage new];

個別にカスタマイズを適応する

個別でUINavigationControllerのNavigationBarにカスタマイズしたい場合は、それぞれのViewController内で指定することで可能です。

Swift5

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    // ナビゲージョンアイテムの文字色
    self.navigationController!.navigationBar.tintColor = UIColor.red
    // ナビゲーションバーのタイトルの文字色
    self.navigationController!.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.blue]
    // ナビゲーションバーの背景色
    self.navigationController!.navigationBar.barTintColor = UIColor.yellow
    // ナビゲーションバーの背景の透過
    self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: .default)
    // ナビゲーションバーの下の影を無くす
    self.navigationController!.navigationBar.shadowImage = UIImage()
}

Objective-C

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    // ナビゲージョンアイテムの文字色
    self.navigationController.navigationBar.tintColor = [UIColor redColor];
    // ナビゲーションバーのタイトルの文字色
    self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName: [UIColor blueColor]};
    // ナビゲーションバーの背景色
    self.navigationController.navigationBar.barTintColor = [UIColor yellowColor];
    // ナビゲーションバーの背景の透過
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    // ナビゲーションバーの下の影を無くす
    self.navigationController.navigationBar.shadowImage = [UIImage new];
}
関連記事