Full Screen Cover : qu'est-ce que c'est, présentation plein écran et UIKit

Qu'est-ce que Full Screen Cover dans iOS ?

Full Screen Cover est un style de présentation modale dans iOS où le contrôleur présenté occupe tout l'écran de l'appareil. Le contenu parent est complètement masqué, créant un effet immersif et concentrant l'utilisateur sur la tâche en cours.

Avant iOS 13, Full Screen Cover était le seul style de présentation modale sur iPhone. Tous les appels à present(_:animated:completion:) utilisaient .fullScreen par défaut. À partir d'iOS 13, Apple a changé le style par défaut en .automatic, qui pour l'iPhone sélectionne .pageSheet. Cependant, Full Screen Cover reste disponible et est utilisé pour les scénarios où une concentration totale est importante.

Contrairement à Page Sheet, Full Screen Cover ne permet pas d'interagir avec le contenu parent et ne l'affiche pas sous la fenêtre modale. L'utilisateur ne peut pas fermer Full Screen Cover en balayant vers le bas — la fermeture nécessite un appel programmatique à dismiss(animated:completion:) ou un bouton de fermeture sur l'écran lui-même. Ce comportement est important à prendre en compte lors de la conception de l'UX.

Full Screen Cover vs Page Sheet : comparaison des styles

Page Sheet est le deuxième style principal de présentation modale, introduit dans iOS 13. Page Sheet s'affiche comme une carte avec une marge supérieure, sous laquelle l'écran parent est visible. L'utilisateur peut fermer Page Sheet en balayant vers le bas. Full Screen Cover, au contraire, masque le contenu parent et ne prend pas en charge la fermeture par balayage.

Le choix entre Full Screen Cover et Page Sheet dépend du contenu et du contexte. Il est recommandé d'utiliser Full Screen Cover pour le contenu qui nécessite une attention totale : vidéo plein écran, aperçu photo, numérisation de documents. Page Sheet est pour les tâches où le contexte de l'écran parent est important : formulaires d'édition, sélection d'options, vue détaillée.

Implémentation dans UIKit : UIModalPresentationStyle

UIKit fournit la constante UIModalPresentationStyle.fullScreen pour configurer le style de présentation modale. Définir cette propriété sur UIViewController avant d'appeler present garantit que le contrôleur s'affiche en plein écran. Le contrôleur gère également le comportement lors de l'apparition du clavier et traite les événements système.

Configuration et délégué

Après avoir défini le style .fullScreen, il est recommandé de configurer presentationController?.delegate pour gérer les événements de fermeture. Le délégué UIAdaptivePresentationControllerDelegate permet d'intercepter les tentatives de fermeture et d'éviter la perte de données. Contrairement à Page Sheet, pour Full Screen Cover le délégué n'est déclenché que lors des appels programmatiques à dismiss.

Gestion de la rotation et du clavier

Full Screen Cover gère correctement la rotation de l'écran et l'apparition du clavier. Lors de la rotation, le contrôleur modal s'adapte automatiquement à la nouvelle orientation. UIKeyboardWillShowNotification permet de décaler le contenu vers le haut lorsque le clavier apparaît, gardant les champs de texte visibles. Contrairement à Page Sheet, Full Screen Cover ne change pas de taille lorsque le clavier apparaît.

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

// Fermer
dismiss(animated: true) {
    print("Lecteur fermé")
}

SwiftUI : le modificateur .fullScreenCover

SwiftUI fournit le modificateur .fullScreenCover pour la création déclarative de fenêtres modales plein écran. Contrairement à .sheet (Page Sheet), .fullScreenCover crée le style .fullScreen avec un comportement similaire : couverture totale du contenu et absence de fermeture par balayage.

Utilisation avec binding et données

Le modificateur accepte un binding vers Bool ou un élément identifiable optionnel. Lorsque le binding est défini sur true, SwiftUI anime l'apparition de la fenêtre plein écran. Pour passer des données, on utilise le paramètre onDismiss et une fermeture avec contenu. La valeur d'environnement \.dismiss permet de fermer la fenêtre modale de l'intérieur.

Full Screen Cover vs Sheet

Le choix entre .fullScreenCover et .sheet dans SwiftUI est analogue à UIKit : .fullScreenCover pour le contenu immersif, .sheet pour les cartes. SwiftUI sélectionne automatiquement le comportement de fermeture correct : .sheet peut être fermé par balayage, .fullScreenCover uniquement par programme. Les modificateurs peuvent être combinés dans une même hiérarchie de View.

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

    var body: some View {
        Button("Ouvrir l'appareil photo") {
            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("Capturer") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Animations et transitions personnalisées

Full Screen Cover prend en charge les animations personnalisées via UIModalTransitionStyle dans UIKit et les transitions personnalisées dans SwiftUI. Les styles standard incluent : .coverVertical (de bas en haut), .crossDissolve (apparition progressive), .flipHorizontal (retournement) et .partialCurl (effet de page).

UIKit : UIViewControllerAnimatedTransitioning

Pour une animation entièrement personnalisée, implémentez le protocole UIViewControllerAnimatedTransitioning. Il permet de définir la durée de l'animation et la transition elle-même via la méthode animateTransition(using:). Le contrôleur d'animation est attribué via UINavigationControllerDelegate ou UIViewControllerTransitioningDelegate.

SwiftUI : Matched Geometry Effect

Dans SwiftUI, les transitions personnalisées pour .fullScreenCover sont créées à l'aide de matchedGeometryEffect. Ce modificateur anime le déplacement d'un élément de la vue parente vers la fenêtre plein écran. Par exemple, en touchant une vignette de photo, elle s'agrandit en douceur pour occuper tout l'écran, créant un effet de continuité. MatchedGeometryEffect fonctionne avec id et namespace qui lient l'élément dans les positions source et destination.

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

Quand utiliser Full Screen Cover ?

Full Screen Cover est recommandé pour les scénarios où le contenu doit occuper tout l'écran sans distraction de l'interface parente. Apple HIG identifie trois catégories principales : contenu multimédia, outils de création de contenu et interfaces système temporaires.

Média et divertissement

Les lecteurs vidéo, la visualisation de photos, la lecture de PDF et de bandes dessinées sont des exemples typiques d'utilisation de Full Screen Cover. AVPlayerViewController dans iOS utilise automatiquement le mode plein écran lors du passage en paysage. Les éditeurs de photos comme Adobe Lightroom ouvrent un éditeur plein écran au-dessus de la bibliothèque de photos.

Outils de création de contenu

Appareil photo, scanner de documents, enregistrement vocal — des tâches qui nécessitent toute l'attention de l'utilisateur. UIImagePickerController utilisait Full Screen Cover pour l'appareil photo avant iOS 14. À partir d'iOS 14, le sélecteur système utilise Page Sheet, mais le développeur peut forcer .fullScreen pour un appareil photo personnalisé.

À éviter

N'utilisez pas Full Screen Cover pour : les formulaires d'inscription (Page Sheet est préférable), les écrans avec saisie de texte où le contexte de la page parente est important, et la navigation séquentielle à l'intérieur de la fenêtre modale. Material Design recommande également d'éviter de bloquer le bouton de retour système — c'est acceptable dans iOS, mais l'utilisateur doit avoir un moyen clair de fermer via un élément d'interface.