ナビゲーションコントローラを使って画面を遷移する

2011年3月12日：iOS

　前回、ボタンを押して画面を表示して、ボタンを押すと画面が消える方法を紹介しました。今回はナビゲーションコントローラを使った画面遷移方法を紹介します。ナビゲーションコントローラを使うと、ToDoリストのように遷移して戻る動作をスムーズにすることができます。

プロジェクトの作成

　Xcodeを起動して、「Create a new Xcode project」を選択します。

createnewproject

そして、iOSのSingle View Applicationを選択します。

singleview

最後に、プロジェクト名と言語を選んでプロジェクトの作成完了です。ここでは言語はSwiftとします。

3

画面遷移の設計

　では画面遷移の設計をします。ストーリボードを選択します。ナビゲーションコントローラが必要なので、ViewControllerを選択して

viewcontroller

メニューから

Editor->Embed in->Navigation Controller

を選択します。するとNavigation Controllerが追加されます。また、上の方にナビゲーションが追加されます。

navigation

ナビのメニューの場所をダブルクリックするとタイトルをつけることができます。ここでは、「最初の画面」とタイトルをつけました。

menu

次に、ViewControllerとボタンを追加します。ボタンをおしたら設置したViewControllerへ移動するという流れです。ボタンとしては「Bar Button Item」とし、ナビに設置します。

barbutton

「Item」という表示ですが、ダブルクリックで表示を変更できます。「次へ」に変更します。ボタンを押したら次の画面へ移りたいとの、コントロールを押しながらドラッグ＆ドロップでボタンと画面をセグエでつなぎます。以下のような画面がでるので「show」を選択します。

show

以上の操作を行うと、セグエで画面が接続されます。そして、設置したViewControllerにナビが追加されます。このナビにタイトルを表示したいので「Navigation Item」をドラッグ＆ドロップで追加します。

naviitem

あとはTitleをダブルクリックで変更し「２番目の画面」とします。ここで実行すると以下のようになります。

１．はじめの画面

スクリーンショット_2015_03_08_21_52

２．次へをおすと次の画面へ

nextgamen

ナビなしで画面を表示する

　上に表示されるナビなしで画面を表示させる方法を紹介します。まず、ViewControllerとBar Button Itemを同様に設置します。ボタンの表示も同様に「次へ」とします。ボタンからコントロールを押しながらドラッグ＆ドロップでつなげます。その際、「show detail」を選択します。

showdetail

戻れるようにする

　これで遷移できるようになりますが、戻ることができないので戻れるようにします。その方法は前回紹介した方法と同様です。まず、戻るためのボタンを設置します。そして、ダブルクリックで表示を「戻る」にします。設置したViewController用のクラスをつくるために、メニューから

File->New->File…

を選択し、Cocoa Touchファイルを作成します。その名前をDetailViewControllerとし、サブクラスにUIViewControllerを選択します。

　作成したクラスとViewControllerをつなぐために、ストーリボードでViewControllerを選び、AttributeインスペクタでDetailViewControllerを選択します。

viewcontrolelr

あとは２画面にし、DetailViewControllerへボタンを押した際のアクションを追加します。そして、以下のようにコーディングします。

    @IBAction func Back(sender: UIButton) {
        self.dismissViewControllerAnimated(true,completion:nil)
    }

これで戻るボタンを押すと前の画面へ戻ることができます。

著者：安井 真人(やすい　まさと)

TOP