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 και ένα closure με περιεχόμενο. Η τιμή περιβάλλοντος \.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 αυτό επιτρέπεται, αλλά ο χρήστης πρέπει να έχει σαφή τρόπο κλεισίματος μέσω ενός στοιχείου διεπαφής.