Full Screen Cover: co to jest, prezentacja pełnoekranowa i UIKit

Co to jest Full Screen Cover w iOS?

Full Screen Cover — to styl prezentacji modalnej w iOS, w którym prezentowany kontroler zajmuje cały ekran urządzenia. Nadrzędna zawartość jest całkowicie ukryta, co tworzy efekt immersji i skupia użytkownika na bieżącym zadaniu.

Przed iOS 13 Full Screen Cover był jedynym stylem prezentacji modalnej na iPhone. Wszystkie wywołania present(_:animated:completion:) domyślnie używały .fullScreen. Od iOS 13 Apple zmieniło domyślny styl na .automatic, który na iPhone wybiera .pageSheet. Jednak Full Screen Cover pozostaje dostępny i jest używany w scenariuszach wymagających pełnego skupienia.

W przeciwieństwie do Page Sheet, Full Screen Cover nie pozwala na interakcję z nadrzędną zawartością i nie pokazuje jej pod oknem modalnym. Użytkownik nie może zamknąć Full Screen Cover przesunięciem w dół — do zamknięcia wymagane jest programowe wywołanie dismiss(animated:completion:) lub przycisk zamykania na samym ekranie. To zachowanie jest ważne przy projektowaniu UX.

Full Screen Cover vs Page Sheet: porównanie stylów

Page Sheet — drugi główny styl prezentacji modalnej, który pojawił się w iOS 13. Page Sheet wyświetla się jako karta z odstępem u góry, pod którą widoczny jest nadrzędny ekran. Użytkownik może zamknąć Page Sheet przesunięciem w dół. Full Screen Cover przeciwnie, ukrywa nadrzędną zawartość i nie obsługuje zamykania przesunięciem.

Wybór między Full Screen Cover a Page Sheet zależy od treści i kontekstu. Zaleca się używanie Full Screen Cover dla treści wymagających pełnej uwagi: wideo w trybie pełnoekranowym, podgląd zdjęć, skanowanie dokumentów. Page Sheet — do zadań, gdzie kontekst nadrzędnego ekranu jest ważny: formularze edycji, wybór opcji, przeglądanie szczegółów.

Implementacja na UIKit: UIModalPresentationStyle

UIKit zapewnia stałą UIModalPresentationStyle.fullScreen do konfiguracji stylu prezentacji modalnej. Ustawienie tej właściwości na UIViewController przed wywołaniem present gwarantuje, że kontroler wyświetli się na pełnym ekranie. Kontroler zarządza również zachowaniem przy pojawieniu się klawiatury i obsługą zdarzeń systemowych.

Konfiguracja i delegat

Po ustawieniu stylu .fullScreen zaleca się skonfigurowanie presentationController?.delegate do obsługi zdarzeń zamknięcia. Delegat UIAdaptivePresentationControllerDelegate pozwala przechwycić próbę zamknięcia i zapobiec utracie danych. W przeciwieństwie do Page Sheet, dla Full Screen Cover delegat działa tylko przy programowym wywołaniu dismiss.

Obsługa obrotu i klawiatury

Full Screen Cover poprawnie obsługuje obrót ekranu i pojawienie się klawiatury. Przy obrocie kontroler modalny automatycznie dostosowuje się do nowej orientacji. UIKeyboardWillShowNotification pozwala przesunąć zawartość w górę przy pojawieniu się klawiatury, aby pola tekstowe pozostały widoczne. W przeciwieństwie do Page Sheet, Full Screen Cover nie zmienia swoich rozmiarów przy pojawieniu się klawiatury.

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

// Zamknij
dismiss(animated: true) {
    print("Odtwarzacz zamknięty")
}

SwiftUI: modyfikator .fullScreenCover

SwiftUI zapewnia modyfikator .fullScreenCover do deklaratywnego tworzenia pełnoekranowych okien modalnych. W przeciwieństwie do .sheet (Page Sheet), .fullScreenCover tworzy styl .fullScreen z analogicznym zachowaniem: całkowite zakrycie zawartości i brak zamykania przesunięciem.

Użycie z binding i danymi

Modyfikator przyjmuje binding na Bool lub opcjonalny identyfikowalny obiekt. Przy ustawieniu binding na true SwiftUI animuje pojawienie się pełnoekranowego okna. Do przekazywania danych używany jest parametr onDismiss i domknięcie z zawartością. Wartość środowiska \.dismiss pozwala zamknąć okno modalne od wewnątrz.

Full Screen Cover vs Sheet

Wybór między .fullScreenCover a .sheet w SwiftUI jest analogiczny do UIKit: .fullScreenCover dla immersyjnych treści, .sheet dla kart. SwiftUI automatycznie wybiera prawidłowe zachowanie zamykania: .sheet można zamknąć przesunięciem, .fullScreenCover — tylko programowo. Modyfikatory można łączyć w jednej hierarchii View.

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

    var body: some View {
        Button("Otwórz kamerę") {
            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("Zrób zdjęcie") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Niestandardowe animacje i przejścia

Full Screen Cover obsługuje niestandardowe animacje przez UIModalTransitionStyle w UIKit i niestandardowe przejścia w SwiftUI. Standardowe style: .coverVertical (z dołu do góry), .crossDissolve (płynne pojawienie się), .flipHorizontal (obrót) i .partialCurl (efekt strony).

UIKit: UIViewControllerAnimatedTransitioning

Dla w pełni niestandardowej animacji zaimplementuj protokół UIViewControllerAnimatedTransitioning. Pozwala on określić czas trwania animacji i samo przejście przez metodę animateTransition(using:). Kontroler animacji jest przypisywany przez delegata UINavigationControllerDelegate lub UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

W SwiftUI niestandardowe przejścia dla .fullScreenCover tworzone są przez matchedGeometryEffect. Ten modyfikator animuje przeniesienie elementu z nadrzędnego View do pełnoekranowego okna. Na przykład, po kliknięciu miniatury zdjęcia płynnie rozwija się ono na cały ekran, tworząc efekt ciągłości. MatchedGeometryEffect działa z id i namespace, łączącymi element w pozycji źródłowej i docelowej.

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

Kiedy używać Full Screen Cover?

Full Screen Cover jest zalecany w scenariuszach, gdzie treść powinna zajmować cały ekran bez rozpraszania uwagi na nadrzędny interfejs. Apple HIG wyróżnia trzy główne kategorie: treści medialne, narzędzia do tworzenia treści i tymczasowe interfejsy systemowe.

Media i rozrywka

Odtwarzacze wideo, przeglądanie zdjęć, czytanie PDF i komiksów — typowe przykłady użycia Full Screen Cover. AVPlayerViewController w iOS automatycznie używa trybu pełnoekranowego przy przejściu w landscape. Edytory zdjęć takie jak Adobe Lightroom otwierają pełnoekranowy edytor nad biblioteką zdjęć.

Narzędzia do tworzenia treści

Aparat, skaner dokumentów, nagrywanie głosu — zadania wymagające pełnej uwagi użytkownika. UIImagePickerController do iOS 14 używał Full Screen Cover dla aparatu. Od iOS 14 systemowy picker używa Page Sheet, ale programista może wymusić .fullScreen dla niestandardowego aparatu.

Czego unikać

Nie używaj Full Screen Cover do: formularzy rejestracji (preferowany Page Sheet), ekranów z wprowadzaniem tekstu, gdzie ważny jest kontekst nadrzędnej strony, oraz nawigacji sekwencyjnej wewnątrz okna modalnego. Material Design również zaleca unikanie blokowania systemowego przycisku wstecz — w iOS jest to dopuszczalne, ale użytkownik powinien mieć wyraźny sposób zamknięcia przez element interfejsu.