超簡単!画面遷移の方法をマスターする(モーダル編)①

この記事は2015年12月31日に書かれたものです。内容が古い可能性がありますのでご注意ください。


画面遷移とは?

アプリが複数の画面によって作成されている場合、その画面間を行ったり来たりとするために
必要な設定です。SwiftやObjective-Cでは「セグエ(Segue)」と呼んでいます。
s16_1
このようなピンクと緑の2画面で構成されている超シンプルなアプリで考えてみましょう。
ストーリーボード上に2つのViewControllerを配置しただけの状態です。
アプリが起動すると、最初の画面(ピンクの画面)が表示されますが、緑色の画面に遷移する仕組み
が実装されていませんのでずっとピンク色の画面のままです。
画面遷移の方法にはいくつか種類がありますが、今回は「モーダル(Modal)」を使用して
説明します。

モーダルとは?

画面の上に新しい画面を重ねて表示していく画面遷移の方法です。重ねて表示するといっても、
操作できる画面は一番上にある最新の画面だけになります。

では、実際にやってみましょう!

【STEP1】画面を2つ用意する

遷移先の画面が無いと話になりませんので、画面を配置します。
右下のオブジェクトライブラリ(ボタンやラベルがあるとこ)の一番上に「ViewController」というものが
ありますので、もとからある画面の右あたりに適当に配置します。
s16_2
ちなみに、アプリ起動後の最初の画面は「→」(図の左の青枠)が付けられている画面になります。
この矢印はドラッグ&ドロップで他の画面に動かすことができます。

わかりやすいように最初の画面をピンク色、遷移先の画面を緑色に色分けしておきます!
ついでに画面遷移するためのボタンも適当な位置に配置しておきます!
s16_3

【STEP2】対応する.swiftファイルを用意する

さて、遷移後の画面が追加されましたので、その画面に対応する.swiftファイルを作成します。
最初からある「ViewController.swift」にまとめてしまっても良いといえば良いのですが、長くなって見づらく
なってしまいますので、別のファイルに分けた方が良いと思います。
ファイルの追加方法は、画面左上「File」→「New」→「File…」→「Cocoa Touch Class」を選択します。
Class名は適当で良いのですが、対応をわかりやすくするために「GreenViewController」としています。
で、このファイルは言わずもがなですが、新しいViewControllerに対応していますので、Subclass ofには
「UIViewController」を選択します。
あとはボタンをポチポチ押して作成です!
s16_4
すると左側のナビゲータエリアに新しいファイルが作成されているはずです。
s16_5

【STEP3】作成したファイルとストーリーボード上の画面を結びつける

さて、新しいファイルを作成したのは良いのですが、このままではまだファイルの中身と画面が結びつけられて
いないので、結びつけないといけません。
具体的な方法は、「ファイル内のクラス名と、画面のクラス名を揃える」ということをします。

①新しい緑色の画面の上部の白い部分をクリックして、
②ユーティリティエリアにViewControllerのものを表示させます。
③そしてアイデンティティインスペクタ(左から3番目のボタン)をクリックし、
④Custom ClassのClass欄に「GreenViewController」を選択するか、もしくは入力します。
s16_6

こうすることで、.swiftファイル内のクラス名と、ストーリーボード上の画面のクラス名が合致して結びつけられます。

ちなみにもともとある画面(今はピンク色に変更してしまっている画面)は、
クラス名がViewControllerとなっています。
これは、ViewController.swiftファイル内に定義されているクラス名と同じですね。
今は明示的にピンクと緑の画面に変更して、緑の画面の方をGreenViewControllerクラスに対応させていますので、
ピンクの画面もPinkViewControllerクラスに対応させ、ファイル名とその中のクラス名も変更しておきましょう。
s16_7
ViewController.swiftファイルの名前をPinkViewController.swiftに変更(任意)し、
その中のクラス名(画面の11行目)を、
class PinkViewController: UIViewController {
に変更します。
s16_8
また、Main.storyboradのピンク色の画面のクラスをPinkViewControllerに変更します。

このように、各画面とそれに紐づくクラスを作成する(わかりやすいようにファイルも分ける方がベター)
というのが原則になりますので覚えておきましょう。

今回はこれで終わりにします。

  • このエントリーをはてなブックマークに追加

PAGE TOP