Full Screen Cover: qué es, presentación a pantalla completa y UIKit

¿Qué es Full Screen Cover en iOS?

Full Screen Cover es un estilo de presentación modal en iOS donde el controlador presentado ocupa toda la pantalla del dispositivo. El contenido padre se oculta por completo, creando un efecto inmersivo que centra al usuario en la tarea actual.

Antes de iOS 13, Full Screen Cover era el único estilo de presentación modal en iPhone. Todas las llamadas a present(_:animated:completion:) usaban .fullScreen por defecto. A partir de iOS 13, Apple cambió el estilo predeterminado a .automatic, que para iPhone selecciona .pageSheet. Sin embargo, Full Screen Cover sigue estando disponible y se utiliza para escenarios donde es importante el enfoque total.

A diferencia de Page Sheet, Full Screen Cover no permite interactuar con el contenido padre ni lo muestra debajo de la ventana modal. El usuario no puede cerrar Full Screen Cover deslizando hacia abajo; para cerrarlo se requiere una llamada programática a dismiss(animated:completion:) o un botón de cierre en la propia pantalla. Este comportamiento es importante tenerlo en cuenta al diseñar la UX.

Full Screen Cover vs Page Sheet: comparación de estilos

Page Sheet es el segundo estilo principal de presentación modal, introducido en iOS 13. Page Sheet se muestra como una tarjeta con un margen superior, debajo de la cual se ve la pantalla padre. El usuario puede cerrar Page Sheet deslizando hacia abajo. Full Screen Cover, por el contrario, oculta el contenido padre y no admite el cierre por deslizamiento.

La elección entre Full Screen Cover y Page Sheet depende del contenido y el contexto. Se recomienda usar Full Screen Cover para contenido que requiere atención total: vídeo en pantalla completa, vista previa de fotos, escaneo de documentos. Page Sheet es para tareas donde el contexto de la pantalla padre es importante: formularios de edición, selección de opciones, vista de detalles.

Implementación en UIKit: UIModalPresentationStyle

UIKit proporciona la constante UIModalPresentationStyle.fullScreen para configurar el estilo de presentación modal. Establecer esta propiedad en UIViewController antes de llamar a present garantiza que el controlador se muestre en pantalla completa. El controlador también gestiona el comportamiento cuando aparece el teclado y maneja los eventos del sistema.

Configuración y delegado

Después de establecer el estilo .fullScreen, se recomienda configurar presentationController?.delegate para manejar los eventos de cierre. El delegado UIAdaptivePresentationControllerDelegate permite interceptar los intentos de cierre y evitar la pérdida de datos. A diferencia de Page Sheet, para Full Screen Cover el delegado solo se activa en llamadas programáticas a dismiss.

Manejo de rotación y teclado

Full Screen Cover maneja correctamente la rotación de pantalla y la aparición del teclado. Al rotar, el controlador modal se adapta automáticamente a la nueva orientación. UIKeyboardWillShowNotification permite desplazar el contenido hacia arriba cuando aparece el teclado, manteniendo los campos de texto visibles. A diferencia de Page Sheet, Full Screen Cover no cambia su tamaño cuando aparece el teclado.

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

// Descartar
dismiss(animated: true) {
    print("Reproductor cerrado")
}

SwiftUI: el modificador .fullScreenCover

SwiftUI proporciona el modificador .fullScreenCover para la creación declarativa de ventanas modales a pantalla completa. A diferencia de .sheet (Page Sheet), .fullScreenCover crea el estilo .fullScreen con un comportamiento similar: cobertura total del contenido y sin cierre por deslizamiento.

Uso con binding y datos

El modificador acepta un binding a Bool o un elemento identificable opcional. Cuando el binding se establece en true, SwiftUI anima la aparición de la ventana a pantalla completa. Para pasar datos se utilizan el parámetro onDismiss y una clausura con contenido. El valor de entorno \.dismiss permite cerrar la ventana modal desde dentro.

Full Screen Cover vs Sheet

La elección entre .fullScreenCover y .sheet en SwiftUI es análoga a UIKit: .fullScreenCover para contenido inmersivo, .sheet para tarjetas. SwiftUI selecciona automáticamente el comportamiento de cierre correcto: .sheet se puede cerrar con deslizamiento, .fullScreenCover solo mediante programa. Los modificadores se pueden combinar en una misma jerarquía de View.

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

    var body: some View {
        Button("Abrir cámara") {
            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("Capturar") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Animaciones y transiciones personalizadas

Full Screen Cover admite animaciones personalizadas a través de UIModalTransitionStyle en UIKit y transiciones personalizadas en SwiftUI. Los estilos estándar incluyen: .coverVertical (de abajo arriba), .crossDissolve (aparición gradual), .flipHorizontal (volteo) y .partialCurl (efecto de página).

UIKit: UIViewControllerAnimatedTransitioning

Para una animación totalmente personalizada, implemente el protocolo UIViewControllerAnimatedTransitioning. Permite definir la duración de la animación y la transición en sí a través del método animateTransition(using:). El controlador de animación se asigna a través de UINavigationControllerDelegate o UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

En SwiftUI, las transiciones personalizadas para .fullScreenCover se crean mediante matchedGeometryEffect. Este modificador anima el movimiento de un elemento desde la View padre hasta la ventana a pantalla completa. Por ejemplo, al pulsar una miniatura de foto, esta se expande suavemente a pantalla completa, creando un efecto de continuidad. MatchedGeometryEffect funciona con id y namespace que vinculan los elementos en las posiciones de origen y destino.

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

¿Cuándo usar Full Screen Cover?

Full Screen Cover se recomienda para escenarios donde el contenido debe ocupar toda la pantalla sin distracción de la interfaz padre. Apple HIG identifica tres categorías principales: contenido multimedia, herramientas de creación de contenido e interfaces temporales del sistema.

Medios y entretenimiento

Reproductores de vídeo, visualización de fotos, lectura de PDF y cómics son ejemplos típicos de uso de Full Screen Cover. AVPlayerViewController en iOS utiliza automáticamente el modo de pantalla completa al pasar a horizontal. Los editores de fotos como Adobe Lightroom abren un editor a pantalla completa sobre la biblioteca de imágenes.

Herramientas de creación de contenido

Cámara, escáner de documentos, grabación de voz: tareas que requieren toda la atención del usuario. UIImagePickerController usaba Full Screen Cover para la cámara antes de iOS 14. A partir de iOS 14, el selector del sistema usa Page Sheet, pero el desarrollador puede forzar .fullScreen para una cámara personalizada.

Qué evitar

No use Full Screen Cover para: formularios de registro (se prefiere Page Sheet), pantallas con entrada de texto donde es importante el contexto de la página padre, y navegación secuencial dentro de la ventana modal. Material Design también recomienda evitar bloquear el botón de retroceso del sistema; esto es aceptable en iOS, pero el usuario debe tener una forma clara de cerrar mediante un elemento de UI.