UINavigation bar ドキュメント読むべし

NabigationBar

Toolbarより下位の階層にあるのがポイント

ナビゲーションコントローラーはコンテナービューコントローラーです。 つまり、他のビューコントローラーのコンテンツをその中に埋め込みます。 ナビゲーションコントローラのビューには、そのビュープロパティからアクセスします。 このビューには、ナビゲーションバー、オプションのツールバー、および最上位のViewControllerに対応するコンテンツビューが組み込まれています。 図3は、これらのビューを組み立てて、全体的なナビゲーションインターフェイスを表示する方法を示しています。 （この図では、ナビゲーションインターフェイスはタブバーインターフェイス内にさらに埋め込まれています。）ナビゲーションバーとツールバービューのコンテンツは変更されますが、ビュー自体は変更されません。 実際に変更される唯一のビューは、ナビゲーションスタックの最上位のビューコントローラーによって提供されるカスタムコンテンツビューです。

https://docs-assets.developer.apple.com/published/83ef757907/NavigationViews_2x_e69e98a2-aaac-477e-9e33-92e633e29cc7.png

参照元:

Apple Developer Documentation

外観のカスタマイズにはUIAppearanceAPIを利用

表示または非表示にするには、isNavigationBarHiddenプロパティ

ナビゲーションコントローラーは、ナビゲーションバーとオプションのナビゲーションツールバーの作成、構成、および表示を管理します。 ナビゲーションバーの外観関連のプロパティをカスタマイズすることは許可されていますが、フレーム、境界、またはアルファ値を直接変更しないでください。 UINavigationBarをサブクラス化する場合は、init（navigationBarClass：toolbarClass :)メソッドを使用してナビゲーションコントローラーを初期化する必要があります。 ナビゲーションバーを表示または非表示にするには、isNavigationBarHiddenプロパティまたはsetNavigationBarHidden（_：animated :)メソッドを使用します。 ナビゲーションコントローラーは、ナビゲーションスタック上のビューコントローラーに関連付けられたナビゲーションアイテムオブジェクト（UINavigationItemクラスのインスタンス）を使用して、ナビゲーションバーのコンテンツを動的に構築します。 ナビゲーションバーの全体的な外観をカスタマイズするには、UIAppearanceAPIを使用します。 したがって、ナビゲーションバーの内容を変更するには、カスタムViewControllerのナビゲーション項目を構成する必要があります。

ナビゲーションアイテムの詳細については、UINavigationItemを参照してください。

ナビゲーションバーの更新

トップレベルのViewControllerが変更されるたびに、NavigationControllerはそれに応じてナビゲーションバーを更新します。

色合いは、ナビゲーションバー自体のプロパティによって制御されます。

tintColorプロパティを使用してバー内のアイテムの色合いの色を変更し、barTintColorプロパティを使用してバー自体の色合いの色を変更します。

具体的には、ナビゲーションコントローラは、左、中央、右の3つのナビゲーションバー位置のそれぞれに表示されるバーボタン項目を更新します。 バーボタンアイテムは、UIBarButtonItemクラスのインスタンスです。 必要に応じて、カスタムコンテンツを使用してアイテムを作成することも、標準のシステムアイテムを作成することもできます。 ナビゲーションバーの色合いは、ナビゲーションバー自体のプロパティによって制御されます。 tintColorプロパティを使用してバー内のアイテムの色合いの色を変更し、barTintColorプロパティを使用してバー自体の色合いの色を変更します。 ナビゲーションバーは、現在表示されているViewControllerから色合いを継承しません。 ナビゲーションバーの詳細については、UINavigationBarを参照してください。 バーボタンアイテムの作成方法の詳細については、UIBarButtonItemを参照してください。

左側のアイテムナビゲーション

スタックのルートViewControllerを除くすべての場合、ナビゲーションバーの左側にあるアイテムは、前のViewControllerに戻るナビゲーションを提供します。この左端のボタンの内容は、次のように決定されます。新しいトップレベルのView Controllerにカスタムの左バーボタンアイテムがある場合、そのアイテムが表示されます。カスタムの左バーボタンアイテムを指定するには、ViewControllerのナビゲーションアイテムのleftBarButtonItemプロパティを設定します。トップレベルのViewControllerにカスタムの左バーボタンアイテムがないが、前のView ControllerのナビゲーションアイテムのbackBarButtonItemプロパティにオブジェクトがある場合、ナビゲーションバーにはそのアイテムが表示されます。カスタムバーボタンアイテムがどちらのビューコントローラでも指定されていない場合、デフォルトの戻るボタンが使用され、そのタイトルは前のビューコントローラ（つまり、1レベル下のビューコントローラ）のtitleプロパティの値に設定されます。スタック。 （ナビゲーションスタックにView Controllerが1つしかない場合、戻るボタンは表示されません。）

センターのアイテム

titleViewプロパティを設定します。

ナビゲーションコントローラーは、ナビゲーションバーの中央を次のように更新します。新しいトップレベルのビューコントローラーにカスタムタイトルビューがある場合、ナビゲーションバーにはデフォルトのタイトルビューの代わりにそのビューが表示されます。 カスタムタイトルビューを指定するには、ViewControllerのナビゲーションアイテムのtitleViewプロパティを設定します。 カスタムタイトルビューが設定されていない場合、ナビゲーションバーにはビューコントローラのデフォルトタイトルを含むラベルが表示されます。 このラベルの文字列は通常、ViewController自体のtitleプロパティから取得されます。 ビューコントローラに関連付けられているタイトルとは異なるタイトルを表示する場合は、代わりにビューコントローラのナビゲーションアイテムのtitleプロパティを設定します。

Navbar カスタマイズ

バースタイルの変更サンプルは、アプリのデザインの全体的な外観に一致するようにバースタイルを変更する方法を示しています。 ユーザーは、メインページの左側にある[スタイル]ボタンをタップして、ナビゲーションバーのスタイル（UIBarStyle）を変更します。 このボタンは、ユーザーが背景の外観をデフォルト、黒不透明、または黒半透明に変更できるアクションシートを開きます。 バーのスタイルを黒半透明に変更するには：

記載例

self.navigationController!.navigationBar.barStyle = .black
self.navigationController!.navigationBar.isTranslucent = true
self.navigationController!.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
self.navigationController!.navigationBar.tintColor = #colorLiteral(red: 1, green: 0.99997437, blue: 0.9999912977, alpha: 1)

右側のビューのカスタマイズ

カスタマイズ用のナビゲーションバーオプションの右側には、カスタムUIViewの適用またはUIBarButtonItemの使用が含まれます。 このサンプルは、ナビゲーションバーの右側に3種類のUIBarButtonItemsを配置する方法を示しています。タイトル付きのボタン、画像付きのボタン、UISegmentedControl付きのボタンです。 追加のセグメント化されたコントロールにより、ユーザーは3つのボタンを切り替えることができます。 最初のバーボタンは、UIBarButtonItemをオブジェクトライブラリからナビゲーションバーにドラッグすることにより、ストーリーボードで定義されます。 サンプルでは、コードを使用して各ボタンタイプを作成および追加する方法も示しています。 このサンプルは、セグメント化されたコントロールを右のバーボタン項目として設定する方法を示しています。

記載例 segmentedControlを利用する

let segmentBarItem = UIBarButtonItem(customView: segmentedControl)
navigationItem.rightBarButtonItem = segmentBarItem

ナビゲーションバーの外観をカスタマイズする

バーの色合いの色または背景画像を追加して、UINavigationBarにカスタム背景を適用します。 サンプルは、ナビゲーションバーの背景画像を次のように設定します。

let navigationBarAppearance = self.navigationController!.navigationBar
navigationBarAppearance.setBackgroundImage(backImageForDefaultBarMetrics, for: .default)
navigationBarAppearance.setBackgroundImage(backImageForLandscapePhoneBarMetrics, for: .compact)

バックボタンをimageでカスタマイズ

戻るボタンのテキストがなく、通常は戻るボタンの横に表示される戻る矢印がなくても、画像を戻るボタンとして使用することもできます。 サンプルは、戻るボタンのUINavigationBarの外観を次のように設定します。

// For Back button customization, setup the custom image for UINavigationBar inside CustomBackButtonNavController.
let backButtonBackgroundImage = UIImage(systemName: "list.bullet")
let barAppearance =
    UINavigationBar.appearance(whenContainedInInstancesOf: [CustomBackButtonNavController.self])
barAppearance.backIndicatorImage = backButtonBackgroundImage
barAppearance.backIndicatorTransitionMaskImage = backButtonBackgroundImage

// Nudge the back UIBarButtonItem image down a bit.
let barButtonAppearance =
    UIBarButtonItem.appearance(whenContainedInInstancesOf: [CustomBackButtonNavController.self])
barButtonAppearance.setBackButtonTitlePositionAdjustment(UIOffset(horizontal: 0, vertical: -5), for: .default)

ナビゲーションバーの外観を変更する

// Make the navigation bar's title with red text.
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.systemRed
appearance.titleTextAttributes = [.foregroundColor: UIColor.lightText] // With a red background, make the title more readable.
navigationItem.standardAppearance = appearance
navigationItem.scrollEdgeAppearance = appearance
navigationItem.compactAppearance = appearance // For iPhone small navigation bar in landscape.

// Make all buttons with green text.
let buttonAppearance = UIBarButtonItemAppearance()
buttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.systemGreen]
navigationItem.standardAppearance?.buttonAppearance = buttonAppearance
navigationItem.compactAppearance?.buttonAppearance = buttonAppearance // For iPhone small navigation bar in landscape.

// Make the done style button with yellow text.
let doneButtonAppearance = UIBarButtonItemAppearance()
doneButtonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.systemYellow]
navigationItem.standardAppearance?.doneButtonAppearance = doneButtonAppearance
navigationItem.compactAppearance?.doneButtonAppearance = doneButtonAppearance // For iPhone small navigation bar in landscape.

参照元

developer.apple.com

developer.apple.com