Full Screen Cover: o que é, apresentação em tela cheia e UIKit

O que é Full Screen Cover no iOS?

Full Screen Cover é um estilo de apresentação modal no iOS onde o controlador apresentado ocupa toda a tela do dispositivo. O conteúdo pai é completamente ocultado, criando um efeito imersivo e focando o usuário na tarefa atual.

Antes do iOS 13, o Full Screen Cover era o único estilo de apresentação modal no iPhone. Todas as chamadas a present(_:animated:completion:) usavam .fullScreen por padrão. A partir do iOS 13, a Apple mudou o estilo padrão para .automatic, que para o iPhone seleciona .pageSheet. No entanto, o Full Screen Cover continua disponível e é usado para cenários onde o foco total é importante.

Ao contrário do Page Sheet, o Full Screen Cover não permite interagir com o conteúdo pai nem o mostra sob a janela modal. O usuário não pode fechar o Full Screen Cover deslizando para baixo — o fechamento requer uma chamada programática a dismiss(animated:completion:) ou um botão de fechar na própria tela. Este comportamento é importante de considerar ao projetar a UX.

Full Screen Cover vs Page Sheet: comparação de estilos

Page Sheet é o segundo estilo principal de apresentação modal, introduzido no iOS 13. O Page Sheet é exibido como um cartão com margem superior, sob o qual a tela pai é visível. O usuário pode fechar o Page Sheet deslizando para baixo. O Full Screen Cover, ao contrário, oculta o conteúdo pai e não suporta fechamento por deslize.

A escolha entre Full Screen Cover e Page Sheet depende do conteúdo e contexto. É recomendado usar Full Screen Cover para conteúdo que requer atenção total: vídeo em tela cheia, pré-visualização de fotos, digitalização de documentos. Page Sheet é para tarefas onde o contexto da tela pai é importante: formulários de edição, seleção de opções, visualização de detalhes.

Implementação no UIKit: UIModalPresentationStyle

UIKit fornece a constante UIModalPresentationStyle.fullScreen para configurar o estilo de apresentação modal. Definir esta propriedade no UIViewController antes de chamar present garante que o controlador seja exibido em tela cheia. O controlador também gerencia o comportamento quando o teclado aparece e lida com eventos do sistema.

Configuração e delegate

Após definir o estilo .fullScreen, recomenda-se configurar presentationController?.delegate para lidar com eventos de fechamento. O delegate UIAdaptivePresentationControllerDelegate permite interceptar tentativas de fechamento e evitar perda de dados. Ao contrário do Page Sheet, para Full Screen Cover o delegate só é acionado em chamadas programáticas de dismiss.

Manipulação de rotação e teclado

O Full Screen Cover lida corretamente com rotação de tela e aparecimento do teclado. Ao girar, o controlador modal se adapta automaticamente à nova orientação. UIKeyboardWillShowNotification permite deslocar o conteúdo para cima quando o teclado aparece, mantendo os campos de texto visíveis. Ao contrário do Page Sheet, o Full Screen Cover não altera seu tamanho quando o teclado aparece.

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

// Dispensar
dismiss(animated: true) {
    print("Player dispensado")
}

SwiftUI: o modificador .fullScreenCover

SwiftUI fornece o modificador .fullScreenCover para criação declarativa de janelas modais em tela cheia. Ao contrário de .sheet (Page Sheet), .fullScreenCover cria o estilo .fullScreen com comportamento semelhante: cobertura total do conteúdo e sem fechamento por deslize.

Uso com binding e dados

O modificador aceita um binding para Bool ou um item identificável opcional. Quando o binding é definido como true, o SwiftUI anima o aparecimento da janela em tela cheia. Para passar dados, use o parâmetro onDismiss e uma closure com conteúdo. O valor de ambiente \.dismiss permite fechar a janela modal internamente.

Full Screen Cover vs Sheet

A escolha entre .fullScreenCover e .sheet no SwiftUI é análoga ao UIKit: .fullScreenCover para conteúdo imersivo, .sheet para cartões. SwiftUI seleciona automaticamente o comportamento de fechamento correto: .sheet pode ser fechado por deslize, .fullScreenCover apenas programaticamente. Os modificadores podem ser combinados em uma mesma hierarquia de View.

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

    var body: some View {
        Button("Abrir câmera") {
            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)
            }
        }
    }
}

Animações e transições personalizadas

Full Screen Cover suporta animações personalizadas através de UIModalTransitionStyle no UIKit e transições personalizadas no SwiftUI. Os estilos padrão incluem: .coverVertical (de baixo para cima), .crossDissolve (aparecimento gradual), .flipHorizontal (virar) e .partialCurl (efeito de página).

UIKit: UIViewControllerAnimatedTransitioning

Para animação totalmente personalizada, implemente o protocolo UIViewControllerAnimatedTransitioning. Ele permite definir a duração da animação e a própria transição através do método animateTransition(using:). O controlador de animação é atribuído através de UINavigationControllerDelegate ou UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

No SwiftUI, transições personalizadas para .fullScreenCover são criadas usando matchedGeometryEffect. Este modificador anima o movimento de um elemento da View pai para a janela em tela cheia. Por exemplo, ao tocar numa miniatura de foto, ela se expande suavemente para tela cheia, criando um efeito de continuidade. O MatchedGeometryEffect funciona com id e namespace que vinculam o elemento nas posições de origem e 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()
        }
    }
}

Quando usar Full Screen Cover?

Full Screen Cover é recomendado para cenários onde o conteúdo deve ocupar a tela inteira sem distração da interface pai. O Apple HIG identifica três categorias principais: conteúdo de mídia, ferramentas de criação de conteúdo e interfaces temporárias do sistema.

Mídia e entretenimento

Players de vídeo, visualização de fotos, leitura de PDF e quadrinhos são exemplos típicos de uso do Full Screen Cover. AVPlayerViewController no iOS usa automaticamente o modo tela cheia ao mudar para paisagem. Editores de foto como Adobe Lightroom abrem um editor em tela cheia sobre a biblioteca de fotos.

Ferramentas de criação de conteúdo

Câmera, scanner de documentos, gravação de voz — tarefas que exigem total atenção do usuário. UIImagePickerController usava Full Screen Cover para a câmera antes do iOS 14. A partir do iOS 14, o seletor do sistema usa Page Sheet, mas o desenvolvedor pode forçar .fullScreen para uma câmera personalizada.

O que evitar

Não use Full Screen Cover para: formulários de registro (Page Sheet é preferível), telas com entrada de texto onde o contexto da página pai é importante, e navegação sequencial dentro da janela modal. Material Design também recomenda evitar bloquear o botão voltar do sistema — isto é aceitável no iOS, mas o usuário deve ter uma forma clara de fechar através de um elemento de UI.