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 до iOS 14 използваше Full Screen Cover за камерата. От iOS 14 системният избирач използва Page Sheet, но разработчикът може принудително да зададе .fullScreen за персонализирана камера.

Какво да избягваме

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