Full Screen Cover: що це, повноекранна презентація та UIKit

Що таке Full Screen Cover в iOS?

Full Screen Cover — це стиль модальної презентації в iOS, при якому представлений контролер займає весь екран пристрою. Батьківський контент повністю ховається, створюючи імерсивний ефект та зосереджуючи користувача на поточному завданні.

До iOS 13 Full Screen Cover був єдиним стилем модальної презентації на iPhone. Всі виклики present(_:animated:completion:) типово використовували .fullScreen. Починаючи з iOS 13, Apple змінила типовий стиль на .automatic, який для iPhone обирає .pageSheet. Однак Full Screen Cover залишається доступним і застосовується для сценаріїв, де важлива повна зосередженість.

На відміну від Page Sheet, Full Screen Cover не дозволяє взаємодіяти з батьківським контентом і не показує його під модальним вікном. Користувач не може закрити Full Screen Cover свайпом вниз — для закриття потрібен програмний виклик dismiss(animated:completion:) або кнопка закриття на самому екрані. Цю поведінку важливо враховувати при проектуванні UX.

Full Screen Cover vs Page Sheet: порівняння стилів

Page Sheet — другий основний стиль модальної презентації, що з'явився в iOS 13. Page Sheet відображається як картка з відступом зверху, під якою видно батьківський екран. Користувач може закрити Page Sheet свайпом вниз. Full Screen Cover, навпаки, ховає батьківський контент і не підтримує закриття свайпом.

Вибір між Full Screen Cover та Page Sheet залежить від контенту та контексту. Рекомендується використовувати Full Screen Cover для контенту, що потребує повної уваги: відео на повний екран, попередній перегляд фото, сканування документів. Page Sheet для завдань, де контекст батьківського екрану важливий: форми редагування, вибір опцій, перегляд деталей.

Реалізація на UIKit: UIModalPresentationStyle

UIKit надає константу UIModalPresentationStyle.fullScreen для налаштування стилю модальної презентації. Встановлення цієї властивості на UIViewController перед викликом present гарантує, що контролер відобразиться на весь екран. Контролер також керує поведінкою при появі клавіатури та обробляє системні події.

Налаштування та делегат

Після встановлення стилю .fullScreen рекомендується налаштувати presentationController?.delegate для обробки подій закриття. Делегат UIAdaptivePresentationControllerDelegate дозволяє перехопити спроби закриття та запобігти втраті даних. На відміну від Page Sheet, для Full Screen Cover делегат спрацює тільки при програмному виклику dismiss.

Обробка повороту та клавіатури

Full Screen Cover коректно обробляє поворот екрану та появу клавіатури. При повороті модальний контролер автоматично адаптується до нової орієнтації. UIKeyboardWillShowNotification дозволяє зсунути контент вгору при появі клавіатури, щоб текстові поля залишалися видимими. На відміну від Page Sheet, Full Screen Cover не змінює свій розмір при появі клавіатури.

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

// Закрити
dismiss(animated: true) {
    print("Плеер закрито")
}

SwiftUI: модифікатор .fullScreenCover

SwiftUI надає модифікатор .fullScreenCover для декларативного створення повноекранних модальних вікон. На відміну від .sheet (Page Sheet), .fullScreenCover створює стиль .fullScreen з аналогічною поведінкою: повне перекриття контенту та відсутність закриття свайпом.

Використання з binding та даними

Модифікатор приймає binding на Bool або опційний ідентифікований об'єкт. Коли binding встановлюється в true, SwiftUI анімує появу повноекранного вікна. Для передачі даних використовується параметр onDismiss та замикання з контентом. Значення середовища \.dismiss дозволяє закрити модальне вікно зсередини.

Full Screen Cover vs Sheet

Вибір між .fullScreenCover та .sheet в SwiftUI аналогічний до UIKit: .fullScreenCover для імерсивного контенту, .sheet для карток. SwiftUI автоматично обирає правильну поведінку закриття: .sheet можна закрити свайпом, .fullScreenCover — тільки програмно. Модифікатори можна комбінувати в одній ієрархії View.

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

    var body: some View {
        Button("Відкрити камеру") {
            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("Захопити") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Кастомні анімації та переходи

Full Screen Cover підтримує кастомні анімації через UIModalTransitionStyle в UIKit та кастомні переходи в SwiftUI. Стандартні стилі: .coverVertical (знизу вгору), .crossDissolve (плавна поява), .flipHorizontal (переворот) та .partialCurl (ефект сторінки).

UIKit: UIViewControllerAnimatedTransitioning

Для повністю кастомної анімації реалізуйте протокол UIViewControllerAnimatedTransitioning. Він дозволяє визначити тривалість анімації та сам перехід через метод animateTransition(using:). Контролер анімації призначається через UINavigationControllerDelegate або UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

У SwiftUI кастомні переходи для .fullScreenCover створюються через matchedGeometryEffect. Цей модифікатор анімує переміщення елемента з батьківського View у повноекранне вікно. Наприклад, при натисканні на мініатюру фото вона плавно розгортається на весь екран, створюючи ефект безперервності. MatchedGeometryEffect працює з id та namespace, які пов'язують елемент у вихідній та цільовій позиціях.

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

Коли використовувати Full Screen Cover?

Full Screen Cover рекомендується для сценаріїв, де контент повинен займати весь екран без відволікання на батьківський інтерфейс. Apple HIG виділяє три основні категорії: медіаконтент, інструменти створення контенту та тимчасові системні інтерфейси.

Медіа та розваги

Відеоплеери, перегляд фото, читання PDF та коміксів — типові приклади використання Full Screen Cover. AVPlayerViewController в iOS автоматично використовує повноекранний режим при переході в ландшафт. Фоторедактори типу Adobe Lightroom відкривають повноекранний редактор поверх бібліотеки знімків.

Інструменти створення контенту

Камера, сканер документів, запис голосу — завдання, що потребують повної уваги користувача. UIImagePickerController використовував Full Screen Cover для камери до iOS 14. Починаючи з iOS 14, системний пікер використовує Page Sheet, але розробник може примусово встановити .fullScreen для кастомної камери.

Чого уникати

Не використовуйте Full Screen Cover для: форм реєстрації (надавайте перевагу Page Sheet), екранів з текстовим введенням, де контекст батьківської сторінки важливий, та послідовної навігації всередині модального вікна. Material Design також рекомендує уникати блокування системної кнопки назад — це допустимо в iOS, але користувач повинен мати чіткий спосіб закриття через елемент інтерфейсу.