UX/UI
テクノロジー
ノウハウ・TIPS
2020年3月2日
iOSにおけるモーダル表示まとめ
takuma_shibuya
iOS
UI
モーダルスタイルの指定方法
Swift
let vc = ChildViewController()
vc.modalPresentationStyle = .fullScreen
present(vc, animated: true)
Swift と Segue
override func prepare(for segue: UIStoryboardSegue, sender _: Any?) {
if segue.identifier == "toChildViewController",
let vc = segue.destination as? ChildViewController {
vc.modalPresentationStyle = .fullScreen
}
}
Storyboard と Segue
Storyboard で Segue を選択し、Presentation を選択することで遷移先ビューを指定したスタイルで表示できます。
Presentation は、Kind を Present Modally に選択したときに表示されます。
モーダルスタイル概要
| ModalPresentationStyle | 説明 |
| .fullScreen | フルスクリーンで表示 |
| .pageSheet | 幅712、高さフルで画面中央に表示 |
| .formSheet | 幅540、高さ620で画面中央に表示 |
| .currentContext | 遷移元のビューと同じコンテキストで遷移先ビューを重ねて表示 |
| .overFullScreen | 遷移先ビューがフルスクリーンで表示される。（.fullScreen と同じ） 遷移先ビューを透過可 |
| .overCurrentContext | 遷移元のビューと同じコンテキストで遷移先ビューを重ねて表示（.currentContext と同じ） 遷移先ビューを透過可 |
fullScreen
| iPhone11 | iPad Pro |
 |  |
pageSheet
| iPhone11 | iPad Pro |
 |  |
formSheet
| iPhone11 | iPad Pro |
 |  |
currentContext
遷移元のUIViewController の definesPresentationContext プロパティを true にする必要があります。
Swift
definesPresentationContext = true
Storyboard
| iPhone11 | iPad Pro |
 |  |
overFullScreen
遷移先ビューの背景を Opacity 50% に設定しています。
| iPhone11 | iPad Pro |
 |  |
overCurrentContext
遷 移先ビューの背景を Opacity 50% に設定しています。
| iPhone11 | iPad Pro |
 |  |
