【iOS】カスタムSegueの作り方
こんにちは、橋本です。
今日はiOSのSegueのカスタム方法について書いていきたいと思います。
久々のiOSネイティブネタです。
Storyboardで画面を作っていて画面遷移を作成するときに、画面をSegueでつないで選択肢に出てくるpushやmodalをそのまま使っている方は多いかと思います。
modalを選択すると、デフォルトで4種類のアニメーションが選択出来るので、それでまかなえることも多いですよね。
ただ、pushに関してはアニメーションが基本のスライドアニメーション以外選択できないので、なんとなくスライドのままという方もいるのではないでしょうか。
カスタムで動きを実装するのはなんとなく大変そうですもんね。
気持ちは分かります。
ただ、作り方さえ分かってしまえば、CustomのSegueを作ってスライドアニメーションを独自のアニメーションに置き換えるのはすごく簡単なんですよ。
今回はこのCustomのSegueの作り方について説明していきたいと思います。
では、順を追って作り方を見て行きます。
まずは、テスト用のプロジェクトを作成してください。今回は「Single View Application」を選択しました。
NavigationViewControllerを使用している際のカスタムSegueの作り方を説明していきたいと思いますので、既存のViewControllerをNavigationControllerに紐づけていきます。
Storyboard上のViewControllerを選択した状態でメニューの「Editor > Embed In > Navigation Controller」を選んで、既存のViewControllerをNavigationControllerに紐付いた状態にします。
次に、遷移先のViewControllerを追加して既存のViewControllerと繋ぎます。
まずはViewControllerを一つStoryboard上に追加します。
次に既存のViewControllerにボタンを一つ追加し、ボタンと追加したViewControllerをSegueでつ なぎます。
繋ぐ際に、Segueの形式を選ぶ選択肢が出ると思うので、Customを選択しておいてください。
ではいよいよカスタムのSegueを作成していきます。
プロジェクトにファイルを追加します。
Objective-Cファイルを選択し、Class名はFlipSegue、親のClassにはUIStoryboardSegueを選択します。
次に.mファイルを開き、performメソッドをオーバーライドしていきます。
performメソッドは画面遷移時の動きを担当するメソッドです。
以下のように実装していきます。
#import "FlipSegue.h"
@implementation FlipSegue
- (void)perform {
UIViewController *sourceViewController = (UIViewController *)self.sourceViewController;
UIViewController *destinationViewController = (UIViewController *)self.destinationViewController;
[UIView transitionWithView:sourceViewController.navigationController.view
duration:1
options:UIViewAnimationOptionTransitionFlipFromLeft
animations:^{
[sourceViewController.navigationController pushViewController:destinationViewController animated:NO];
}
completion:nil];
}
@end
UIStoryboardSegueのsourceViewControllerが遷移元、destinationViewControllerが遷移先のViewControllerになります。
id型になっているので、UIViewController型にキャストしていったん変数に入れておきます。
UIVIewのトランジションアニメーションを使って現在表示されているViewにアニメーションを追加していきます。
optionsにUIVIewAnimationOptionTransitionFlipFromLeftを指定することで簡単にフ リップアニメーションを実装することができます。
animationsの中で、NavigationControllerに遷移先のViewControllerを追加しています。animatedにNOを指定することで、デフォルトのスライドアニメーションを消すことができます。
あとは、この完成したSegueをStoryboard上で先ほど作成したSegueに設定すれば終わりです。
Storyboard上でSegueを選択し、Attribute InspectorのSegue Classに「FlipSegue」を設定します。
では、実行してみましょう。
ボタンを押すと画面がクルッと回って次の画面が表示されるのが確認できると思います。
簡単ですね！
足早でしたが、CustomのSegueの作り方について説明していきました。
すごく簡単なので、ぜひ試してみてください。
次回は、遷移後に遷移先に戻る動きのカスタム方法(Custom Unwind Segue)について書きたいと思います。
