Full Screen Cover: nedir, tam ekran sunum ve UIKit

iOS'ta Full Screen Cover Nedir?

Full Screen Cover, iOS'ta sunulan denetleyicinin tüm cihaz ekranını kapladığı bir modal sunum stilidir. Üst içerik tamamen gizlenir, sürükleyici bir etki yaratır ve kullanıcıyı mevcut göreve odaklar.

iOS 13'ten önce, Full Screen Cover iPhone'da tek modal sunum stiliydi. Tüm present(_:animated:completion:) çağrıları varsayılan olarak .fullScreen kullanırdı. iOS 13'ten itibaren Apple, varsayılan stili .automatic olarak değiştirdi ve bu da iPhone için .pageSheet'i seçiyor. Ancak Full Screen Cover hala kullanılabilir ve tam odaklanmanın önemli olduğu senaryolarda kullanılır.

Page Sheet'in aksine, Full Screen Cover üst içerikle etkileşime izin vermez ve onu modal pencerenin altında göstermez. Kullanıcı Full Screen Cover'ı aşağı kaydırarak kapatamaz — kapatmak için dismiss(animated:completion:) çağrısı veya ekranda bir kapatma düğmesi gerekir. UX tasarlarken bu davranışı dikkate almak önemlidir.

Full Screen Cover vs Page Sheet: stil karşılaştırması

Page Sheet, iOS 13'te tanıtılan ikinci ana modal sunum stilidir. Page Sheet, üstünde bir kenar boşluğu olan bir kart olarak görüntülenir ve altında üst ekran görünür. Kullanıcı aşağı kaydırarak Page Sheet'i kapatabilir. Full Screen Cover ise üst içeriği gizler ve kaydırarak kapatmayı desteklemez.

Full Screen Cover ve Page Sheet arasındaki seçim, içeriğe ve bağlama bağlıdır. Önerilir Full Screen Cover'ı tam dikkat gerektiren içerik için kullanmak: tam ekran video, fotoğraf ön izleme, belge tarama. Page Sheet, üst ekran bağlamının önemli olduğu görevler içindir: düzenleme formları, seçenek seçimi, detay görünümü.

UIKit'te Uygulama: UIModalPresentationStyle

UIKit, modal sunum stilini yapılandırmak için UIModalPresentationStyle.fullScreen sabitini sağlar. present çağırmadan önce UIViewController'da bu özelliği ayarlamak, denetleyicinin tam ekranda görüntülenmesini sağlar. Denetleyici ayrıca klavye göründüğünde davranışı yönetir ve sistem olaylarını işler.

Yapılandırma ve delegasyon

.fullScreen stilini ayarladıktan sonra, kapatma olaylarını işlemek için presentationController?.delegate yapılandırılması önerilir. UIAdaptivePresentationControllerDelegate delegesi, kapatma girişimlerini engellemeye ve veri kaybını önlemeye olanak tanır. Page Sheet'in aksine, Full Screen Cover için delege yalnızca programlama yoluyla yapılan dismiss çağrılarında tetiklenir.

Dönüş ve klavye yönetimi

Full Screen Cover, ekran dönüşünü ve klavye görünmesini doğru şekilde işler. Döndüğünde, modal denetleyici otomatik olarak yeni yönlendirmeye uyum sağlar. UIKeyboardWillShowNotification, klavye göründüğünde içeriği yukarı kaydırarak metin alanlarının görünür kalmasını sağlar. Page Sheet'in aksine, Full Screen Cover klavye göründüğünde boyutunu değiştirmez.

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

// Kapat
dismiss(animated: true) {
    print("Oynatıcı kapatıldı")
}

SwiftUI: .fullScreenCover değiştiricisi

SwiftUI, tam ekran modal pencerelerin bildirimsel oluşturulması için .fullScreenCover değiştiricisini sağlar. .sheet'in (Page Sheet) aksine, .fullScreenCover benzer davranışla .fullScreen stilini oluşturur: tam içerik kaplaması ve kaydırarak kapatma yok.

Binding ve veri ile kullanım

Değiştirici, Bool veya isteğe bağlı tanımlanabilir bir öğeye binding kabul eder. Binding true olarak ayarlandığında, SwiftUI tam ekran pencerenin görünümünü canlandırır. Veri iletmek için onDismiss parametresi ve içerikli bir closure kullanılır. \.dismiss ortam değeri, modal pencereyi içeriden kapatmaya olanak tanır.

Full Screen Cover vs Sheet

SwiftUI'de .fullScreenCover ve .sheet arasındaki seçim UIKit'e benzer: .fullScreenCover sürükleyici içerik için, .sheet kartlar için. SwiftUI otomatik olarak doğru kapatma davranışını seçer: .sheet kaydırarak kapatılabilir, .fullScreenCover yalnızca programlama yoluyla. Değiştiriciler tek bir View hiyerarşisinde birleştirilebilir.

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

    var body: some View {
        Button("Kamerayı aç") {
            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("Yakala") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Özel animasyonlar ve geçişler

Full Screen Cover, UIKit'te UIModalTransitionStyle aracılığıyla ve SwiftUI'de özel geçişler aracılığıyla özel animasyonları destekler. Standart stiller şunları içerir: .coverVertical (aşağıdan yukarıya), .crossDissolve (yavaşça görünme), .flipHorizontal (çevirme) ve .partialCurl (sayfa efekti).

UIKit: UIViewControllerAnimatedTransitioning

Tamamen özel animasyon için UIViewControllerAnimatedTransitioning protokolünü uygulayın. animateTransition(using:) yöntemi aracılığıyla animasyon süresini ve geçişin kendisini tanımlamaya olanak tanır. Animasyon denetleyicisi, UINavigationControllerDelegate veya UIViewControllerTransitioningDelegate aracılığıyla atanır.

SwiftUI: Matched Geometry Effect

SwiftUI'de, .fullScreenCover için özel geçişler matchedGeometryEffect kullanılarak oluşturulur. Bu değiştirici, bir öğeyi üst View'den tam ekran pencereye taşımanın animasyonunu yapar. Örneğin, bir fotoğraf küçük resmine dokunulduğunda, yumuşak bir şekilde tam ekrana genişleyerek bir süreklilik etkisi yaratır. MatchedGeometryEffect, öğeyi kaynak ve hedef konumlarında birbirine bağlayan id ve namespace ile çalışır.

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 ne zaman kullanılmalı?

Full Screen Cover, içeriğin üst arayüzden dikkat dağıtmadan tüm ekranı kaplaması gereken senaryolar için önerilir. Apple HIG üç ana kategori belirler: medya içeriği, içerik oluşturma araçları ve geçici sistem arayüzleri.

Medya ve eğlence

Video oynatıcılar, fotoğraf görüntüleme, PDF ve çizgi roman okuma, Full Screen Cover'ın tipik kullanım örnekleridir. iOS'ta AVPlayerViewController, yatay moda geçerken otomatik olarak tam ekran modunu kullanır. Adobe Lightroom gibi fotoğraf düzenleyiciler, fotoğraf kütüphanesinin üstünde tam ekran bir düzenleyici açar.

İçerik oluşturma araçları

Kamera, belge tarayıcı, ses kaydı — kullanıcının tam dikkatini gerektiren görevler. UIImagePickerController, iOS 14'ten önce kamera için Full Screen Cover kullanırdı. iOS 14'ten itibaren sistem seçici Page Sheet kullanır, ancak geliştirici özel bir kamera için .fullScreen'i zorlayabilir.

Nelerden kaçınılmalı

Full Screen Cover'ı şunlar için kullanmayın: kayıt formları (Page Sheet tercih edilir), üst sayfa bağlamının önemli olduğu metin girişi ekranları ve modal pencere içinde sıralı gezinme. Material Design ayrıca sistem geri düğmesini engellemekten kaçınılmasını önerir — bu iOS'ta kabul edilebilir, ancak kullanıcının bir UI öğesi aracılığıyla kapatmak için net bir yolu olmalıdır.