UX/UI
テクノロジー
ノウハウ・TIPS

iOSにおけるモーダル表示まとめ

モーダルスタイルの指定方法

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 に選択したときに表示されます。

f:id:takuma_shibuya:20200302102511p:plain

モーダルスタイル概要

ModalPresentationStyle 説明
.fullScreen フルスクリーンで表示
.pageSheet 幅712、高さフルで画面中央に表示
.formSheet 幅540、高さ620で画面中央に表示
.currentContext 遷移元のビューと同じコンテキストで遷移先ビューを重ねて表示
.overFullScreen 遷移先ビューがフルスクリーンで表示される。(.fullScreen と同じ)
遷移先ビューを透過可
.overCurrentContext 遷移元のビューと同じコンテキストで遷移先ビューを重ねて表示(.currentContext と同じ)
遷移先ビューを透過可
fullScreen
iPhone11 iPad Pro
f:id:takuma_shibuya:20200302103307g:plain f:id:takuma_shibuya:20200302102555g:plain
pageSheet
iPhone11 iPad Pro
f:id:takuma_shibuya:20200302103324g:plain f:id:takuma_shibuya:20200302102628g:plain
formSheet
iPhone11 iPad Pro
f:id:takuma_shibuya:20200302103345g:plain f:id:takuma_shibuya:20200302102649g:plain
currentContext

遷移元のUIViewController の definesPresentationContext プロパティを true にする必要があります。

Swift

definesPresentationContext = true

Storyboard
f:id:takuma_shibuya:20200302104522p:plain

iPhone11 iPad Pro
f:id:takuma_shibuya:20200302103406g:plain f:id:takuma_shibuya:20200302104016g:plain
overFullScreen

遷移先ビューの背景を Opacity 50% に設定しています。

iPhone11 iPad Pro
f:id:takuma_shibuya:20200302103423g:plain f:id:takuma_shibuya:20200302102750g:plain
overCurrentContext

遷移先ビューの背景を Opacity 50% に設定しています。

iPhone11 iPad Pro
f:id:takuma_shibuya:20200302103440g:plain f:id:takuma_shibuya:20200302102811g:plain

前の記事へ

次の記事へ

一覧へ戻る

「UX / UI」カテゴリの最新記事

PAGE TOP