【Swift】Segueの設定 その2。モーダル表示の重ね方や登場シーンを設定する。(Swift 2.1、XCode 7.2)

2020年6月16日

Segueの設定

前回の記事でSegueのアトリビュートインスペクタの設定について説明した。⇒「記事

その記事の続きで、本記事ではKindを「Present Modally」に設定したときに現れるPresentationとTransitionについて説明する。ちなみに、Presentationは「体裁」、Transitionは「変化、移行」という意味である。

Segueのアトリビュートインスペクタ

 

Presentation

Presentationは遷移先のビューをどのような体裁で重ねるかの設定である。2016年5月現在では、この設定はiPadとiPhone6 Plusの端末でのみ有効になり、その他の端末ではすべて「Full Screen」の設定として扱われる。

下表は選択肢の一覧

設定名 説明
1 Full Screen 遷移先ビューが全画面表示される。
2 Current Context 遷移元ビューと同じコンテキストで遷移先ビューが重なる。
3 Page Sheet 遷移元が縦横どちらの方向でも遷移先ビューが縦画面で重なる。
4 Form Sheet 画面サイズより小さな遷移先ビューが重なる。
5 Over Full Screen 遷移先ビューが全画面表示で重なり、透過できる。
6 Over Current Content 遷移元ビューと同じコンテキストで遷移先ビューが重なり、透過できる。

 

(1)Full Screen

遷移先ビューが全画面表示される。

 

(2)Current Context

遷移元ビューと同じコンテキストで遷移先ビューが重なる。

「遷移元ビューと同じなら、Full Screenの場合と同じで遷移先画面も全画面表示になるだけでは?」と思ってしまうので1つ例を挙げておく。

下図のようにContainer Viewを利用して画面に2つのビューコントローラーを並べたとする。左側のビューコントローラーの「次の画面へ」ボタンを押すと、セグエによって左側のビューコントローラーが遷移先のものに置き換わる。

このとき、Presentationが「Full Screen」の場合と、「Current Context」の場合の違いを確かめてみる。

Container VIewを並べて配置

 

「Full Screen」に設定した場合は以下の動画のようになる。

 

「Current Context」に設定した場合は以下の動画のようになる。要するに、「Full Screen」を設定すると、画面の一部分を遷移させても遷移先のビューが全画面表示になってしまう。なので、画面の一部分を遷移させたい場合は「Current Context」を利用しよう。

 

1つ注意点があり、iOSはビューを表示するときにビューコントローラーの階層を辿ってdefinePresentationContextプロパティがtrueに設定されているビューコントローラーのコンテキストを利用するようだ。⇒「View Controller Programming Guide for iOS

なので、遷移元のビューコントローラーのdefinePresentationContextプロパティをソースコードでtrueに変更するか、アトリビュートインスペクタの設定項目「Defines Context」にチェックを入れるのを忘れないこと。

ViewControllerの設定のDeifne Contextにチェックを入れる

(3)Page Sheet

遷移元ビューが縦横どちらの方向でも遷移先ビューが縦画面で重なる。

以下の動画は、画面が横向きの状態で画面遷移させた動画

 

以下の動画は、画面が縦向の状態で画面遷移させた動画

 

(4)Form Sheet

画面サイズよりある程度小さい遷移先ビューを重ねる。ポップアップ表示に似ているが、画面の外をタップしても閉じないところが違う。

 

(5)Over Full Screen

遷移先ビューが全画面表示されるのは「Full Screen」と同じ。遷移先ビューを透過できるのが異なる。

以下はBlur Effectで透過させた場合のプレイ動画。うっすらと遷移元ビューが透けて見えるのがわかるだろうか。⇒「Blur Effectとは

 

(6)Over Cerrent Context

遷移元ビューと同じコンテキストで遷移先ビューが重なるのは「Cerrent Context」と同じ。遷移先ビューを透過できるのが異なる。

 

Transition

Transitionは、遷移先のビューの登場シーンの設定である。

 

(1)Cover Vertical

遷移先ビューが下から上に上がってくるように登場する。

 

(2)Flip Horizontal

水平方向に回転しながら遷移先ビューが登場する。

 

(3)Cross Dissolve

遷移先ビューがフェードインしながら登場する。

 

(4)Partial Curl

ページをめくるように遷移先ビューが登場する。