iOSプログラミング：iOS11のStoryboardの「Present Modally」Segueを深掘り

アプリ開発

今回は、iOS11のStoryboardの画面遷移で用意されているSegueの種類の違いついて掘り下げたいと思います。
iOSプログラミング：iOS11のStoryboardのSegueの使い方（その１）では、古いSegueがDeprecated（非推奨）になっており、今のiOS11でのほぼノンコーディングでの簡単な書き方を紹介しました。
iOSプログラミング：iOS11のStoryboardのSegueの使い方（その２）では、Navigation Controllerを追加すると自動的にNavigation Barと戻るボタンが作成されて、画面遷移をノンコーディングで作れるやり方を紹介しました。この時は、

  • Show (e.g. Push)
  • Show Detail (e.g. Replace)
  • Present Modally
  • Present As Popover

の４種類のSegueのうち「Show (e.g. Push)」を使いました。じゃあ、他は何が違うのよというところを調べたのでご紹介します。
サンプルとして前回のアプリをSegueの種類が試せるように以下のように改造しました。

Storyboardでみると千手観音のようになります。

このStoryboardをみると一番上の「Show (e.g. Push)」以外のSegueではUINavigationControllerを使っていてもNavigation Barが自動的に追加されていないことがわかります。用途として「Show (e.g. Push)」は元の画面の延長となる画面に遷移する場合、他はそうではない場合を想定した設計思想になっているように思えます。
　
「Show (e.g. Push)」以外ではSafeAreaに注意
NavigationBarが自動的に追加されないので、自由にレイアウトできますが、かわりにSafeAreaを気にする必要があります。気にしないとiPhone Xの切り欠きやその他のiPhoneのステータスバーに被ります。

SafeAreaについては、iOS8対応の古いアプリをiPhone Xに対応する手順で説明していますので、古くないアプリの場合もそちらを参照してください。
　
Show Detail (e.g. Replace)
基本的にはNavigation Barが自動的に追加されない以外は、「Show (e.g. Push)」のSegueと違いはないようです。しかしNavigation Controllerなしで「Show (e.g. Push)」のSegueを使った時と同様に下から上にポップアップして画面が遷移します。右から左に遷移しない理由はわかりませんが、iOS11ではそのようになりました。またその挙動を変えるようなプロパティも見当たりません。ひょっとしてiPadでは違うのかなと思い検証したのですが変化なかったです。

　
Present Modally
デフォルトだと「Show Detail (e.g. Replace)」のSegueと見分けがつかない画面遷移をします。しかし、「Present Modally」のSegueにはTransitionという遷移の時の挙動（アニメーション）を変えるプロパティが用意されています。

  • Default
  • Cover Vertical
  • Flip Horizontal
  • Cross Dissolve
  • Partial Curl

の５つで「Default」は、iOS11では「Cover Vertical」と同じ挙動でした。「右から左に滑り込む」のがないのが不思議です。ユーザーインタフェースの設計思想でしょうか。
　
Cover Vertical
下から上にポップアップします。「Show Detail (e.g. Replace)」のSegueと見た目の挙動は同じです。
　
Flip Horizontal
画面がひっくり返って、裏側の次の画面が表示されます。

　
Cross Dissolve
画面がフェードアウトして、次の画面がフェードインします。
フェードアウト・フェードインのスピードはかなり速くて、スクリーンショット取れませんでした。
　
Partial Curl
画面がめくり上がって、次の画面が表示されます。

初期のiPhoneのグーグルマップでストリートビューに切り替えるので見かけましたし、見た目が面白いので自分も使いました。当時はめくり上がった後に次の画面の上にめくれが見えていて、そこをタップすると元の画面に戻ったのですが、フラットデザインになったiOSからこの次の画面で見えている「めくれ」がなくなりました。依然として「めくれ」が以前にあったところをタップすると戻れたのですが、わかりづらい。それで私は順次使うのをやめています。
　
iPhoneシミュレータのバグ？
この検証をしているときに遭遇したのですが、挙動を観察するためにシミュレータの「Debug」の「Slow Animations」にした時に、「Flip Horizontal」だと、遷移した後にボタンをタップしてもアプリが反応しなくなります。その状態で「Slow Animations」を解除すると反応する時と、依然としてしない時があります。シミュレータのバグだと思います。
　
今回紹介した「Present Modally」のSegueはいろいろと挙動を変えられるので、ユーザーインタフェースをデザインする時に便利です。
Present As Popoverは又の機会で、今回はここまで。