Full Screen Cover: apa itu, presentasi layar penuh dan UIKit

Apa itu Full Screen Cover di iOS?

Full Screen Cover — adalah gaya presentasi modal di iOS di mana pengontrol yang disajikan menempati seluruh layar perangkat. Konten induk sepenuhnya disembunyikan, menciptakan efek imersif dan memfokuskan pengguna pada tugas saat ini.

Sebelum iOS 13, Full Screen Cover adalah satu-satunya gaya presentasi modal di iPhone. Semua panggilan present(_:animated:completion:) secara default menggunakan .fullScreen. Mulai iOS 13, Apple mengubah gaya default menjadi .automatic, yang untuk iPhone memilih .pageSheet. Namun, Full Screen Cover tetap tersedia dan digunakan untuk skenario di mana fokus penuh penting.

Berbeda dengan Page Sheet, Full Screen Cover tidak memungkinkan interaksi dengan konten induk dan tidak menampilkannya di bawah jendela modal. Pengguna tidak dapat menutup Full Screen Cover dengan menggesek ke bawah — untuk menutup diperlukan panggilan programatik dismiss(animated:completion:) atau tombol tutup di layar itu sendiri. Perilaku ini penting untuk dipertimbangkan saat mendesain UX.

Full Screen Cover vs Page Sheet: perbandingan gaya

Page Sheet — gaya utama kedua dari presentasi modal, muncul di iOS 13. Page Sheet ditampilkan sebagai kartu dengan jarak dari atas, di mana layar induk terlihat di bawahnya. Pengguna dapat menutup Page Sheet dengan menggesek ke bawah. Full Screen Cover, sebaliknya, menyembunyikan konten induk dan tidak mendukung penutupan dengan gesekan.

Pilihan antara Full Screen Cover dan Page Sheet tergantung pada konten dan konteks. Disarankan menggunakan Full Screen Cover untuk konten yang memerlukan perhatian penuh: video dalam mode layar penuh, pratinjau foto, pemindaian dokumen. Page Sheet — untuk tugas di mana konteks layar induk penting: formulir pengeditan, pemilihan opsi, tampilan detail.

Implementasi di UIKit: UIModalPresentationStyle

UIKit menyediakan konstanta UIModalPresentationStyle.fullScreen untuk mengonfigurasi gaya presentasi modal. Mengatur properti ini pada UIViewController sebelum panggilan present memastikan pengontrol ditampilkan di layar penuh. Pengontrol juga mengelola perilaku saat keyboard muncul dan pemrosesan peristiwa sistem.

Konfigurasi dan delegasi

Setelah mengatur gaya .fullScreen, disarankan untuk mengonfigurasi presentationController?.delegate untuk menangani peristiwa penutupan. Delegasi UIAdaptivePresentationControllerDelegate memungkinkan mencegat upaya penutupan dan mencegah kehilangan data. Berbeda dengan Page Sheet, untuk Full Screen Cover delegasi hanya aktif saat panggilan dismiss programatik.

Menangani rotasi dan keyboard

Full Screen Cover menangani rotasi layar dan kemunculan keyboard dengan benar. Saat rotasi, pengontrol modal secara otomatis menyesuaikan dengan orientasi baru. UIKeyboardWillShowNotification memungkinkan menggeser konten ke atas saat keyboard muncul, sehingga bidang teks tetap terlihat. Berbeda dengan Page Sheet, Full Screen Cover tidak mengubah ukurannya saat keyboard muncul.

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

// Tutup
dismiss(animated: true) {
    print("Pemutar ditutup")
}

SwiftUI: pengubah .fullScreenCover

SwiftUI menyediakan pengubah .fullScreenCover untuk pembuatan deklaratif jendela modal layar penuh. Berbeda dengan .sheet (Page Sheet), .fullScreenCover membuat gaya .fullScreen dengan perilaku analog: penutupan konten sepenuhnya dan tidak ada penutupan dengan gesekan.

Penggunaan dengan binding dan data

Pengubah menerima binding pada Bool atau objek yang dapat diidentifikasi opsional. Saat binding diatur ke true, SwiftUI menganimasikan kemunculan jendela layar penuh. Untuk transfer data, parameter onDismiss dan closure dengan konten digunakan. Nilai lingkungan \.dismiss memungkinkan menutup jendela modal dari dalam.

Full Screen Cover vs Sheet

Pilihan antara .fullScreenCover dan .sheet di SwiftUI analog dengan UIKit: .fullScreenCover untuk konten imersif, .sheet untuk kartu. SwiftUI secara otomatis memilih perilaku penutupan yang benar: .sheet dapat ditutup dengan gesekan, .fullScreenCover — hanya secara programatik. Pengubah dapat digabungkan dalam hierarki View yang sama.

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

    var body: some View {
        Button("Buka kamera") {
            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("Ambil gambar") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Animasi dan transisi kustom

Full Screen Cover mendukung animasi kustom melalui UIModalTransitionStyle di UIKit dan transisi kustom di SwiftUI. Gaya standar: .coverVertical (dari bawah ke atas), .crossDissolve (kemunculan bertahap), .flipHorizontal (membalik) dan .partialCurl (efek halaman).

UIKit: UIViewControllerAnimatedTransitioning

Untuk animasi yang sepenuhnya kustom, implementasikan protokol UIViewControllerAnimatedTransitioning. Ini memungkinkan Anda menentukan durasi animasi dan transisi itu sendiri melalui metode animateTransition(using:). Pengontrol animasi ditetapkan melalui delegasi UINavigationControllerDelegate atau UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

Di SwiftUI, transisi kustom untuk .fullScreenCover dibuat melalui matchedGeometryEffect. Pengubah ini menganimasikan perpindahan elemen dari View induk ke jendela layar penuh. Misalnya, saat mengklik miniatur foto, foto tersebut meluas secara mulus ke layar penuh, menciptakan efek kontinuitas. MatchedGeometryEffect bekerja dengan id dan namespace, menghubungkan elemen di posisi sumber dan target.

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()
        }
    }
}

Kapan menggunakan Full Screen Cover?

Full Screen Cover disarankan untuk skenario di mana konten harus menempati seluruh layar tanpa gangguan dari antarmuka induk. Apple HIG membedakan tiga kategori utama: konten media, alat pembuatan konten, dan antarmuka sistem sementara.

Media dan hiburan

Pemutar video, tampilan foto, membaca PDF dan komik — contoh tipikal penggunaan Full Screen Cover. AVPlayerViewController di iOS secara otomatis menggunakan mode layar penuh saat beralih ke lanskap. Editor foto seperti Adobe Lightroom membuka editor layar penuh di atas pustaka gambar.

Alat pembuatan konten

Kamera, pemindai dokumen, perekaman suara — tugas yang memerlukan perhatian penuh pengguna. UIImagePickerController hingga iOS 14 menggunakan Full Screen Cover untuk kamera. Mulai iOS 14, pemilih sistem menggunakan Page Sheet, tetapi pengembang dapat memaksa .fullScreen untuk kamera kustom.

Apa yang harus dihindari

Jangan gunakan Full Screen Cover untuk: formulir pendaftaran (Page Sheet lebih disukai), layar dengan input teks di mana konteks halaman induk penting, dan navigasi berurutan di dalam jendela modal. Material Design juga merekomendasikan untuk menghindari pemblokiran tombol kembali sistem — di iOS ini diizinkan, tetapi pengguna harus memiliki cara penutupan yang jelas melalui elemen UI.