【Swift】UINavigationItemの使い方。戻るボタンをカスタマイズする。 | はじはじアプリ体験記

Navigation Item
【Swift】Navigation Itemの使い方。ナビゲーションバーに表示するタイトルとボタンを管理するクラス。

  • 2016年5月28日
    Swift 2.1で検証
  • Twitterでシェア
  • Facebook
  • LINEで送る

Navigation Itemとは

本記事ではSwiftで使える部品のNavigation Item(ナビゲーションアイテム)について説明する。

Navigation Item

 

ナビゲーションアイテムとは、Navigation Bar(以下、ナビゲーションバー)に表示するタイトルやボタンを管理する部品である。

画面遷移が行われるたびにナビゲーションバーはナビゲーションアイテムを後入れ先出しの配列(以下、スタック)に格納する。箱の中にナビゲーションアイテムを積んでいくようなイメージだ。

逆に、戻るボタンを押して前の画面に戻るときはスタックの1番上のナビゲーションアイテムを取り出して画面に表示して破棄する。このように、戻るときに表示するナビゲーションバーのタイトルやボタンをスタックを使って把握している。

この動きを把握しておくとプログラム作りに役に立つ。

Navigation BarにNavigation Itemをスタックするイメージ

 

ナビゲーションアイテムの設定項目

ナビゲーションアイテムの基本的な使い方は、ナビゲーションバーの記事で説明しているので、そちらを参照されたし。⇒「記事

本記事では、ナビゲーションアイテムについてまだ説明していない機能について説明する。まずはアトリビュートインスペクタの設定項目から確認する。

Navigation Itemのアトリビュートインスペクタ

 

Title

タイトルに表示する文字列。下図の「昼」がタイトル。

Navigation ItemのTitleの設定例

 

Prompt

ナビゲーションバーの上の表示する文字列。長いメッセージにしてもナビゲーションバーのボタンやタイトルのレイアウトに影響しない。

Navigation Itemのpromptの設定例

 

Back Button

戻るボタンに表示する文字列。ちなみに、何も設定しない場合は前画面のタイトルが表示される。前画面にタイトルが設定されていかったり、設定した文字列が長すぎる場合は「Back」が表示される。

Navigation ItemのBack Buttonの表示例

 

戻るボタンを別の部品に置き換える

ナビゲーションバーの左側を「戻るボタン」にしたくない場合は、leftBarButtonItemに部品を設定すれば戻るボタンが設定した部品に置き換わる。

では、遷移先画面のナビゲーションバーの左側に「トップに戻るボタン」を配置して、どこの画面からでもトップに戻れるものを実装してみよう。

作業開始前のXcodeプロジェクトをGitHubに置いたので、手順を試してみる人はご利用されたし。
⇒「テスト用プロジェクト

 

ストーリーボードを開き、下図赤枠のビューコントローラーを選択する。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を開き、Classに「TestViewController」を設定する。

同じように、紫枠のビューコントローラーを選択し、Classに「TestViewController」を設定する。これで昼と夜の画面に同じビューコントローラーが使われるようになった。

Navigation Itemにカスタムクラスを設定する

 

TestViewController.swiftを以下のコードに変更する。

ナビゲーションアイテムのleftBarButtonItemに「トップに戻るボタン」を設定している。これで「戻るボタン」の変わりに「トップに戻るボタン」が表示されるようになる。

 

以下は実際のプレイ動画

 

複数ボタンを設置する

ナビゲーションバーの左右に配置できるボタンは1個ずつだけではなく、leftBarButtonItemsプロパティまたはrightBarButtonItemsプロパティに部品の配列を設定すれば制限なく配置できる。

では、ナビゲーションバーの左に「前画面に戻るボタン」と「トップ画面に戻るボタン」の2つを配置してみよう。

TestViewController.swiftを以下のコードに変更する。2つのボタンの配列をleftBarButtonItemsプロパティに設定している。

 

以下は実際のプレイ動画

 

夕方画面を経由してトップに戻る

上記のコードで気になるのは、夜画面で「トップ画面ボタン」を押すといきなり昼画面が現れる点である。リアル感を出すために夕方画面を経由しながらトップ画面に戻りたい。

そんなときはTestViewController.swiftを以下のようなコードにする。「トップ画面ボタン押下時の呼び出しメソッド」でViewControllerを取り出せるあいだは再帰的にgoTopメソッドを呼び出している。

 

以下は実際のプレイ動画

Swift記事一覧へ
  • Twitterでシェア
  • Facebook
  • LINEで送る
はじはじビットコイン目指せ!最強の暗号通貨トレーダー

コメントを残す

お名前