【Swift】Segueのカスタムクラス。遷移先ビューの登場シーンを自作する。(Swift 2.1、XCode 7.2)

2020年6月16日

Segueの動きを自作する

前回までの記事でSegue(以下、セグエ)の設定を変更して遷移先ビューの重なり方や登場シーンを変更する方法について説明してきた。⇒「記事

種類は多いものの、もう少し自分好みの画面遷移の動きにしたいと思う時がある。そんなときに使われるのがCustom Class(以下、カスタムクラス)である。

本記事ではセグエのカスタムクラスで画面遷移の動きを自作する方法を説明する。

SegueのAttribugte InspectorでCustomを設定

 

カスタムクラスを作る

画面遷移するときに、遷移先のビューが上または左から現れる動きをセグエのカスタムクラスで作ってみよう。

以降の手順は「Segueの使い方。シーンとシーン接続して画面遷移をする。」の続きから行うので、実装を試す人は先に読んでおくことをお勧めします。

メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。

Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestSegue」、Subclass ofに「UIStoryboardSegue」を入力し、Nextボタンを押す。

クラス名を設定する

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。

クラスの保存場所を指定する

 

下図赤枠ののセグエを選択する。紫枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Classに「TestSegue」、Kindに「Custom」を設定する。

同じように、黄緑枠ののセグエを選択し、Classに「TestSegue」、Kindに「Custom」を設定する。これで、2つのセグエに同じカスタムクラスが使われるようになった。

SegueのAttribute Inspectorでカスタムクラスを設定する

 

TestSegue.swiftを以下のコードに変更する。UIStoryboardSegueクラスのperformメソッドをオーバーライドして登場シーンを自作している。

セグエの識別子が「GreenSegue」の場合は画面上から遷移先ビューが登場し、「YellowSegue」の場合は画面左から遷移先ビューが登場するようにした。

 

以下が実施のプレイ動画

 

前の画面に戻る動きを自作する

先ほどと同じような手順で前の画面に戻る動きも自作してみよう。メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。

Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestUnwindSegue」、Subclass ofに「UIStoryboardSegue」を入力し、Nextボタンを押す。

クラス名、サブクラスを入力する

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。

保存場所を指定する

 

次に下図赤枠の「Unwind segue to “Exit"」を選択する。紫枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Classに「TestUnwindSegue」を入力する。

続いて、黄緑枠の「Unwind segue to “Exit"」を選択して、Classに「TestUnwindSegue」を入力する。これで2つのUnwindSegueに同じカスタムクラスが使われるようになった。

Unwindセグエにカスタムクラスを指定する

 

TestUnwindSegue.swiftを以下のコードに変更する。遷移元と遷移先が先ほどとは逆になることに注意。

青画面に戻すときに、黄色または緑画面のビューを画面外に投げるようなアニメーションにしたい。しかし、メソッドが呼ばれたときの黄色or緑画面のビューコントローラーがその時点で利用されているコントローラーなので、この中のビューを移動するとビューの外が黒くなってしまう。

そこで、背景色とサイズを同じにした3つ目のビューを作成し、青画面のビュー、3つ目のビューの順で黄色or緑画面のビューに追加し、3つ目のビューをアニメーションで移動するようにした。

 

以下は実際のプレイ動画