Full Screen Cover: vad är det, helskärmspresentation och UIKit

Vad är Full Screen Cover i iOS?

Full Screen Cover — är en stil för modal presentation i iOS där den presenterade kontrollen tar upp hela enhetens skärm. Det överordnade innehållet är helt dolt, vilket skapar en immersiv effekt och fokuserar användaren på den aktuella uppgiften.

Före iOS 13 var Full Screen Cover den enda stilen för modal presentation på iPhone. Alla anrop av present(_:animated:completion:) använde som standard .fullScreen. Från och med iOS 13 ändrade Apple standardstilen till .automatic, som för iPhone väljer .pageSheet. Full Screen Cover förblir dock tillgänglig och används för scenarier där fullt fokus är viktigt.

Till skillnad från Page Sheet tillåter Full Screen Cover inte interaktion med överordnat innehåll och visar det inte under det modala fönstret. Användaren kan inte stänga Full Screen Cover genom att svepa nedåt — för stängning krävs ett programmatiskt anrop av dismiss(animated:completion:) eller en stängningsknapp på själva skärmen. Detta beteende är viktigt att beakta vid UX-design.

Full Screen Cover vs Page Sheet: jämförelse av stilar

Page Sheet — den andra huvudsakliga stilen för modal presentation, som dök upp i iOS 13. Page Sheet visas som ett kort med ett mellanrum upptill, under vilket den överordnade skärmen syns. Användaren kan stänga Page Sheet genom att svepa nedåt. Full Screen Cover döljer däremot det överordnade innehållet och stöder inte stängning genom svepning.

Valet mellan Full Screen Cover och Page Sheet beror på innehåll och sammanhang. Rekommenderas att använda Full Screen Cover för innehåll som kräver full uppmärksamhet: video i helskärmsläge, fotoförhandsvisning, dokumentskanning. Page Sheet — för uppgifter där sammanhanget för den överordnade skärmen är viktigt: redigeringsformulär, val av alternativ, detaljvisning.

Implementering på UIKit: UIModalPresentationStyle

UIKit tillhandahåller konstanten UIModalPresentationStyle.fullScreen för konfigurering av stilen för modal presentation. Inställning av denna egenskap på UIViewController före anropet present garanterar att kontrollen visas på hela skärmen. Kontrollen hanterar också beteendet när tangentbordet visas och bearbetning av systemhändelser.

Konfiguration och delegat

Efter inställning av stilen .fullScreen rekommenderas att konfigurera presentationController?.delegate för hantering av stängningshändelser. Delegerade UIAdaptivePresentationControllerDelegate gör det möjligt att fånga upp ett stängningsförsök och förhindra dataförlust. Till skillnad från Page Sheet aktiveras delegaten för Full Screen Cover endast vid programmatiskt anrop av dismiss.

Hantering av rotation och tangentbord

Full Screen Cover hanterar skärmrotation och tangentbordets visas korrekt. Vid rotation anpassas den modala kontrollen automatiskt till den nya orienteringen. UIKeyboardWillShowNotification gör det möjligt att skjuta upp innehåll när tangentbordet visas, så att textfält förblir synliga. Till skillnad från Page Sheet ändrar Full Screen Cover inte sina dimensioner när tangentbordet visas.

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

// Avvisa
dismiss(animated: true) {
    print("Spelaren avvisad")
}

SwiftUI: modifieraren .fullScreenCover

SwiftUI tillhandahåller modifieraren .fullScreenCover för deklarativt skapande av modala helskärmsfönster. Till skillnad från .sheet (Page Sheet) skapar .fullScreenCover stilen .fullScreen med analogt beteende: fullständig täckning av innehåll och frånvaro av stängning genom svepning.

Användning med binding och data

Modifieraren accepterar en binding på Bool eller ett valfritt identifierbart objekt. När binding sätts till true animerar SwiftUI visningen av helskärmsfönstret. För dataöverföring används parametern onDismiss och en closure med innehåll. Miljövärdet \.dismiss gör det möjligt att stänga det modala fönstret inifrån.

Full Screen Cover vs Sheet

Valet mellan .fullScreenCover och .sheet i SwiftUI är analogt med UIKit: .fullScreenCover för immersivt innehåll, .sheet för kort. SwiftUI väljer automatiskt rätt stängningsbeteende: .sheet kan stängas genom svepning, .fullScreenCover — endast programmatiskt. Modifierare kan kombineras i samma View-hierarki.

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

    var body: some View {
        Button("Öppna 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("Fånga") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Anpassade animationer och övergångar

Full Screen Cover stöder anpassade animationer via UIModalTransitionStyle i UIKit och anpassade övergångar i SwiftUI. Standardstilar: .coverVertical (nerifrån och upp), .crossDissolve (gradvis visning), .flipHorizontal (vändning) och .partialCurl (sideffekt).

UIKit: UIViewControllerAnimatedTransitioning

För helt anpassad animation, implementera protokollet UIViewControllerAnimatedTransitioning. Det gör det möjligt att definiera animationens varaktighet och själva övergången via metoden animateTransition(using:). Animationskontrollen tilldelas via delegaten UINavigationControllerDelegate eller UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

I SwiftUI skapas anpassade övergångar för .fullScreenCover via matchedGeometryEffect. Denna modifierare animerar förflyttningen av ett element från den överordnade View till helskärmsfönstret. Till exempel, när man klickar på en fotominiatyr expanderar den smidigt till helskärm, vilket skapar en kontinuitetseffekt. MatchedGeometryEffect fungerar med id och namespace, som kopplar samman elementet i käll- och målposition.

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

När ska man använda Full Screen Cover?

Full Screen Cover rekommenderas för scenarier där innehållet ska uppta hela skärmen utan distraktion från det överordnade gränssnittet. Apple HIG särskiljer tre huvudkategorier: medieinnehåll, verktyg för att skapa innehåll och tillfälliga systemgränssnitt.

Media och underhållning

Videospelare, fotovisning, läsning av PDF och serier — typiska exempel på användning av Full Screen Cover. AVPlayerViewController i iOS använder automatiskt helskärmsläge vid övergång till liggande orientering. Fotoredigerare som Adobe Lightroom öppnar en helskärmsredigerare ovanför bildbiblioteket.

Verktyg för att skapa innehåll

Kamera, dokumentskanner, röstinspelning — uppgifter som kräver användarens fulla uppmärksamhet. UIImagePickerController använde fram till iOS 14 Full Screen Cover för kameran. Från och med iOS 14 använder systemväljaren Page Sheet, men utvecklaren kan tvinga .fullScreen för en anpassad kamera.

Vad man bör undvika

Använd inte Full Screen Cover för: registreringsformulär (Page Sheet är att föredra), skärmar med textinmatning där sammanhanget för den överordnade sidan är viktigt, och sekventiell navigering inom det modala fönstret. Material Design rekommenderar också att undvika blockering av systemets bakåtknapp — i iOS är detta tillåtet, men användaren bör ha ett tydligt sätt att stänga via ett UI-element.