[Swift]Segueを使って複数の画面に値渡しをする

2016.06.11
Segueで値渡しのアイキャッチ

こんにちは、プログラマーの@Yuuです。

前回の記事([Swift]初心者向け!Segueを使った画面遷移方法)で、Segueを使った画面遷移の方法をご紹介しました。
今回はSegueを使って画面遷移をする際に、値を次の画面に受け渡す方法をご紹介します。
また、遷移先が複数の画面である事を想定して説明します。

スポンサーリンク

Segueを使った画面間の値渡し

今回は最終的に以下のような画面構成にします。
最終的な画面構成

SecondとThirdがあるのに、Firstがないのは気にしない方向で・・
( ºωº )

この記事でのゴールは1番最初のViewControllerに変数を2つ用意し、その値をSecondViewControllerとThirdViewControllerそれぞれに渡してUILabelに表示する、というのを目標にします。
変数を渡して表示するイメージ

変数a・変数bていうネーミングセンスのなさも気にしない方向で・・
( ºωº )

今回は以下の4つの順番で解説を行います。

  1. UIViewControllerの用意
  2. それぞれのViewControllerにオブジェクトを配置
  3. Segueの設定
  4. 値を受け渡す

最初の「UIVewiControllerを用意する」ところは前回の説明と被るところもあるので簡略化して書きます。
分からないところがあれば前回の記事を参照するようお願いします。

また解説を行う環境は以下のとおりです。

  • OS:OS X El Capitan10.11.5
  • Xcode:7.3.1
  • Swift:2.2

1. UIViewControllerの用意

前回と同じようにSingleApplicationで作成します。

次に「SecondViewController.swift」と「ThirdViewController.swift」を作成します。
遷移先のファイルを2つ追加

Main.storyboardにUIViewControllerを2つ配置し、それぞれのクラスを「SecondViewController」・「ThirdViewController」にします。
配置したViewControllerのclass名を変更

この後は画面遷移を行うためのボタンや遷移先画面のラベルなどを配置していきます。

2. それぞれのViewControllerにオブジェクトを配置

まずはViewControllerにボタンを2つ配置します。
ViewControllerにボタンを2つ配置

次にSecondViewControllerにLabelを2つと戻るボタンを配置します。
Labelを2つボタンを1つ配置

僕はThirdViewControllerと区別がつきやすいように背景色を変更しましたが、そこはお好みで。

真ん中に配置した「変数 aを表示」と書かれたラベルに、ViewControllerから受け取った値を表示するようにします。

同じようにThirdViewControllerにもLabelを2つと戻るボタンを配置します。
thirdViewControllerの見た目

3つのViewControllerに配置した全てのオブジェクトに対して僕はAutoLayoutを設定していますが、「とりあえずSegueの値渡しだけを行いたい!」という場合はAutoLayoutの設定は必要ありません。

これでオブジェクトの配置は完了!
次はSegueの設定を行います。

3. Segueの設定

ViewControllerに配置した「Secondへ」というボタンからは「SecondViewController」へのSegueを、「Thirdへ」というボタンからは「ThirdViewController」へのSegueを設定します。
Segueを2つ設定する

次にSegueに対して「Identifier」を設定します。
この「Identifier」の設定が今回の記事の中で2番目ぐらいに重要なところです。
「Identifier」の設定を忘れると値を渡す事が出来なくなるので注意して下さい。

ちなみに1番重要な項目はちゃんと後で出てきます、はい。

まずstoryboard上のViewControllerからSecondViewControllerに伸びるSegueを選択します。
すると以下のような「Identifier」を設定する画面がサイドバーに表示されます。
SegueのIdentifierが設定出来る

サイドバーが表示されない場合は「Hide or show the Utilities」というボタンを押してサイドバーをアクティブにして下さい。
サイドバーを表示するためのボタン

「Identifier」の欄に「goSecond」と入力します。
IdentifierにgoSecondと入力

同じようにViewControllerからThirdViewControllerに伸びるSegueのIdentifierに「goThird」と設定します。
IdentifierにgoSecondと入力

これでSegueの設定は終了。
Segueの設定が終わったので、次はUnwind Segueの設定を行います。

ViewController.swiftを開きUnwind Segueの1文を追記します。

storyboardに戻ってSecondViewControllerとThirdViewControllerの「戻るボタン」にUnwind Segueを設定します。
Unwind Segueの設定方法など細かい解説は、前回([Swift]初心者向け!Segueを使った画面遷移方法)の記事に書いたので分からければ見て下さい。

Unwind Segueの設定が正常に出来ると、以下のようにstoryboardで「戻るボタン」にUnwind Segueが設定された事を確認出来ます。
戻るボタンにUnwindを設定

これでSegueの設定は完了です!
ここまで出来ると以下のように一応遷移だけは出来る状態になっているはずです。
画面遷移が出来るようになった

後はコード上に値を受け渡す設定を書いていきましょう。

4. 値を受け渡す

お待たせしました。
実際に値渡しの設定を書く、今回の記事で1番重要な部分について書いていきます!

画面遷移時の値の受け渡しの流れをViewControllerとSecondViewControllerを例にとって説明します。

ViewControllerの「Secondへ」ボタンが押される

遷移先のSecondViewControllerをインスタンス化

インスタンス化したSecondViewControllerの変数aに、ViewControllerの変数aを渡す

インスタンス化したSecondViewControllerに遷移し変数aの値を表示する

以上の流れをこれから書いていきます。

これは言葉での解説を読むよりコードを実際に書いた方が分かりやすいかも・・
ということで早速書いてみます!

ViewController.swiftに変数a・bを用意します。

なぜ変数の値が「ラーメン」と「うどん」かは突っ込まない方向で・・
( ºωº )

SecondViewController.swiftに変数aと、変数aの値を表示するためのLabelを@IBOutletで用意します。
そしてViewDidLoadメソッド内で変数aの値をLabelに表示するように設定します。

SecondViewController.swiftに用意したaLabelは、アシスタントエディターに切り替えてstoryboard上のラベルと紐付けて下さい。
アシスタントエディターでラベルを紐付ける

きちんと設定出来れば、storyboard上でラベルを選択するとSecondViewControllerの変数と紐付いている事が確認出来ます。
ラベルの紐付けを確認

同様にThirdViewController.swiftにも変数b変数bの値を表示するLabelを用意し、表示するための設定を書きます。

最後にViewController.swiftに遷移をする際に値を渡す記述をします。

Segueを使って画面遷移を行う際にはprepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?)というメソッドが必ず呼ばれます
このメソッドをoverrideしてデータを受け渡す設定を書きます。

またSegueで画面遷移時に必ず呼ばれるメソッドなので、SecondViewController・ThirdViewControllerどちらでも同じく、このprepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?)メソッドが呼ばれます。
そのため、SecondViewController・ThirdViewControllerどちらに遷移したいのか判定し、その上で値の受け渡しをしないといけません。

その際に先程Segueに指定したIdentifierを使用します

Identifierで遷移先を判定するprepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?)メソッドをViewController.swiftに追記して下さい。

これでデータを渡せるようになったはず。
実際に試してみると
値渡しが出来るようになった

無事データを渡せるようになりました!
(๑•̀ㅂ•́)و✧

今回のプロジェクトはgithubに上げておいたので、よければ参考にしてみて下さい。
meganedogYuu/DeliveryValueSegueSample: Segueを使って複数のVCに値渡しを行うサンプル

最後にViewController.swift・SecondViewController.swift・ThirdViewController.swiftの全文を載せておきます。

あとがき

Segueを設定するのは簡単ですが、値を受け渡すのは意外とめんどくさいですね。
Segueを設定するのと同じぐらいに値渡しが簡単に出来たらいいのに・・

ではでは
今回はこの辺で!ヽ(•̀ω•́ )ゝ✧

Segueで値渡しのアイキャッチ

この記事が気に入ったらいいね!
して最新情報をチェックしよう!

スポンサーリンク