うるおいらんど

アプリ開発やサイト制作のメモとか。

【Swift】カスタムSegueとカスタムUnwindSegueを作成する【Xcode7.1/iOS9】

魚ライン
魚ライン

UINavigationControllerがどうしても使えなくて諦めて普通のSegueで対応しているところです。

navigationControllerなら左右にスライドアニメーションで遷移する(らしい)がどうにもこうにも上手く使えないのでカスタムSegueで左右にスライドするアニメーションを作成しました。

 

※UnwindのアニメーションはiOS9でのみの対応となります。iOS7,8では動きませんでした。

※iOS9上ではこちらの方法で動作しますが、iOS8以下では動作しません。

iOS8以下での必要なコードをこちらの記事に書きました

【Swift】カスタムUnwindSegueを作成する【iOS8編】

 

 

カスタムSegueを作成する

まずは新規ファイルでカスタムSegue用のファイルを作ります

File > New > File….からCocoaTouchClassを選択します。

スクリーンショット-2015-12-05-17.58.05

 

そしてSubclassをUIStoryboardSegueに設定してファイルを作成します

スクリーンショット-2015-12-05-17.58.15

 

作成ファイルを編集していきます。

perofmメソッドをoverrideしてその中にコードを書いていきます。

まずは遷移前後のViewControllerのインスタンスをそれぞれ作成。

 

次に画面の縦横をそれぞれ取得しときます

 

そしてアニメーション前の遷移後のビューの位置を設定しておきます。

 

遷移先をサブビューに設定しておく(?)

UIWindowについてよくわかっていないのですが、こういうことらしい・・

At this point, the view of the second view controller is not a subview of the app’s window yet. So, before we implement the actual animation, it’s obvious that we must add it to the window. This will be achieved using the insertSubview(view:aboveSubview:) method of the app’s window object. As you see next, at first we access the window object, and then we add the destination view:

参照元:A Beginner’s Guide to Animated Custom Segues in iOS 8
英語が読めないわけじゃなくてですね・・・・

ほわぁ〜っとしたのはわかるんですけど説明できないというか、そのまま訳せばいいんですけども。。。

先にwindow objectにアクセスして、遷移前の画面の上に遷移後のビューをのせる、ということ?

 

次にアニメーションをつけます

このアニメーションの中をいじることで色々なアニメーションをつけることができます。

まずは画面に表示されている遷移前のビューを画面外に押しやります。

それと同時に遷移後のビューを画面外から画面上に移動させます。(先ほど設定した位置からの移動になります)

 

アニメーションが終了したら画面を表示させます。animetedをtrueにしてしまうとスライド後に再度下から表示するアニメーションをしてしまいます。

つまりwindowは見かけ上の画面を取得するということなのかな。むむむ。わからん。

 

Storyboard上でカスタムセグエにしておくことを忘れずに

スクリーンショット-2015-12-05-18.50.59

Classが先ほど作成したファイル名になっていればOKです。

 

カスタムUnwindSegueを作成する

次にカスタムUnwindSegueを作成していきます。

なかなか上手くいかなくて大変でしたが、成功したら意外と単純でした。

 

UnwindSegueを作成する際には、まず遷移先(前のページ)にこのコードを書いておきます

これがなければUnwindを設定することができます。

FirstViewController からSecondViewControllerに遷移していて、そこからUnwindでFirstViewControllerに戻る場合には、FirstViewControllerの方にコードを書きます。

 

そしてStoryboard上でSegueをつなげます。

スクリーンショット-2015-12-05-19.00.39

 

このときにUnwindSegueのClassに作成しておいたUnwindSegueのファイルを設定します。(作り方はSegueと同様)

 

スクリーンショット-2015-12-05-19.46.52

 

 

以前まではこの設定ができなかったそうで、設定ができない場合の記事は色々出てきたんですが、ない場合の記事が出てこなくてひっかかってしまいました。

結局やったことはSegueの時とほとんど同じです。

 

先ほどと同様にUnwindSegueのファイルを作成します。

 

こんな感じ。

Segueと異なるところは画面の閉じ方ぐらいでしょうか。

あとはFistViewControllerとSecondViewControllerの役割が反対になるので注意が必要です。

 

補足しました

iOS8以下ではさらにこちらのコードも必要です

ざっと別記事も書きましたが必要なのはこのコードだけです。【Swift】カスタムUnwindSegueを作成する【iOS8編】

iOS9でもStoryboard上Classを設定しない場合はこちらのコードが必要です。

 

 

できたコードを見ると、なんだ(´・ω・`)って感じなんですがなかなかにハマりました(笑)

Xcode7.1環境ですが、Unwindセグエもカスタムセグエがしやすくなっていて嬉しいですね。

遷移後にエラーが発生した・・・・

SegueのコードをコピーしてそのままUnwindに貼り付けて、その後FirstVCViewとSecondVCViewを入れ替えただけのコードにしたところこんなエラーが出ました。

 

こいつをやっつけるのに時間がかかったわけなんですが

このエラーは「同時タップによる多重遷移」のせいらしいです。つまり画面を複数開いてしまうことによるエラーです。

最初のカスタムSegueでは、アニメーション後に遷移先の画面を新しく表示させています。

カスタムUnwindSegueでは、アニメーション後に遷移前の画面を閉じることで、遷移後の画面を表示しています。

UnwindSegueでは遷移後の画面を開くコードがまた別のところにあるというわけだろうか。それとも上に順繰り重なっていっているからなのだろうか。要はモーダルで重なっているのと同じ?なのか。

詳しいことはあまり理解できていませんが、上のように対処することでエラーを回避できました。

 

とにかくアニメーションが思った通りに動いてくれるとすごく嬉しいし楽しいです。

これでもうセグエなんて怖くないぜ!!!!!(なおnavigationControllerはめちゃくちゃ手強い模様)

 

間違っているところを発見した方やUIWindowについての説明がわかりやすくできる方がいたらぜひ教えてください。

 

 

参考サイト

【Swift】Custom Segueを作る方法

A Beginner’s Guide to Animated Custom Segues in iOS 8

エラー対処

はじめてのiPhoneアプリ – カメラアプリを作る際にハマったことのメモ

 

 

魚ライン
モッピー!お金がたまるポイントサイト
魚ライン

Swiftの記事一覧を見る

コメント

コメントは認証制です。詳しくは下記の注意をお読みください。

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

魚ライン 魚ライン