【Swift】CustomSegue(カスタムセグエ)で自作アニメーションでの画面遷移 〜その１〜

CustomSegueを使った画面遷移

CustomSegueを使うと画面遷移時のアニメーションを自由にカスタマイズできてグッとセンスの良さそうなUIにすることができます。
画面遷移のアニメーションのカスタマイズにはUIViewControllerAnimatedTransitioningを使った方法もありますが、今回は、ボタンを押して次の画面に遷移する時のアニメーションをCustomSegueを使った方法で実装していきたいと思います。

その１では一旦アニメーションは後回しにしてCustomSegue実際に使う最初のステップについて解説したいと思います。

CustomSegueを使うための実作業

StroyBoard・クラスの準備

• 今回はNavigationControllerも使っているので、遷移元のViewControllerを選択して以下のようにNavegationControllerに埋め込みましょう。

• ボタンから遷移先のViewControllerへのSegueを作る(Ctrlを押しながらドラッグ)。

• CustomSegueの遷移時と戻る時の処理を実装するクラスを作りましょう。 今回は以下の２つのファイルを作りました。作成時のサブクラス指定で両方UIStroryboardSegueを指定してください。
  • RippleCustomSegue.swift
  • RippleCustomSegueUnwind.swift

• Storyboardに戻ってCustomSegueを選択、以下の画像のように設定しましょう。
  • identifier : 任意のid
  • Class : 先ほど作ったCustomSegueの実装用クラス
  • Module : プロジェクト名を選択してください。(デフォルトで何か入ってたらそれでOK)
  • Kind : Custom (多分デフォルトで入ってます。)

CustomSegueを実装

• まずViewControllerにボタンタップ時のIBActionを作ってください。

  • IBActionの作り方

• 次にRippleCustomSegue.swiftに以下のように書きます。

RippleCustomSegue.swift

import UIKit

class RippleCustomSegue: UIStoryboardSegue {

  override func perform() {
    let source = self.sourceViewController as UIViewController!
    let destination = self.destinationViewController as UIViewController!

    source?.navigationController?.pushViewController(destination!, animated: true)
  }

}

実行してみる

• 実機でもシミュレーターでもどっちでもいいですが実際に動かすと以下のようになります。
  • ボタンはそれっぽく見た目をいじってあります。
  • ソースはGithubにあげました

まとめ

今回はあえてカスタムセグエを使って画面遷移を実装してみました。
セグエとセグエのカスタムアニメーションをライブラリとして分離して使ってもいいかもしれません。

次回はこのアニメーションをいじっていきます。