【Swift】NavigationBarについて

NavigationBarとは

iOSアプリの画面上部にあるバーで、アプリ内でのナビゲーションを管理するために使用されます。Navigation Barには、タイトルやボタンなどのコンポーネントを追加することができます。Swiftでは、UINavigationControllerを使用してNavigation Barを実装します。

実装方法

まず、UINavigationControllerを作成します。

let navigationController = UINavigationController(rootViewController: viewController)

次に、ViewControllerでNavigation Barのタイトルを設定する方法を見てみましょう。

navigationItem.title = "Navigation Bar"

Navigation Barにボタンを追加する方法を見てみましょう。

let addButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addButtonTapped))
navigationItem.rightBarButtonItem = addButton

上記の例では、UIBarButtonItemを使用して、Navigation Barに追加するボタンを作成しています。barButtonSystemItemプロパティを使用して、標準のボタンアイコンを選択することができます。targetプロパティには、ボタンがタップされたときに呼び出されるメソッドを指定します。また、rightBarButtonItemプロパティを使用して、ボタンをNavigation Barの右側に追加しています。

最後に、Navigation Barの背景色を設定する方法を見てみましょう。

navigationController?.navigationBar.barTintColor = .blue

上記の例では、navigationBarのbarTintColorプロパティを使用して、Navigation Barの背景色を設定しています。

カスタマイズ方法

バーの背景色の変更 　

以下のコードをNavigation Controller内の任意のViewControllerで実行することで、Navigation Barの背景色を変更することができます。

navigationController?.navigationBar.barTintColor = UIColor.red // 例として赤色に変更

タイトルテキストのカスタマイズ

以下のコードをNavigation Controller内の任意のViewControllerで実行することで、Navigation Barのタイトルテキストのフォントや色、影などを変更することができます。

let titleTextAttributes = [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20), NSAttributedString.Key.foregroundColor: UIColor.white]
navigationController?.navigationBar.titleTextAttributes = titleTextAttributes

ナビゲーションアイテムのカスタマイズ

以下のコードをNavigation Controller内の任意のViewControllerで実行することで、Navigation Barに表示されるナビゲーションアイテム（例えば、戻るボタン、右上のボタンなど）のアイコンやテキスト、フォント、色などを変更することができます。

let rightBarButtonItem = UIBarButtonItem(title: "右上のボタン", style: .plain, target: self, action: #selector(didTapRightBarButtonItem))
rightBarButtonItem.tintColor = UIColor.white // アイコンの色を変更する場合
navigationItem.rightBarButtonItem = rightBarButtonItem

バーの透明化

以下のコードをNavigation Controller内の任意のViewControllerで実行することで、Navigation Barのバー自体を透明にすることができます。

navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.isTranslucent = true

なお、これらのカスタマイズ方法は他にも様々なオプションがあります。詳細はAppleの公式ドキュメントを参照してください。

UINavigationBar | Apple Developer Documentation

Navigational controls that display in a bar along the top of the screen, usually in conjunction with a navigation controller.

docs.developer.apple.com

  </div>

最後に

iOSアプリ開発をしています。
主にSwiftですが、最近は熱が入ってきてFlutterも🦾
色々やってます。もし良かったら見てってください。

https://sogablog.net/