Notch — βασικά, προσαρμογή διεπαφής στην εγκοπή οθόνης

Τι είναι το Notch;

Notch (εγκοπή, "φρύδι") — η περιοχή στο πάνω μέρος της οθόνης του smartphone όπου βρίσκονται η μπροστινή κάμερα, το ηχείο ομιλίας, οι αισθητήρες εγγύτητας και φωτισμού, και για iPhone X και νεότερα — η υπέρυθρη κάμερα Face ID, ο προβολέας κουκκίδων και ο φωτιστής (σύστημα TrueDepth camera). Το notch εισήχθη για να αυξήσει τη χρήσιμη επιφάνεια οθόνης διατηρώντας όλους τους απαραίτητους αισθητήρες — αντί για το πάνω πλαίσιο (bezel), η οθόνη επεκτείνεται προς τα πάνω γύρω από την εγκοπή.

Διαστάσεις: το τυπικό notch iPhone έχει πλάτος ~34 mm (~209 pt σε κατακόρυφο προσανατολισμό για μοντέλα 6.1 ιντσών) και ύψος ~5 mm (~30 pt). Στα πλάγια του notch παραμένουν "αυτιά" (ears) — μικρά τμήματα οθόνης δεξιά και αριστερά της εγκοπής. Το δεξί "αυτί" συνήθως δείχνει την ώρα, την ένδειξη μπαταρίας και Wi-Fi· το αριστερό — τον πάροχο και την κατάσταση. Σε οριζόντιο προσανατολισμό, το iOS κρύβει το notch με μια μαύρη γραμμή σε όλο το πλάτος της γραμμής κατάστασης — το περιεχόμενο δεν εμφανίζεται στη ζώνη εγκοπής.

Όχι μόνο iPhone: την ιδέα του notch υιοθέτησαν πολλοί κατασκευαστές Android. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — όλα είχαν εγκοπή. Μερικοί κατασκευαστές προχώρησαν παραπέρα: εγκοπή "σταγόνας" (waterdrop notch), κάμερα punch-hole (τρύπα στην οθόνη), συρόμενη κάμερα (ανασυρόμενη μονάδα). Σύγχρονα Android flagships (Samsung Galaxy S23+, Google Pixel 8 Pro) χρησιμοποιούν punch-hole — μια ελάχιστη τρύπα για την κάμερα στο πάνω μέρος της οθόνης, χωρίς φαρδιά εγκοπή.

Safe Area στο iOS: safeAreaInsets

Safe Area — είναι μια ορθογώνια περιοχή μέσα στο view που είναι εγγυημένα ακάλυπτη από στοιχεία διεπαφής συστήματος: notch, στρογγυλεμένες γωνίες οθόνης (corner radius), Home Indicator, γραμμή καρτελών (tab bar) και γραμμή πλοήγησης (navigation bar). Τα μεγέθη του Safe Area επιστρέφονται μέσω της ιδιότητας UIView.safeAreaInsets — UIEdgeInsets με τιμές top, left, bottom, right. Για iPhone με notch, το πάνω περιθώριο = ~44 pt (κατακόρυφο) ή ~0 pt (οριζόντιο με μαύρη γραμμή).

// Χρήση safeAreaInsets για τοποθέτηση περιεχομένου
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Ανάγνωση περιθωρίων Safe Area
        let safeArea = self.view.safeAreaInsets

        // Καταγραφή τιμών για αποσφαλμάτωση
        print("Πάνω περιθώριο: \(safeArea.top)")    // ~44 pt με notch
        print("Κάτω περιθώριο: \(safeArea.bottom)") // ~34 pt με Home Indicator

        // Τοποθέτηση τίτλου λαμβάνοντας υπόψη το Safe Area
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // Διαχείριση αλλαγών Safe Area (περιστροφή, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Επαναϋπολογισμός διάταξης
    }
}

Auto Layout και Safe Area: στο Interface Builder, χρησιμοποιήστε "Safe Area" ως στόχο anchor αντί για "Superview". Για προγραμματισμένη διάταξη, χρησιμοποιήστε safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). Το iOS ενημερώνει αυτόματα τα safeAreaInsets κατά την περιστροφή της συσκευής, μετάβαση σε Split View στο iPad, εμφάνιση/απόκρυψη πληκτρολογίου και αλλαγή προσανατολισμού. Όλοι οι τυπικοί ελεγκτές UIKit (UINavigationController, UITabBarController) λαμβάνουν ήδη υπόψη το Safe Area. Οι προσαρμοσμένες προβολές και οι ελεγκτές πρέπει να χρησιμοποιούν ρητά τα safeAreaInsets.

Notch στο Android: DisplayCutout και WindowInsets

DisplayCutout — η κλάση Android SDK, που προστέθηκε στο API 28 (Android 9.0), η οποία περιγράφει την περιοχή εγκοπής στην οθόνη. Μπορεί να ληφθεί μέσω WindowInsets.displayCutout(). Η κλάση επιστρέφει boundingBoxList — μια λίστα ορθογωνίων που περιγράφουν την(τις) εγκοπή(ές) και safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — ελάχιστα περιθώρια για ασφαλή εμφάνιση περιεχομένου. Το Android υποστηρίζει διάφορες διαμορφώσεις εγκοπών: κεντρική (όπως iPhone), πλευρική (κάμερα στη γωνία), διπλή (δύο κάμερες), punch-hole.

// Προσαρμογή διεπαφής σε DisplayCutout σε Activity
class NotchAwareActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Επιτρέπουμε εμφάνιση περιεχομένου στη ζώνη εγκοπής (αν χρειάζεται)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
        }
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)

        // Λήψη DisplayCutout μέσω WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Ορισμός περιθωρίου για πάνω περιεχόμενο
            headerView.updatePadding(top = safeTop)
        }
    }
}

Λειτουργίες εμφάνισης (layoutInDisplayCutoutMode): ALWAYS — το περιεχόμενο μπορεί να εμφανίζεται στη ζώνη εγκοπής (για εφαρμογές πλήρους οθόνης, βίντεο, παιχνίδια)؛ NEVER — το περιεχόμενο δεν καλύπτει ποτέ την εγκοπή, το σύστημα προσθέτει περιθώριο؛ SHORT_EDGES — το περιεχόμενο εμφανίζεται στη ζώνη εγκοπής μόνο στη κοντή πλευρά (για κατακόρυφες εφαρμογές με notch επάνω). Προεπιλεγμένη λειτουργία — SHORT_EDGES (από Android 12). Για κάμερα punch-hole, η εγκοπή είναι μικρότερη και πολλές εφαρμογές χρησιμοποιούν ALWAYS για μέγιστη χρήση οθόνης.

Εξέλιξη του Notch: από iPhone X στο Dynamic Island

iPhone X (2017) — το πρώτο smartphone Apple με notch. Η εγκοπή περιείχε την κάμερα TrueDepth για Face ID — ένα σύστημα αποτελούμενο από υπέρυθρη κάμερα, προβολέα κουκκίδων (Dot Projector) και φωτιστή (Flood Illuminator). Διαστάσεις εγκοπής: ~34 mm × 5 mm. Στο iOS 11, η Apple εισήγαγε το Safe Area για προσαρμογή εφαρμογών. Οι χρήστες χωρίστηκαν: άλλοι αποδέχθηκαν το notch ως αναγκαιότητα για το Face ID, άλλοι το επέκριναν για την "κομμένη" οθόνη.

iPhone 13 (2021) — η Apple μείωσε το notch κατά 20% μετακινώντας το ηχείο προς το πάνω πλαίσιο οθόνης. Αυτό ήταν το τελευταίο κλασικό notch. Τα iPhone 14 και 14 Plus (2022) διατήρησαν το μειωμένο notch. Τα iPhone 14 Pro και Pro Max εισήγαγαν το Dynamic Island — μια ελλειψοειδή εγκοπή που συνδυάζει την κάμερα και τους αισθητήρες Face ID, αλλάζει δυναμικά σχήμα και εμφανίζει ειδοποιήσεις συστήματος (χρονοδιακόπτης, μουσική, σύνδεση AirPods). Το Dynamic Island έγινε πλατφόρμα λογισμικού με δικό της API (ActivityKit, Live Activities).

Dynamic Island — δεν είναι απλά μια εγκοπή, αλλά ένα διαδραστικό στοιχείο διεπαφής. Κατά τη σύνδεση AirPods, το νησί επεκτείνεται δείχνοντας εικονίδιο και κατάσταση. Η κλήση ταξί (Uber) εμφανίζει τον χρόνο άφιξης. Ο χρονοδιακόπτης είναι ορατός στο νησί κατά την ελαχιστοποίηση της εφαρμογής. Το Dynamic Island είναι διαθέσιμο σε iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area για Dynamic Island: πάνω περιθώριο = 54 pt (10 pt περισσότερο από το κλασικό notch).

Κανόνες σχεδιασμού για διεπαφές με εγκοπή

Ποτέ μην κρύβετε περιεχόμενο πίσω από το notch — χρησιμοποιήστε Safe Area ή DisplayCutout για αυτόματο υπολογισμό περιθωρίων. Μην ορίζετε σταθερές τιμές περιθωρίων (π.χ. 44 pt) — διαφέρουν σε διαφορετικές συσκευές και προσανατολισμούς. Χρησιμοποιείτε πάντα τα API συστήματος για ανάγνωση του Safe Area: safeAreaInsets στο iOS, windowInsets.displayCutout στο Android. Αυτό εγγυάται σωστή εμφάνιση σε όλες τις συσκευές: iPhone SE (χωρίς notch), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (χωρίς notch, αλλά με Home Indicator).

Οριζόντιος προσανατολισμός — ιδιαίτερη ζώνη κινδύνου. Σε iPhone με notch σε οριζόντια λειτουργία, το iOS προσθέτει αυτόματα μια μαύρη γραμμή σε όλο το πλάτος της γραμμής κατάστασης (το περιεχόμενο αριστερά και δεξιά του notch δεν εμφανίζεται). Αυτό γίνεται από το σύστημα με Safe Area inset = 0 top, αλλά αυξημένα left/right insets (~47 pt). Μην προσπαθήσετε να απενεργοποιήσετε αυτή τη συμπεριφορά — το App Store θα απορρίψει την εφαρμογή που χρησιμοποιεί "απαγορευμένες" ζώνες οθόνης για περιεχόμενο σε οριζόντιο προσανατολισμό. Για βίντεο πλήρους οθόνης, χρησιμοποιήστε το AVPlayerViewController, που τοποθετεί αυτόματα τα χειριστήρια εκτός ζώνης notch.

Φόντο και γραμμή κατάστασης: εάν χρησιμοποιείτε προσαρμοσμένο χρώμα φόντου, πρέπει να γεμίζει ολόκληρη την περιοχή οθόνης, συμπεριλαμβανομένης της ζώνης πίσω από το notch. Μην σχεδιάζετε περιεχόμενο πάνω από τη γραμμή κατάστασης — χρησιμοποιήστε το Safe Area. Για σκοτεινή λειτουργία, βεβαιωθείτε ότι η γραμμή κατάστασης είναι ευανάγνωστη: ορίστε το preferredStatusBarStyle σύμφωνα με το στυλ του φόντου σας (.default για σκοτεινό κείμενο σε ανοιχτό φόντο, .lightContent για ανοιχτό κείμενο σε σκοτεινό φόντο).

Δοκιμή προσαρμογής στο Notch

Προσομοιωτές και εξομοιωτές: Το Xcode παρέχει προσομοιωτές όλων των μοντέλων iPhone με notch (iPhone X–14) και Dynamic Island (iPhone 14 Pro–15). Το Android Studio παρέχει εξομοιωτές με διάφορες διαμορφώσεις εγκοπών (Google Pixel 3 XL, προσαρμοσμένος εξομοιωτής με cutout). Δοκιμάστε σε κατακόρυφο και οριζόντιο προσανατολισμό, με και χωρίς πληκτρολόγιο, σε Split View (iPad). Ελέγξτε ότι όλο το περιεχόμενο είναι ευανάγνωστο και ακάλυπτο.

Πραγματικές συσκευές: το notch στον προσομοιωτή και σε πραγματική συσκευή μπορεί να διαφέρει. Για παράδειγμα, ο προσομοιωτής iPhone 14 Pro εμφανίζει Dynamic Island, αλλά χωρίς πραγματική διαδραστικότητα (Live Activities). Στο Android, η κάμερα punch-hole μπορεί να μην εξομοιώνεται με ακρίβεια. Ο καλύτερος τρόπος είναι η δοκιμή σε πραγματικές συσκευές. Ελάχιστο σύνολο: iPhone SE (χωρίς notch), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android με punch-hole, Android με οθόνη waterfall (Samsung Edge).

Εργαλεία: για iOS, χρησιμοποιήστε το Xcode View Debugger με την επιλογή "Show Safe Area Insets" — θα δείξει οπτικά τα όρια του Safe Area. Για Android — Layout Inspector στο Android Studio, που εμφανίζει WindowInsets και DisplayCutout στον πίνακα Attributes. Επίσης, το Accessibility Inspector είναι χρήσιμο για να ελέγξετε ότι όλα τα στοιχεία εντός του Safe Area είναι προσβάσιμα για VoiceOver/TalkBack. Μην ξεχνάτε το iPad χωρίς notch, αλλά με Home Indicator (κάτω περιθώριο ~21 pt) και στρογγυλεμένες γωνίες.