Full Screen Cover: mi ez, teljes képernyős prezentáció és UIKit

Mi az a Full Screen Cover iOS-ben?

Full Screen Cover — a modális prezentáció egy stílusa iOS-ben, amelyben a bemutatott vezérlő az eszköz teljes képernyőjét elfoglalja. A szülő tartalom teljesen elrejtésre kerül, ami magával ragadó hatást kelt és a felhasználót az aktuális feladatra összpontosítja.

iOS 13 előtt a Full Screen Cover volt az egyetlen modális prezentációs stílus iPhone-on. Az összes present(_:animated:completion:) hívás alapértelmezetten .fullScreen-t használt. iOS 13-tól kezdve az Apple megváltoztatta az alapértelmezett stílust .automatic-ra, ami iPhone esetén .pageSheet-et választ. A Full Screen Cover azonban továbbra is elérhető marad, és olyan forgatókönyvekhez használatos, ahol a teljes összpontosítás fontos.

Ellentétben a Page Sheettel, a Full Screen Cover nem teszi lehetővé a szülő tartalommal való interakciót, és nem mutatja azt a modális ablak alatt. A felhasználó nem zárhatja be a Full Screen Covert lefelé húzással — a bezáráshoz programozott dismiss(animated:completion:) hívás vagy egy bezáró gomb szükséges magán a képernyőn. Ezt a viselkedést fontos figyelembe venni az UX tervezésekor.

Full Screen Cover vs Page Sheet: stílusok összehasonlítása

Page Sheet — a második fő modális prezentációs stílus, amely iOS 13-ban jelent meg. A Page Sheet egy kártyaként jelenik meg felül hézaggal, amely alatt a szülő képernyő látható. A felhasználó lefelé húzással bezárhatja a Page Sheetet. Ezzel szemben a Full Screen Cover elrejti a szülő tartalmat, és nem támogatja a húzással történő bezárást.

A választás a Full Screen Cover és a Page Sheet között a tartalomtól és kontextustól függ. Ajánlott a Full Screen Covert használni olyan tartalmakhoz, amelyek teljes figyelmet igényelnek: videó teljes képernyős módban, fotó előnézet, dokumentumok szkennelése. Page Sheet — olyan feladatokhoz, ahol a szülő képernyő kontextusa fontos: szerkesztő űrlapok, opciók kiválasztása, részletek megtekintése.

Implementáció UIKitben: UIModalPresentationStyle

UIKit biztosítja a UIModalPresentationStyle.fullScreen konstanst a modális prezentációs stílus konfigurálásához. Ennek a tulajdonságnak a UIViewController-en történő beállítása a present hívás előtt garantálja, hogy a vezérlő teljes képernyőn jelenik meg. A vezérlő kezeli a billentyűzet megjelenésekor és a rendszeresemények feldolgozásakor mutatott viselkedést is.

Konfiguráció és delegált

A .fullScreen stílus beállítása után ajánlott a presentationController?.delegate konfigurálása a bezárási események kezeléséhez. A UIAdaptivePresentationControllerDelegate delegált lehetővé teszi a bezárási kísérlet elfogását és az adatvesztés megelőzését. Ellentétben a Page Sheettel, a Full Screen Cover esetében a delegált csak programozott dismiss híváskor aktiválódik.

Forgatás és billentyűzet kezelése

A Full Screen Cover helyesen kezeli a képernyő forgatását és a billentyűzet megjelenését. Forgatáskor a modális vezérlő automatikusan alkalmazkodik az új tájoláshoz. A UIKeyboardWillShowNotification lehetővé teszi a tartalom felfelé tolását a billentyűzet megjelenésekor, hogy a szövegmezők láthatóak maradjanak. Ellentétben a Page Sheettel, a Full Screen Cover nem változtatja meg a méretét a billentyűzet megjelenésekor.

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

// Elutasítás
dismiss(animated: true) {
    print("Lejátszó elutasítva")
}

SwiftUI: .fullScreenCover módosító

SwiftUI biztosítja a .fullScreenCover módosítót a teljes képernyős modális ablakok deklaratív létrehozásához. Ellentétben a .sheettel (Page Sheet), a .fullScreenCover a .fullScreen stílust hozza létre analóg viselkedéssel: a tartalom teljes lefedése és a húzással történő bezárás hiánya.

Használat bindinggel és adatokkal

A módosító egy Bool bindinget vagy egy opcionális azonosítható objektumot fogad el. Amikor a binding true-ra van állítva, a SwiftUI animálja a teljes képernyős ablak megjelenését. Az adatok átviteléhez az onDismiss paraméter és egy tartalommal rendelkező closure használatos. A \.dismiss környezeti érték lehetővé teszi a modális ablak belülről történő bezárását.

Full Screen Cover vs Sheet

A választás a .fullScreenCover és a .sheet között SwiftUI-ben analóg a UIKithez: .fullScreenCover magával ragadó tartalomhoz, .sheet kártyákhoz. SwiftUI automatikusan kiválasztja a megfelelő bezárási viselkedést: a .sheet húzással zárható, a .fullScreenCover — csak programozottan. A módosítók kombinálhatóak ugyanabban a View hierarchiában.

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

    var body: some View {
        Button("Kamera megnyitása") {
            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("Rögzítés") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Egyedi animációk és átmenetek

Full Screen Cover támogatja az egyedi animációkat a UIModalTransitionStyle segítségével UIKitben és az egyedi átmeneteket SwiftUI-ben. A standard stílusok: .coverVertical (alulról felfelé), .crossDissolve (fokozatos megjelenés), .flipHorizontal (átfordítás) és .partialCurl (oldal effektus).

UIKit: UIViewControllerAnimatedTransitioning

Teljesen egyedi animációhoz implementálja a UIViewControllerAnimatedTransitioning protokollt. Ez lehetővé teszi az animáció időtartamának és magának az átmenetnek a meghatározását az animateTransition(using:) metóduson keresztül. Az animációs vezérlő az UINavigationControllerDelegate vagy UIViewControllerTransitioningDelegate delegált segítségével kerül kijelölésre.

SwiftUI: Matched Geometry Effect

SwiftUI-ben a .fullScreenCover egyedi átmenetei a matchedGeometryEffect segítségével hozhatók létre. Ez a módosító egy elem áthelyezését animálja a szülő View-ból a teljes képernyős ablakba. Például egy fénykép miniatűrre kattintva az simán kiteljesedik a teljes képernyőre, folytonossági hatást keltve. A MatchedGeometryEffect id-val és namespace-szel működik, összekötve az elemet a forrás és cél pozícióban.

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

Mikor használjuk a Full Screen Covert?

Full Screen Cover olyan forgatókönyvekhez ajánlott, ahol a tartalomnak a teljes képernyőt kell elfoglalnia a szülő interfész általi zavarás nélkül. Az Apple HIG három fő kategóriát különböztet meg: média tartalom, tartalomkészítő eszközök és ideiglenes rendszerinterfészek.

Média és szórakozás

Videolejátszók, fotómegtekintés, PDF és képregény olvasás — tipikus példái a Full Screen Cover használatának. Az AVPlayerViewController iOS-ben automatikusan teljes képernyős módot használ landscape módba váltáskor. Az olyan fotószerkesztők, mint az Adobe Lightroom, teljes képernyős szerkesztőt nyitnak a képkönyvtár felett.

Tartalomkészítő eszközök

Kamera, dokumentumszkenner, hangfelvétel — olyan feladatok, amelyek a felhasználó teljes figyelmét igénylik. A UIImagePickerController iOS 14-ig Full Screen Covert használt a kamerához. iOS 14-től a rendszerválasztó Page Sheetet használ, de a fejlesztő kikényszerítheti a .fullScreen-t egyedi kamerához.

Mit kerüljünk el

Ne használja a Full Screen Covert: regisztrációs űrlapokhoz (a Page Sheet előnyösebb), szövegbeviteli képernyőkhöz, ahol a szülő oldal kontextusa fontos, és szekvenciális navigációhoz a modális ablakon belül. A Material Design is ajánlja a rendszer vissza gomb blokkolásának elkerülését — iOS-ben ez megengedett, de a felhasználónak rendelkeznie kell egyértelmű bezárási móddal egy UI elemen keresztül.