Full Screen Cover: ano ito, presentasyong buong screen at UIKit

Ano ang Full Screen Cover sa iOS?

Full Screen Cover — ay isang istilo ng modal na presentasyon sa iOS kung saan ang nai-present na controller ay sumasakop sa buong screen ng device. Ang parent na nilalaman ay ganap na nakatago, na lumilikha ng immersive na epekto at pinagtutuunan ang user sa kasalukuyang gawain.

Bago ang iOS 13, ang Full Screen Cover ay ang tanging istilo ng modal na presentasyon sa iPhone. Lahat ng tawag sa present(_:animated:completion:) ay default na gumamit ng .fullScreen. Simula sa iOS 13, binago ng Apple ang default na istilo sa .automatic, na para sa iPhone ay pumipili ng .pageSheet. Gayunpaman, ang Full Screen Cover ay nananatiling available at ginagamit para sa mga senaryo kung saan mahalaga ang buong pagtutok.

Hindi tulad ng Page Sheet, hindi pinapayagan ng Full Screen Cover ang pakikipag-ugnayan sa parent na nilalaman at hindi ito ipinapakita sa ilalim ng modal window. Hindi maaaring isara ng user ang Full Screen Cover sa pamamagitan ng pag-swipe pababa — para sa pagsasara ay kinakailangan ang programatikong tawag na dismiss(animated:completion:) o isang pindutan ng pagsasara sa screen mismo. Ang pag-uugali na ito ay mahalagang isaalang-alang kapag nagdidisenyo ng UX.

Full Screen Cover vs Page Sheet: paghahambing ng istilo

Page Sheet — ang pangalawang pangunahing istilo ng modal na presentasyon, na lumitaw sa iOS 13. Ang Page Sheet ay ipinapakita bilang isang card na may puwang sa itaas, kung saan makikita ang parent screen sa ilalim. Maaaring isara ng user ang Page Sheet sa pamamagitan ng pag-swipe pababa. Ang Full Screen Cover, sa kabaligtaran, ay nagtatago ng parent na nilalaman at hindi sumusuporta sa pagsasara sa pamamagitan ng pag-swipe.

Ang pagpili sa pagitan ng Full Screen Cover at Page Sheet ay nakadepende sa nilalaman at konteksto. Inirerekomenda ang paggamit ng Full Screen Cover para sa nilalaman na nangangailangan ng buong atensyon: video sa buong screen mode, preview ng larawan, pag-scan ng dokumento. Page Sheet — para sa mga gawain kung saan mahalaga ang konteksto ng parent screen: editing form, pagpili ng opsyon, pagtingin ng detalye.

Implementasyon sa UIKit: UIModalPresentationStyle

UIKit ay nagbibigay ng constant na UIModalPresentationStyle.fullScreen para sa pag-configure ng istilo ng modal na presentasyon. Ang pagtatakda ng property na ito sa UIViewController bago ang tawag na present ay ginagarantiyahan na ang controller ay ipapakita sa buong screen. Kinokontrol din ng controller ang pag-uugali kapag lumitaw ang keyboard at pagproseso ng mga system event.

Konfigurasyon at delegate

Paghawak ng rotasyon at keyboard

Ang Full Screen Cover ay wastong humahawak ng rotasyon ng screen at paglitaw ng keyboard. Sa rotasyon, ang modal controller ay awtomatikong umaangkop sa bagong oryentasyon. UIKeyboardWillShowNotification ay nagpapahintulot na itulak ang nilalaman pataas kapag lumitaw ang keyboard, upang ang mga text field ay manatiling nakikita. Hindi tulad ng Page Sheet, hindi binabago ng Full Screen Cover ang mga sukat nito kapag lumitaw ang keyboard.

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

// Isara
dismiss(animated: true) {
    print("Player naisara")
}

SwiftUI: modifier na .fullScreenCover

SwiftUI ay nagbibigay ng modifier na .fullScreenCover para sa deklaratibong paggawa ng modal na mga window na buong screen. Hindi tulad ng .sheet (Page Sheet), ang .fullScreenCover ay lumilikha ng istilong .fullScreen na may analog na pag-uugali: buong pagtatakip ng nilalaman at kawalan ng pagsasara sa pamamagitan ng pag-swipe.

Paggamit sa binding at data

Ang modifier ay tumatanggap ng binding sa Bool o isang opsyonal na identifiable na bagay. Kapag ang binding ay itinakda sa true, ang SwiftUI ay nag-a-animate ng paglitaw ng buong screen na window. Para sa paglipat ng data, ginagamit ang parameter na onDismiss at closure na may nilalaman. Ang environment value na \.dismiss ay nagpapahintulot na isara ang modal window mula sa loob.

Full Screen Cover vs Sheet

Ang pagpili sa pagitan ng .fullScreenCover at .sheet sa SwiftUI ay analog sa UIKit: .fullScreenCover para sa immersive na nilalaman, .sheet para sa mga card. SwiftUI ay awtomatikong pumipili ng tamang pag-uugali ng pagsasara: ang .sheet ay maaaring isara sa pamamagitan ng pag-swipe, .fullScreenCover — programatiko lamang. Ang mga modifier ay maaaring pagsamahin sa parehong View hierarchy.

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

    var body: some View {
        Button("Buksan ang camera") {
            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("Kuhanan") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Custom na animasyon at transition

Full Screen Cover ay sumusuporta sa custom na animasyon sa pamamagitan ng UIModalTransitionStyle sa UIKit at custom na transition sa SwiftUI. Mga istilong standard: .coverVertical (mula sa ibaba pataas), .crossDissolve (untia-ting paglitaw), .flipHorizontal (pag-flip) at .partialCurl (epekto ng pahina).

UIKit: UIViewControllerAnimatedTransitioning

Para sa ganap na custom na animasyon, ipatupad ang protocol na UIViewControllerAnimatedTransitioning. Ito ay nagbibigay-daan upang tukuyin ang tagal ng animasyon at ang transition mismo sa pamamagitan ng method na animateTransition(using:). Ang controller ng animasyon ay itinatalaga sa pamamagitan ng delegate na UINavigationControllerDelegate o UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

Sa SwiftUI, ang custom na transition para sa .fullScreenCover ay ginagawa sa pamamagitan ng matchedGeometryEffect. Ang modifier na ito ay nag-a-animate ng paglipat ng isang elemento mula sa parent View patungo sa buong screen na window. Halimbawa, kapag nag-click sa isang thumbnail ng larawan, ito ay maayos na nagbubukas sa buong screen, na lumilikha ng epekto ng pagpapatuloy. Ang MatchedGeometryEffect ay gumagana sa id at namespace, na nag-uugnay sa elemento sa source at target na posisyon.

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

Kailan gagamitin ang Full Screen Cover?

Full Screen Cover ay inirerekomenda para sa mga senaryo kung saan ang nilalaman ay dapat sumakop sa buong screen nang walang pagkagambala mula sa parent interface. Ang Apple HIG ay nagtatangi ng tatlong pangunahing kategorya: nilalaman ng media, mga tool sa paggawa ng nilalaman, at pansamantalang system interface.

Media at libangan

Mga video player, pagtingin ng larawan, pagbabasa ng PDF at komiks — tipikal na mga halimbawa ng paggamit ng Full Screen Cover. AVPlayerViewController sa iOS ay awtomatikong gumagamit ng buong screen mode kapag lumilipat sa landscape. Ang mga photo editor tulad ng Adobe Lightroom ay nagbubukas ng buong screen na editor sa ibabaw ng library ng larawan.

Mga tool sa paggawa ng nilalaman

Camera, document scanner, pag-record ng boses — mga gawain na nangangailangan ng buong atensyon ng user. UIImagePickerController hanggang iOS 14 ay gumamit ng Full Screen Cover para sa camera. Simula sa iOS 14, ang system picker ay gumagamit ng Page Sheet, ngunit ang developer ay maaaring pilitin ang .fullScreen para sa custom na camera.

Ano ang dapat iwasan

Huwag gamitin ang Full Screen Cover para sa: registration form (mas gusto ang Page Sheet), mga screen na may text input kung saan mahalaga ang konteksto ng parent page, at sunud-sunod na nabigasyon sa loob ng modal window. Material Design ay nagrerekomenda rin na iwasan ang pag-block ng system back button — sa iOS ito ay pinapayagan, ngunit ang user ay dapat magkaroon ng malinaw na paraan ng pagsasara sa pamamagitan ng UI element.