Full Screen Cover: その概要、フルスクリーンプレゼンテーションとUIKit

iOSでのFull Screen Coverとは？

Full Screen Cover はiOSにおけるモーダルプレゼンテーションのスタイルで、呈示されたコントローラがデバイスの画面全体を占めます。親コンテンツは完全に隠され、イマーシブな効果を生み出し、ユーザーを現在のタスクに集中させます。

iOS 13以前は、Full Screen CoverがiPhoneでの唯一のモーダルプレゼンテーションスタイルでした。present(_:animated:completion:)のすべての呼出しはデフォルトで.fullScreenを使用していました。iOS 13より、Appleはデフォルトスタイルを.automaticに変更し、iPhoneでは.pageSheetが選択されるようになりました。しかし、Full Screen Coverは侊然として利用可能で、完全な集中が重要なシナリオで使用されています。

Page Sheetとは異なり、Full Screen Coverは親コンテンツとのインタラクションを許同せず、モーダルウィンドウの下に親コンテンツを表示しません。ユーザーはスワイプダウンでFull Screen Coverを閉じることはできません—閉じるにはdismiss(animated:completion:)へのプログラム的な呼出しか、画面上の閉じるボタンが必要です。UXをデザインする際には、この行動を考慮することが重要です。

Full Screen Cover vs Page Sheet: スタイル比較

Page Sheet はiOS 13で導入された第2の主要なモーダルプレゼンテーションスタイルです。Page Sheetは上部にマージンを持つカードとして表示され、その下に親画面が見えます。ユーザーはスワイプダウンでPage Sheetを閉じることができます。対してFull Screen Coverは、親コンテンツを隠し、スワイプでの閉じる機能をサポートしません。

Full Screen CoverとPage Sheetの選択はコンテンツとコンテキストによります。推奨されます Full Screen Coverは完全な注意が必要なコンテンツに: フルスクリーンビデオ、写真プレビュー、書類スキャン。Page Sheetは親画面のコンテキストが重要なタスクに: 編集フォーム、オプション選択、詳細表示。

UIKitでの実装: UIModalPresentationStyle

UIKit はモーダルプレゼンテーションスタイルを設定するための定数UIModalPresentationStyle.fullScreenを提供します。presentを呼ぶ前にUIViewControllerでこのプロパティを設定すると、コントローラがフルスクリーンで表示されます。コントローラはキーボード表示時の動作も管理し、システムイベントを処理します。

設定とデリゲート

.fullScreenスタイルを設定した後、閉じるイベントを処理するためにpresentationController?.delegateを設定することをおすすめします。UIAdaptivePresentationControllerDelegateデリゲートは閉じる試行を拦戮し、データの失いを防ぐことができます。Page Sheetとは異なり、Full Screen Coverではデリゲートはプログラム的なdismiss呼出し時にのみ発火します。

ローテーションとキーボード処理

Full Screen Coverは画面のローテーションとキーボードの表示を正しく処理します。回転時、モーダルコントローラは自動的に新しい向きに適応します。UIKeyboardWillShowNotificationはキーボード表示時にコンテンツを上に移動し、テキストフィールドを見えるようにします。Page Sheetとは異なり、Full Screen Coverはキーボード表示時にサイズが変わりません。

let playerVC = VideoPlayerViewController()
playerVC.modalPresentationStyle = .fullScreen
playerVC.modalTransitionStyle = .crossDissolve
present(playerVC, animated: true) {
    playerVC.startPlayback()
}

// 閉じる
dismiss(animated: true) {
    print("プレイヤーが閉じられました")
}

SwiftUI: .fullScreenCover修饰子

SwiftUI はフルスクリーンモーダルウィンドウを宣言的に作成するための修饰子.fullScreenCoverを提供します。.sheet (Page Sheet)とは異なり、.fullScreenCoverは.fullScreenスタイルを作成し、同様の動作をもちます: コンテンツを完全におい、スワイプでの閉じる機能はありません。

Bindingとデータの使い方

修饰子はBoolまたはオプショナルの識別可能なアイテムへのBindingを受け入れます。Bindingがtrueに設定されると、SwiftUIはフルスクリーンウィンドウの表示をアニメーションします。データを渡すにはonDismissパラメータとコンテンツをもつクロージャを使用します。\.dismiss環境値はモーダルウィンドウを内部から閉じることができます。

Full Screen Cover vs Sheet

SwiftUIでの.fullScreenCoverと.sheetの選択はUIKitと同樣です: .fullScreenCoverはイマーシブコンテンツ用、.sheetはカード用。SwiftUIは自動的に正しい閉じる動作を選択します: .sheetはスワイプで閉じられ、.fullScreenCoverはプログラム的にのみ閉じられます。修饰子は同じView階層で組み合わせることができます。

struct CameraView: View {
    @State private var showCamera = false

    var body: some View {
        Button("カメラを開く") {
            showCamera = true
        }
        .fullScreenCover(isPresented: $showCamera) {
            CameraPreviewView()
                .ignoresSafeArea()
        }
    }
}

struct CameraPreviewView: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            VStack {
                Spacer()
                Button("撮影") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

カスタムアニメーションとトランジション

Full Screen Cover はUIKitでのUIModalTransitionStyle、SwiftUIでのカスタムトランジションを通じてカスタムアニメーションをサポートしています。標準スタイルには以下があります: .coverVertical (下から上)、.crossDissolve (そっと表示)、.flipHorizontal (翻転)、.partialCurl (ページをんぶる効果)。

UIKit: UIViewControllerAnimatedTransitioning

完全にカスタムなアニメーションには、UIViewControllerAnimatedTransitioningプロトコルを実装します。animateTransition(using:)メソッドにより、アニメーションの期間とトランジションを定義できます。アニメーションコントローラはUINavigationControllerDelegateまたはUIViewControllerTransitioningDelegateを通じて指定されます。

SwiftUI: Matched Geometry Effect

SwiftUIでは、.fullScreenCoverのカスタムトランジションはmatchedGeometryEffectを使って作成されます。この修饰子は、要素を親Viewからフルスクリーンウィンドウへ移動させるアニメーションを行います。例えば、写真のサムネイルをタップすると、それがゆっくりとフルスクリーンに拡大され、連続性のある効果が生みます。matchedGeometryEffectは、要素をソースと目的地の位置で結びつけるidとnamespaceで動作します。

struct PhotoViewer: View {
    @State private var selectedPhoto: String?
    @Namespace private var animation

    var body: some View {
        HStack {
            ForEach(["photo1", "photo2"], id: \.self) { photo in
                Image(photo)
                    .matchedGeometryEffect(id: photo, in: animation)
                    .onTapGesture { selectedPhoto = photo }
            }
        }
        .fullScreenCover(item: $selectedPhoto) { photo in
            Image(photo)
                .matchedGeometryEffect(id: photo, in: animation)
                .ignoresSafeArea()
        }
    }
}

Full Screen Coverを使うべきとき

Full Screen Cover は、コンテンツが親インターフェースにじゃまされずに画面全体を占める必要があるシナリオに推奨されます。Apple HIGは3つの主なカテゴリを示しています: メディアコンテンツ、コンテンツ作成ツール、一時的なシステムインターフェース。

メディアとエンターテインメント

ビデオプレイヤー、写真表示、PDFやコミックの読み込みは、Full Screen Coverの典型的な使い方です。iOSのAVPlayerViewControllerはランドスケープに切り替えることで自動的にフルスクリーンモードになります。Adobe Lightroomのような写真エディタは、写真ライブラリの上にフルスクリーンエディタを開きます。

コンテンツ作成ツール

カメラ、書類スキャナー、音声録音 — ユーザーの完全な注意が必要なタスク。UIImagePickerControllerはiOS 14以前はカメラにFull Screen Coverを使用していました。iOS 14より、システムのピッカーはPage Sheetを使用しますが、開発者はカスタムカメラに.fullScreenを強制できます。

避けるべきこと

Full Screen Coverを以下の用途で使用しないでください: 登録フォーム (Page Sheetが適しています)、親ページのコンテキストが重要なテキスト入力画面、モーダルウィンドウ内の順次ナビゲーション。Material Designでも、システムの戻るボタンをブロックすることを避けるよう推奨しています—iOSでは許容されますが、ユーザーがUI要素を通じて明確に閉じられるようにする必要があります。