ナビゲーションコントローラを使って画面を遷移する
2011年3月12日:iOS
前回、ボタンを押して画面を表示して、ボタンを押すと画面が消える方法を紹介しました。今回はナビゲーションコントローラを使った画面遷移方法を紹介します。ナビゲーションコントローラを使うと、ToDoリストのように遷移して戻る動作をスムーズにすることができます。
プロジェクトの作成
Xcodeを起動して、「Create a new Xcode project」を選択します。
そして、iOSのSingle View Applicationを選択します。
最後に、プロジェクト名と言語を選んでプロジェクトの作成完了です。ここでは言語はSwiftとします。
画面遷移の設計
では画面遷移の設計をします。ストーリボードを選択します。ナビゲーションコントローラが必要なので、ViewControllerを選択して
メニューから
Editor->Embed in->Navigation Controller
を選択します。するとNavigation Controllerが追加されます。また、上の方にナビゲーションが追加されます。
ナビのメニューの場所をダブルクリックするとタイトルをつけることができます。ここでは、「最初の画面」とタイトルをつけました。
次に、ViewControllerとボタンを追加します。ボタンをおしたら設置したViewControllerへ移動するという流れです。ボタンとしては「Bar Button Item」とし、ナビに設置します。
「Item」という表示ですが、ダブルクリックで表示を変更できます。「次へ」に変更します。ボタンを押したら次の画面へ移りたいとの、コントロールを押しながらドラッグ&ドロップでボタンと画面をセグエでつなぎます。以下のような画面がでるので「show」を選択します。
以上の操作を行うと、セグエで画面が接続されます。そして、設置したViewControllerにナビが追加されます。このナビにタイトルを表示したいので「Navigation Item」をドラッグ&ドロップで追加します。
あとはTitleをダブルクリックで変更し「2番目の画面」とします。ここで実行すると以下のようになります。
1.はじめの画面
2.次へをおすと次の画面へ
ナビなしで画面を表示する
上に表示されるナビなしで画面を表示させる方法を紹介します。まず、ViewControllerとBar Button Itemを同様に設置します。ボタンの表示も同様に「次へ」とします。ボタンからコントロールを押しながらドラッグ&ドロップでつなげます。その際、「show detail」を選択します。
戻れるようにする
これで遷移できるようになりますが、戻ることができないので戻れるようにします。その方法は前回紹介した方法と同様です。まず、戻るためのボタンを設置します。そして、ダブルクリックで表示を「戻る」にします。設置したViewController用のクラスをつくるために、メニューから
File->New->File…
を選択し、Cocoa Touchファイルを作成します。その名前をDetailViewControllerとし、サブクラスにUIViewControllerを選択します。
作成したクラスとViewControllerをつなぐために、ストーリボードでViewControllerを選び、AttributeインスペクタでDetailViewControllerを選択します。
あとは2画面にし、DetailViewControllerへボタンを押した際のアクションを追加します。そして、以下のようにコーディングします。
@IBAction func Back(sender: UIButton) { self.dismissViewControllerAnimated(true,completion:nil) }
これで戻るボタンを押すと前の画面へ戻ることができます。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー