Zenn
🚀

【iOS/UIKit】NavigationBarの下線を消す

2022/03/09に公開
iOS
tech

iOSアプリ開発で、NavigationBarの下線を消したくなったことはありますか？

標準スタイルのNavigationBarがこんな感じです。
下線？　と思うかもしれませんが、背景を白くすると、よくわかるかと思います。

下線というか、正確には影なんだと思いますが、最初検索するときに下線で検索したので、この記事内では下線でいきます。

あまり積極的に消そうとは僕も思ったことがなかったのですが、
会社でやってるタスクでそういう要件になって、地味に苦労したので、どう対応したかを書いておこうと思います。

ゴール

そもそも単純にNavigationBar自体を消したいなら、NavigationViewControllerを使わなくするのが筋です。
今回の僕の要件の場合、

  • （前提として、Storyboardは使っていないアプリ）
  • NavigationBarのタイトルとItemは表示したい
  • でも白背景かつ下線も消したい

というものでした。

ググると出てくるやつ

検索すると出てくるのが、

navigationController?.navigationBar.shadowImage = UIImage()

というコードです。
昔はこれで消せていたみたいなんですが、僕の場合これだと消えませんでした。

対応したコード

色々試した結果、下記で下線を消すことができました。

let navigationBarAppearance = UINavigationBarAppearance()
navigationBarAppearance.configureWithOpaqueBackground()
// ※↑アプリ内で独自に背景色を定義して、それに合わせたい場合はこっち
// navigationBarAppearance.backgroundColor = AnyColor
navigationBarAppearance.shadowColor = .clear
navigationController?.navigationBar.scrollEdgeAppearance = navigationBarAppearance

UINavigationBarAppearance?

iOS 13で爆誕した、Apple公式のNavigationBarのカスタマイズ方法みたいです。

https://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar

ちょっと僕も理解が甘いところなので、詳細は書けませんが、
standardAppearance/compactAppearance/scrollEdgeAppearance/compactScrollEdgeAppearance の4種類があるっぽいです。
記述を見ると、端末のUITraitEnvironment のstandard/compactのときと対応してるように読めるんですが、僕の場合scrollEdgeAppearanceに入れるだけでOKでした。

もし縦向き・横向き・スマホ・タブレットのどれかで効いてないようであれば、他のappearanceにも設定してください。

Storyboardだとちょっといじりやすいかも

この記事を書くにあたって、冒頭の画面サンプルのためにStoryboardでNavigationViewController出したんですが、
UINavigationBarAppearanceに関しては、こっちの方が操作しやすいかもしれません。

SwiftUIだとまだできないかも

ちゃんと調べてませんが、SwiftUIだとまだできないかもしれません。
そもそもNavigationBarのカスタマイズがそんなにできなかった気が……

Discussion