dentakurouの日記 RSSフィード

2018-01-13 iOSプログラミング:iOS11のStoryboardのSegueの使い方(その3)

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

今回は、iOS11のStoryboardの画面遷移で用意されているSegueの種類の違いついて掘り下げたいと思います。

iOSプログラミング:iOS11のStoryboardのSegueの使い方(その1)では、古いSegueがDeprecated(非推奨)になっており、今のiOS11でのほぼノンコーディングでの簡単な書き方を紹介しました。

iOSプログラミング:iOS11のStoryboardのSegueの使い方(その2)では、Navigation Controllerを追加すると自動的にNavigation Barと戻るボタンが作成されて、画面遷移をノンコーディングで作れるやり方を紹介しました。この時は、

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

の4種類のSegueのうち「Show (e.g. Push)」を使いました。じゃあ、他は何が違うのよというところを調べたのでご紹介します。

サンプルとして前回のアプリをSegueの種類が試せるように以下のように改造しました。

f:id:dentakurou:20180113123233p:image:w360

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

f:id:dentakurou:20180113123230p:image:w640

このStoryboardをみると一番上の「Show (e.g. Push)」以外のSegueではUINavigationControllerを使っていてもNavigation Barが自動的に追加されていないことがわかります。用途として「Show (e.g. Push)」は元の画面の延長となる画面に遷移する場合、他はそうではない場合を想定した設計思想になっているように思えます。

 

「Show (e.g. Push)」以外ではSafeAreaに注意

NavigationBarが自動的に追加されないので、自由にレイアウトできますが、かわりにSafeAreaを気にする必要があります。気にしないとiPhone Xの切り欠きやその他のiPhoneのステータスバーに被ります。

f:id:dentakurou:20180113130225p:image:w360

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では違うのかなと思い検証したのですが変化なかったです。

f:id:dentakurou:20180113123227p:image:w360

 

Present Modally

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

f:id:dentakurou:20180113123223p:image:w360

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

の5つで「Default」は、iOS11では「Cover Vertical」と同じ挙動でした。「右から左に滑り込む」のがないのが不思議です。ユーザーインタフェース設計思想でしょうか。

 

Cover Vertical

下から上にポップアップします。「Show Detail (e.g. Replace)」のSegueと見た目の挙動は同じです。

 

Flip Horizontal

画面がひっくり返って、裏側の次の画面が表示されます。

f:id:dentakurou:20180113123220p:image:w360

 

Cross Dissolve

画面がフェードアウトして、次の画面がフェードインします。

フェードアウト・フェードインのスピードはかなり速くて、スクリーンショット取れませんでした。

 

Partial Curl

画面がめくり上がって、次の画面が表示されます。

f:id:dentakurou:20180113123216p:image:w360

初期のiPhoneグーグルマップストリートビューに切り替えるので見かけましたし、見た目が面白いので自分も使いました。当時はめくり上がった後に次の画面の上にめくれが見えていて、そこをタップすると元の画面に戻ったのですが、フラットデザインになったiOSからこの次の画面で見えている「めくれ」がなくなりました。依然として「めくれ」が以前にあったところをタップすると戻れたのですが、わかりづらい。それで私は順次使うのをやめています。

 

iPhoneシミュレータバグ

この検証をしているときに遭遇したのですが、挙動を観察するためにシミュレータの「Debug」の「Slow Animations」にした時に、「Flip Horizontal」だと、遷移した後にボタンをタップしてもアプリが反応しなくなります。その状態で「Slow Animations」を解除すると反応する時と、依然としてしない時があります。シミュレータバグだと思います。

 

今回紹介した「Present Modally」のSegueはいろいろと挙動を変えられるので、ユーザーインタフェースをデザインする時に便利です。

Present As Popoverは又の機会で、今回はここまで。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証