【Swift/iOS】ナビゲーションバーにボタンを追加する

ナビゲーションバーにボタンを追加する方法を解説します。

図1:ナビゲーションバーボタンの例

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.0
【Swift】5.1
【iOS】13.0
【macOS】Mojave バージョン 10.14.6

やりたい事

次のような画面構成の2nd viewにナビゲーションバーにボタンを追加します。

図2:画面構成

ナビゲーションコントローラー配下でのナビゲーションバーボタンは、2階層目(2nd view)以降はstoryboard上では追加できず、コードで記述する必要があります。

1st viewにも同様の方法でボタン追加が可能ですので、コードでの記述が汎用的でおすすめです。

サンプルコード

まずはじめに「2nd view」のサンプルコードを示します。

処理のおおまかな流れは次の通りです。

  1. バーボタンアイテムの宣言
  2. バーボタンアイテムの初期化
  3. バーボタンアイテムの追加
  4. アクションメソッドの実装

以降の節で各処理について解説します。

①バーボタンアイテムの宣言

インスタンス変数としてUIBarButtonItem型のバーボタンアイテムを宣言します。

ここでは2つのボタンアイテムを宣言しています。

②バーボタンアイテムの初期化

viewDidLoad()内でバーボタンアイテムの初期化を行います。

ここでは2種類のタイプのボタンを宣言しています。

システムアイコンを使ったボタンの初期化

barButtonSystemItem: .add
ボタンのタイプを指定します。
.addは追加ボタン(+)を指定しています。(他に指定できるボタンのタイプは後述)

target: self
この後で示すアクションメソッドの場所を指定します。
selfは自分自身(NextViewControllerのインスタンス)を示します。

action: #selector(addBarButtonTapped(_:))
ボタンがタップされた時に呼び出すメソッド名を指定します。
ここで指定しているaddbarButtonTapped()はこの後で作成します。

barButtonSystemItem:で指定可能なボタンのタイプ

以下に示すボタンタイプがシステムで用意されています。

左から.done、.cancel、.edit、.save、.add、.compose、.reply

図3:ボタンタイプその1

左から.action、.organize、.bookmarks、.search、.refresh、.stop、.camera

図4:ボタンタイプその2

左から.trash、.play、.pause、.rewind、.fastForward、.undo、.redo

図5:ボタンタイプその3

次の2つはボタンの代わりにスペースを挿入するタイプです。

.flexibleSpace
その位置に挿入可能な最大のスペースを挿入します。 複数指定した場合は均等に配置されます。

.fixedSpace
空白スペースを挿入します。widthプロパティで幅を指定します。

任意タイトルボタンの初期化

こちらはボタンのタイトルを任意に設定するタイプの初期化です。

title: “編集”
ボタンのタイトルを指定します。

style: .done
ボタンのスタイルを指定します。
plain(デフォルトスタイル)かdone(Doneボタンと同様の太文字スタイル)のどちらかを指定します。

宣言と初期化を別に行う理由

バーボタンアイテムの初期化を宣言と同時に行わずに、viewDidLoadで行うのは、宣言の時点ではまだselfが初期化されていない為です。

③バーボタンアイテムの追加

rightBarButtonItemsでナビゲーションバーの右側に配置するアイテムの配列を指定します。

指定されたアイテムは右側から順番に配置されます。

self.navigationItemはナビゲーションコントローラー配下でのみ使えるプロパティで、現画面のUINavigationItemを指します。

ボタンをナビゲーションバーの左側に配置するには次の様にleftBarButtonItemsを使用します。

この場合、指定されたアイテムは左側から順番に配置されます。

デフォルトでは左側にアイテムを配置すると、戻るボタンは削除されますが、次のようにleftItemsSupplementBackButtonにtrueをセットしておくと、戻るボタンの隣にアイテムが表示されるようになります。

④アクションメソッドの追加

ボタンがタップされた際に呼ばれるアクションメソッドを追加します。

先頭に@objcを付けるのを忘れないようにしてください。

最後に

ナビゲーションバーにボタンを追加する方法を解説しました。

swift
スポンサーリンク
スポンサーリンク
カピ通信

コメント