Full Screen Cover: cos'è, presentazione a schermo intero e UIKit

Cos'è Full Screen Cover in iOS?

Full Screen Cover è uno stile di presentazione modale in iOS in cui il controller presentato occupa l'intero schermo del dispositivo. Il contenuto padre è completamente nascosto, creando un effetto immersivo e concentrando l'utente sull'attività corrente.

Prima di iOS 13, Full Screen Cover era l'unico stile di presentazione modale su iPhone. Tutte le chiamate a present(_:animated:completion:) utilizzavano .fullScreen per impostazione predefinita. A partire da iOS 13, Apple ha cambiato lo stile predefinito in .automatic, che per iPhone seleziona .pageSheet. Tuttavia, Full Screen Cover rimane disponibile e viene utilizzato per scenari in cui è importante la piena concentrazione.

A differenza di Page Sheet, Full Screen Cover non consente di interagire con il contenuto padre e non lo mostra sotto la finestra modale. L'utente non può chiudere Full Screen Cover scorrendo verso il basso — per chiudere è necessario chiamare dismiss(animated:completion:) o un pulsante di chiusura sullo schermo stesso. Questo comportamento è importante da considerare quando si progetta l'UX.

Full Screen Cover vs Page Sheet: confronto stili

Page Sheet è il secondo stile principale di presentazione modale, introdotto in iOS 13. Page Sheet viene visualizzato come una scheda con un margine superiore, sotto la quale è visibile lo schermo padre. L'utente può chiudere Page Sheet scorrendo verso il basso. Full Screen Cover, al contrario, nasconde il contenuto padre e non supporta la chiusura tramite swipe.

La scelta tra Full Screen Cover e Page Sheet dipende dal contenuto e dal contesto. Si consiglia di utilizzare Full Screen Cover per contenuti che richiedono piena attenzione: video a schermo intero, anteprime foto, scansione documenti. Page Sheet è per attività in cui il contesto dello schermo padre è importante: moduli di modifica, selezione opzioni, vista dettaglio.

Implementazione in UIKit: UIModalPresentationStyle

UIKit fornisce la costante UIModalPresentationStyle.fullScreen per configurare lo stile di presentazione modale. Impostare questa proprietà su UIViewController prima di chiamare present garantisce che il controller venga visualizzato a schermo intero. Il controller gestisce anche il comportamento quando appare la tastiera e gestisce gli eventi di sistema.

Configurazione e delegato

Dopo aver impostato lo stile .fullScreen, si consiglia di configurare presentationController?.delegate per gestire gli eventi di chiusura. Il delegato UIAdaptivePresentationControllerDelegate consente di intercettare i tentativi di chiusura e prevenire la perdita di dati. A differenza di Page Sheet, per Full Screen Cover il delegato viene attivato solo su chiamate programmatiche a dismiss.

Gestione di rotazione e tastiera

Full Screen Cover gestisce correttamente la rotazione dello schermo e la comparsa della tastiera. Durante la rotazione, il controller modale si adatta automaticamente al nuovo orientamento. UIKeyboardWillShowNotification consente di spostare il contenuto verso l'alto quando appare la tastiera, mantenendo visibili i campi di testo. A differenza di Page Sheet, Full Screen Cover non modifica le sue dimensioni quando appare la tastiera.

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

// Chiudi
dismiss(animated: true) {
    print("Lettore chiuso")
}

SwiftUI: il modificatore .fullScreenCover

SwiftUI fornisce il modificatore .fullScreenCover per la creazione dichiarativa di finestre modali a schermo intero. A differenza di .sheet (Page Sheet), .fullScreenCover crea lo stile .fullScreen con comportamento simile: copertura totale del contenuto e assenza di chiusura tramite swipe.

Utilizzo con binding e dati

Il modificatore accetta un binding a Bool o un elemento identificabile opzionale. Quando il binding viene impostato su true, SwiftUI anima la comparsa della finestra a schermo intero. Per passare dati, si utilizzano il parametro onDismiss e una closure con contenuto. Il valore di ambiente \.dismiss consente di chiudere la finestra modale dall'interno.

Full Screen Cover vs Sheet

La scelta tra .fullScreenCover e .sheet in SwiftUI è analoga a UIKit: .fullScreenCover per contenuti immersivi, .sheet per schede. SwiftUI seleziona automaticamente il corretto comportamento di chiusura: .sheet può essere chiuso tramite swipe, .fullScreenCover solo tramite programma. I modificatori possono essere combinati in una singola gerarchia di View.

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

    var body: some View {
        Button("Apri fotocamera") {
            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("Acquisisci") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Animazioni e transizioni personalizzate

Full Screen Cover supporta animazioni personalizzate tramite UIModalTransitionStyle in UIKit e transizioni personalizzate in SwiftUI. Gli stili standard includono: .coverVertical (dal basso verso l'alto), .crossDissolve (dissolvenza), .flipHorizontal (ribaltamento) e .partialCurl (effetto pagina).

UIKit: UIViewControllerAnimatedTransitioning

Per un'animazione completamente personalizzata, implementare il protocollo UIViewControllerAnimatedTransitioning. Esso consente di definire la durata dell'animazione e la transizione stessa tramite il metodo animateTransition(using:). Il controller di animazione viene assegnato tramite UINavigationControllerDelegate o UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

In SwiftUI, le transizioni personalizzate per .fullScreenCover vengono create utilizzando matchedGeometryEffect. Questo modificatore anima il movimento di un elemento dalla View padre alla finestra a schermo intero. Ad esempio, toccando una miniatura di una foto, questa si espande dolcemente a schermo intero, creando un effetto di continuità. MatchedGeometryEffect funziona con id e namespace che collegano l'elemento nelle posizioni di origine e destinazione.

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

Quando usare Full Screen Cover?

Full Screen Cover è consigliato per scenari in cui il contenuto deve occupare l'intero schermo senza distrazioni dall'interfaccia padre. Apple HIG identifica tre categorie principali: contenuti multimediali, strumenti di creazione contenuti e interfacce di sistema temporanee.

Media e intrattenimento

Lettori video, visualizzazione foto, lettura PDF e fumetti sono esempi tipici di utilizzo di Full Screen Cover. AVPlayerViewController in iOS utilizza automaticamente la modalità a schermo intero quando si passa al paesaggio. Editor fotografici come Adobe Lightroom aprono un editor a schermo intero sopra la libreria fotografica.

Strumenti di creazione contenuti

Fotocamera, scanner documenti, registrazione vocale — attività che richiedono la piena attenzione dell'utente. UIImagePickerController utilizzava Full Screen Cover per la fotocamera prima di iOS 14. A partire da iOS 14, il selettore di sistema utilizza Page Sheet, ma lo sviluppatore può forzare .fullScreen per una fotocamera personalizzata.

Cosa evitare

Non utilizzare Full Screen Cover per: moduli di registrazione (Page Sheet è preferibile), schermate con input di testo dove il contesto della pagina padre è importante e navigazione sequenziale all'interno della finestra modale. Material Design raccomanda inoltre di evitare di bloccare il pulsante Indietro di sistema — questo è accettabile in iOS, ma l'utente deve avere un modo chiaro per chiudere tramite un elemento dell'interfaccia.