【Swift】Navigation Itemの使い方。ナビゲーションバーに表示するタイトルとボタンを管理するクラス。(Swift 2.1、XCode 7.2)
Navigation Itemとは
本記事ではSwiftで使える部品のNavigation Item（ナビゲーションアイテム）について説明する。
ナビゲーションアイテムとは、Navigation Bar（以下、ナビゲーションバー）に表示するタイトルやボタンを管理する部品である。
画面遷移が行われるたびにナビゲーションバーはナビゲーションアイテムを後入れ先出しの配列（以下、スタック）に格納する。箱の中にナビゲーションアイテムを積んでいくようなイメージだ。
逆に、戻るボタンを押して前の画面に戻るときはスタックの1番上のナビゲーションアイテムを取り出して画面に表示して破棄する。このように、戻るときに表示するナビゲーションバーのタイトルやボタンをスタックを使って把握している。
この動きを把握しておくとプログラム作りに役に立つ。
ナビゲーションアイテムの設定項目
ナビゲーションアイテムの基本的な使い方は、ナビゲーションバーの記事で説明しているので、そちらを参照されたし。⇒「記事」
本記事では、ナビゲーションアイテムについてまだ説明していない機能について説明する。まずはアトリビュートインスペクタの設定項目から確認する。
Title
タイトルに表示する文字列。下図の「昼」がタイトル。
Prompt
ナビゲーションバーの上の表示する文字列。長いメッセージにしてもナビゲーションバーのボタンやタイトルのレイアウトに影響しない。
Back Button
戻るボタンに表示する文字列。ちなみに、何も設定しない場合は前画面のタイトルが表示される。前画面にタイトルが設定されていかったり、設定した文字列が長すぎる場合は「Back」が表示される。
戻るボタンを別の部品に置き換える
ナビゲーションバーの左側を「戻るボタン」にしたくない場合は、leftBarButtonItemに部品を設定すれば戻るボタンが設定した部品に置き換わる。
では、遷移先画面のナビゲーションバーの左側に「トップに戻るボタン」を配置して、どこの画面からでもトップに戻れるものを実装してみよう。
作業開始前のXcodeプロジェクトをGitHubに置いたので、手順を試してみる人はご利用されたし。
⇒「テスト用プロジェクト」
ストーリーボードを開き、下図赤枠のビューコントローラーを選択する。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を開き、Classに「TestViewController」を設定する。
同じように、紫枠のビューコントローラーを選択し、Classに「TestViewController」を設定する。これで昼と夜の画面に同じビューコントローラーが使われるようになった。
TestViewController.swiftを以下のコードに変更する。
ナビゲーションアイテムのleftBarButtonItemに「トップに戻るボタン」を設定している。これで「戻るボタン」の変わりに「トップに戻るボタン」が表示されるようになる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// // TestViewController.swift // import UIKit class TestViewController: UIViewController { //最初からあるメソッド override func viewDidLoad() { super.viewDidLoad() //トップに戻るボタンを作成 let leftButton = UIBarButtonItem(title: "トップに戻る", style: UIBarButtonItemStyle.Plain, target: self, action: "goTop") self.navigationItem.leftBarButtonItem = leftButton } //トップに戻るボタン押下時の呼び出しメソッド func goTop() { //トップ画面に戻る。 self.navigationController?.popToRootViewControllerAnimated(true) } } |
以下は実際のプレイ動画
複数ボタンを設置する
ナビゲーションバーの左右に配置できるボタンは1個ずつだけではなく、leftBarButtonItemsプロパティまたはrightBarButtonItemsプロパティに部品の配列を設定すれば制限なく配置できる。
では、ナビゲーションバーの左に「前画面に戻るボタン」と「トップ画面に戻るボタン」の2つを配置してみよう。
TestViewController.swiftを以下のコードに変更する。2つのボタンの配列をleftBarButtonItemsプロパティに設定している。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// // TestViewController.swift // import UIKit class TestViewController: UIViewController { //最初からあるメソッド override func viewDidLoad() { super.viewDidLoad() //前画面ボタンとトップ画面ボタンの2つを設定する。 let leftButton1 = UIBarButtonItem(title: "前画面", style: UIBarButtonItemStyle.Plain, target: self, action: "goBefore") let leftButton2 = UIBarButtonItem(title: "トップ画面", style: UIBarButtonItemStyle.Plain, target: self, action: "goTop") self.navigationItem.leftBarButtonItems = [leftButton1, leftButton2] } //トップ画面ボタン押下時の呼び出しメソッド func goTop() { //トップ画面に戻る。 self.navigationController?.popToRootViewControllerAnimated(true) } //前画面ボタン押下時の呼び出しメソッド func goBefore() { //前画面に戻る。 self.navigationController?.popViewControllerAnimated(true) } } |
以下は実際のプレイ動画
夕方画面を経由してトップに戻る
上記のコードで気になるのは、夜画面で「トップ画面ボタン」を押すといきなり昼画面が現れる点である。リアル感を出すために夕方画面を経由しながらトップ画面に戻りたい。
そんなときはTestViewController.swiftを以下のようなコードにする。「トップ画面ボタン押下時の呼び出しメソッド」でViewControllerを取り出せるあいだは再帰的にgoTopメソッドを呼び出している。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
// // TestViewController.swift // import UIKit class TestViewController: UIViewController { //最初からあるメソッド override func viewDidLoad() { super.viewDidLoad() //前画面ボタンとトップ画面ボタンの2つを設定する。 let leftButton1 = UIBarButtonItem(title: "前画面", style: UIBarButtonItemStyle.Plain, target: self, action: "goBefore") let leftButton2 = UIBarButtonItem(title: "トップ画面", style: UIBarButtonItemStyle.Plain, target: self, action: "goTop") self.navigationItem.leftBarButtonItems = [leftButton1, leftButton2] } //トップ画面ボタン押下時の呼び出しメソッド func goTop() { if let viewController = self.navigationController?.popViewControllerAnimated(true) as? TestViewController { //再帰呼び出し viewController.goTop() } } //前画面ボタン押下時の呼び出しメソッド func goBefore() { //前画面に戻る。 self.navigationController?.popViewControllerAnimated(true) } } |
以下は実際のプレイ動画