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-у аутоматски користи режим преко целог екрана при преласку у landscape. Фото едитори попут Adobe Lightroom-а отварају едитор преко целог екрана изнад библиотеке снимака.

Алати за креирање садржаја

Камера, скенер докумената, снимање гласа — задаци који захтевају пуну пажњу корисника. UIImagePickerController је до iOS 14 користио Full Screen Cover за камеру. Од iOS 14, системски бирач користи Page Sheet, али програмер може присилно поставити .fullScreen за прилагођену камеру.

Чега избегавати

Немојте користити Full Screen Cover за: формуларе за регистрацију (пожељан је Page Sheet), екране са уносом текста где је важан контекст родитељске странице и секвенцијалну навигацију унутар модалног прозора. Material Design такође препоручује избегавање блокирања системског дугмета за назад — у iOS-у је то дозвољено, али корисник мора имати јасан начин затварања кроз UI елемент.