【Swift UIKit】コードでNavigationBarItemを実装する方法と使い方

この記事からわかること
- SwiftのUIKitでコードでNavigationBarItemを実装する方法
- UIBarButtonItemクラスでのバーボタンの定義方法
- navigationItemプロパティの使い方
- 右や左にボタンを設置する方法
- 戻るボタンを非表示にさせないようにするには?
index
[open]
\ アプリをリリースしました /
環境
- Xcode:15.0.1
- iOS:17.0
- Swift:5.9
- macOS:Sonoma 14.1
SwiftのUIKitでコードからNavigationBarItem(ナビゲーションバーにボタンなど)を実装する方法をまとめていきます。この記事ではUINavigationControllerの使い方は解説していないので以下記事を参考にしてください。
コードからNavigationBarItemを実装する方法
ナビゲーションバーにカスタムでボタンを設置する流れは以下の通りです。NavigationControllerはStoryboardやコードなどから設置しておきます。
- NavigationControllerを設置
- UIBarButtonItemを定義
- UIViewController.navigationItemプロパティに格納
UIBarButtonItemクラス
UIBarButtonItem
はナビゲーションバーやツールバーなどに設置できるボタンクラスです。様々なイニシャライザを使用して文字や画像、任意のViewを各バーに設置するボタンとして実装することができます。
文字ボタンの実装

文字のボタンを実装したい場合は以下のように実装します。
引数に渡す値
- title: String? → ボタンテキスト
- style: UIBarButtonItem.Style → ボタンスタイル(.plane or .done(完了))
- target: Any? → ボタンがタップされたときにアクションを受け取るオブジェクト
- action: Selector? → ボタンがタップされたときに呼び出されるメソッド
画像ボタンの実装

画像のボタンを実装したい場合は以下のように実装します。
引数に渡す値
- image: UIImage? → ボタンに表示する画像
- style: UIBarButtonItem.Style → ボタンスタイル(.plane or .done(完了))
- target: Any? → ボタンがタップされたときにアクションを受け取るオブジェクト
- action: Selector? → ボタンがタップされたときに呼び出されるメソッド
システムに用意済みのボタンの実装
システムに既に定義されているデザインのボタンを使用したい場合は以下のように実装します。それぞれの役割にあった文字やアイコンが表示されるようになります。またflexibleSpace
/fixedSpace
は余白を調整する際に活用できます。
引数に渡す値
- barButtonSystemItem: UIBarButtonItem.SystemItem → UIBarButtonItem.SystemItem型の値
- target: Any? → ボタンがタップされたときにアクションを受け取るオブジェクト
- action: Selector? → ボタンがタップされたときに呼び出されるメソッド
UIBarButtonItem.SystemItem
型で指定できる値は以下の通りです。
公式リファレンス:UIBarButtonItem.SystemItem
カスタムViewボタンの実装

既存のボタンではなく自由なデザインのボタンを設置したい場合は以下のように実装します。
navigationItemプロパティに追加して表示する
ボタンを定義したらナビゲーションバーに配置する処理を記述します。右側に配置したいならUIViewController
>navigationItem
>rightBarButtonItem
に左側に配置したいならUIViewController
>navigationItem
>leftBarButtonItem
に定義したUIBarButtonItem
を渡します。

複数のボタンを表示させる

右側や左側に1つではなく複数のボタンを表示させたい場合はrightBarButtonItems
/leftBarButtonItems
プロパティに配列形式でUIBarButtonItem
を渡します。配列に先に入っている要素が端に表示される形になります。
デフォルトの「戻る」ボタンを表示させる
ナビゲーションバーの左側にUIBarButtonItem
を追加してしまうとデフォルトで表示される「戻る」ボタンが非表示になってしまいます。カスタムボタンとデフォルトの「戻る」ボタンを両方表示させたい場合はleftItemsSupplementBackButton
プロパティにtrue
を渡すことで表示されるようになります。
ボタンの色を変える方法
ボタンの色を変えたい場合はUIBarButtonItem
のtintColor
プロパティの値を変更すればOKです。

中央に配置する
ナビゲーションバーに中央にビューを配置したい場合は文字だけならtitle
、カスタムビューならtitleView
に任意のViewを渡すことで実装することができます。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。