Safe Area — τι είναι, αποστάσεις από notch και StatusBar

Τι είναι το Safe Area;

Safe Area — είναι μια ορθογώνια περιοχή οθόνης στην οποία το περιεχόμενο είναι εγγυημένο ότι δεν καλύπτεται από στοιχεία υλικού και λογισμικού του συστήματος: η εγκοπή κάμερας (notch), το Dynamic Island, η γραμμή κατάστασης (StatusBar), ο δείκτης πλοήγησης χειρονομιών (Home Indicator), οι στρογγυλεμένες γωνίες οθόνης και το πλαίσιο πλοήγησης. Τα όρια του Safe Area αλλάζουν δυναμικά κατά την περιστροφή της συσκευής, την κλήση πληκτρολογίου ή την εκκίνηση Split View. Σύμφωνα με το Apple Human Interface Guidelines (2025), η αγνόηση του Safe Area θεωρείται σφάλμα σχεδιασμού και μπορεί να οδηγήσει σε απόρριψη της εφαρμογής κατά την αναθεώρηση.

Γιατί χρειάζεται το Safe Area

Safe Area λύνει το πρόβλημα κατακερματισμού οθονών στο οικοσύστημα κινητών. Πριν από το iPhone X, όλα τα iPhone είχαν ορθογώνια οθόνη με τις ίδιες αναλογίες. Με την εμφάνιση του notch, ο αριθμός των παραλλαγών οθόνης αυξήθηκε σε 20+ — διαφορετικά μεγέθη εγκοπών, Dynamic Island, στρογγυλοποιήσεις, δείκτες. Το Safe Area αφαιρεί τον προγραμματιστή από αυτές τις διαφορές, παρέχοντας ένα ενιαίο API για προσαρμοστικές αποστάσεις. Σύμφωνα με το Apple Developer (2025), το iOS εφαρμόζει αυτόματα το Safe Area για την προβολή ρίζας, αλλά για UICollectionView και UIScrollView απαιτείται χειροκίνητη διαμόρφωση.

Safe Area στο iOS: SafeAreaLayoutGuide και SwiftUI

Στο iOS το Safe Area υλοποιείται μέσω του SafeAreaLayoutGuide στο UIKit και του τροποποιητή safeAreaInset στο SwiftUI. Το SafeAreaLayoutGuide είναι ένας οδηγός διάταξης που προστίθεται σε κάθε UIView και ορίζει το ορθογώνιο ελεύθερο από στοιχεία συστήματος. Στο Interface Builder το Safe Area εμφανίζεται ως μπλε περιοχή. Το SwiftUI εφαρμόζει το Safe Area αυτόματα για τους περισσότερους περιέκτες, αλλά επιτρέπει την αγνόησή του μέσω .ignoresSafeArea().

// UIKit: SafeAreaLayoutGuide
let safeGuide = view.safeAreaLayoutGuide
button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    button.topAnchor.constraint(
        equalTo: safeGuide.topAnchor),
    button.leadingAnchor.constraint(
        equalTo: safeGuide.leadingAnchor),
    button.trailingAnchor.constraint(
        equalTo: safeGuide.trailingAnchor),
])

SafeAreaLayoutGuide στο UIKit ορίζει τέσσερα anchor — top, bottom, leading, trailing — που λαμβάνουν αυτόματα υπόψη το notch, StatusBar και Home Indicator. Αυτή η προσέγγιση λειτουργεί σε όλες τις συσκευές iOS, ξεκινώντας από iOS 11. Στο SwiftUI το ίδιο αποτέλεσμα επιτυγχάνεται μέσω του τροποποιητή περιεχομένου μέσα σε NavigationStack ή VStack — το SwiftUI εφαρμόζει αυτόματα το Safe Area Insets.

// SwiftUI: safeAreaInset και ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Περιεχόμενο στο Safe Area")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("Γραμμή στο κάτω μέρος της οθόνης")
        .padding()
        .background(.thinMaterial)
}

Στο SwiftUI .ignoresSafeArea() επιτρέπει στο φόντο να εκτείνεται πέρα από το Safe Area, και το .safeAreaInset(edge:) προσθέτει ένα προσαρμοσμένο πλαίσιο που μειώνει το Safe Area από την καθορισμένη πλευρά. Αυτό είναι το τυπικό μοτίβο για πλαίσια πλοήγησης, γραμμές εργαλείων και διαφημιστικά banners.

Safe Area στο Android: WindowInsets και System Bars

Στο Android το Safe Area υλοποιείται μέσω του WindowInsets (API 30+) και του WindowInsetsCompat (βιβλιοθήκη AndroidX). Το WindowInsets παρέχει αποστάσεις για Status Bar, Navigation Bar, IME (πληκτρολόγιο) και χειρονομίες συστήματος. Από το Android 10 (API 29), η Google συνιστά τη χρήση του WindowInsetsCompat.getInsets() με τύπο WindowInsetsCompat.Type.systemBars() για τη λήψη ενός ενιαίου συνόλου αποστάσεων για όλα τα στοιχεία συστήματος.

// Android: WindowInsets (Kotlin)
class MainActivity : AppCompatActivity() {
    override fun onCreate(
        savedInstanceState: Bundle?
    ) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        ViewCompat.setOnApplyWindowInsetsListener(
            findViewById(R.id.main_content)
        ) { view, insets ->
            val systemBars = insets.getInsets(
                WindowInsetsCompat.Type.systemBars()
            )
            view.setPadding(
                systemBars.left,
                systemBars.top,
                systemBars.right,
                systemBars.bottom
            )
            ViewCompat.ON_APPLY_WINDOW_INSETS_LISTENER
        }
    }
}

Σε αυτό το παράδειγμα το WindowInsets επιστρέφει αποστάσεις για όλες τις γραμμές συστήματος — Status Bar πάνω, Navigation Bar κάτω. Το setOnApplyWindowInsetsListener καλείται κάθε φορά που αλλάζουν τα insets (περιστροφή, κλήση πληκτρολογίου). Η μέθοδος systemBars() συνδυάζει τη γραμμή κατάστασης, γραμμή πλοήγησης και γραμμή προσαρμογής σε ένα σύνολο, απλοποιώντας τον κώδικα.

Edge-to-Edge στο Android

Από το Android 15, η Google απαιτεί edge-to-edge εμφάνιση για όλες τις εφαρμογές που στοχεύουν το νέο API. Αυτό σημαίνει ότι η εφαρμογή σχεδιάζεται κάτω από τις γραμμές συστήματος και το Safe Area εφαρμόζεται μέσω handleWindowInsets ή WindowInsetController. Σύμφωνα με το Android Developer Blog (2025), το 68% των εφαρμογών έχουν ήδη μεταβεί σε edge-to-edge, βελτιώνοντας την οπτική αντίληψη σε συσκευές με μεγάλες οθόνες.

Safe Area, Padding και Insets: ποια είναι η διαφορά

Safe Area, Padding και Insets — συναφείς αλλά διαφορετικές έννοιες. Το Safe Area είναι η περιοχή οθόνης που είναι εγγυημένα ελεύθερη από στοιχεία συστήματος. Το Padding είναι η εσωτερική απόσταση ενός στοιχείου από τα όριά του. Τα Insets είναι οι συγκεκριμένες αριθμητικές τιμές αποστάσεων που επιστρέφονται από το API Safe Area. Σύμφωνα με το Apple Tech Notes (2025), η σύγχυση μεταξύ Safe Area και Padding είναι η αιτία του 40% των προβλημάτων προσαρμοστικότητας στα καταστήματα εφαρμογών.

Παραδείγματα υλοποίησης Safe Area με κώδικα

Ας εξετάσουμε τυπικά σενάρια: Safe Area στο UIKit για οριζόντιο προσανατολισμό με notch, Safe Area στο SwiftUI με προσαρμοσμένο πλαίσιο, Safe Area στο Android Compose. Παράδειγμα για iOS UIKit — τοποθέτηση συλλογής εντός Safe Area σε iPhone με Dynamic Island. Παράδειγμα για Jetpack Compose — χρήση WindowInsets στο Material 3.

// Jetpack Compose: αποστάσεις από Safe Area
@OptIn(ExperimentalMaterial3Api::class)
fun SafeAreaScreen() {
    val systemBars = with(
        LocalDensity.current
    ) {
        val insets = WindowInsets
            .systemBars
            .getAsPaddingValues()
        PaddingValues(
            top = insets.calculateTopPadding(),
            bottom = insets.calculateBottomPadding()
        )
    }
    Scaffold(
        contentWindowInsets = WindowInsets(
            top = systemBars.computeTopPadding(),
            bottom = systemBars.computeBottomPadding()
        )
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
        ) {
            Text("Περιεχόμενο στο Safe Area")
        }
    }
}

Στο Jetpack Compose το Scaffold λαμβάνει αυτόματα υπόψη το WindowInsets μέσω της παραμέτρου contentWindowInsets. Το InnerPadding μεταβιβάζεται στο content και εφαρμόζεται σε εσωτερικά στοιχεία. Το Column με τροποποιητή padding(innerPadding) εγγυάται ότι το κείμενο δεν θα πέσει κάτω από τις γραμμές συστήματος.

Συνήθη λάθη κατά την εργασία με το Safe Area

Σύμφωνα με ανάλυση του App Store Review από την Apple (2025), πέντε πιο συνηθισμένα λάθη: αγνόηση του Safe Area σε οριζόντιο προσανατολισμό, χρήση σκληρά κωδικοποιημένων αποστάσεων αντί για SafeAreaLayoutGuide, εσφαλμένη επεξεργασία Safe Area σε UIScrollView, ξεχασμένες αποστάσεις σε modal παρουσιάσεις και έλλειψη προσαρμογής για Dynamic Island. Σκληρά κωδικοποιημένες αποστάσεις (hardcoded 20px πάνω) — το πιο συνηθισμένο λάθος: σε iPhone 14 Pro αυτά τα 20px μετατρέπονται σε 59px και το περιεχόμενο κόβεται.

• Αγνόηση οριζόντιου προσανατολισμού — στον οριζόντιο προσανατολισμό το Safe Area έχει διαφορετικές αποστάσεις: ο Home Indicator μετακινείται στη δεξιά πλευρά και η πάνω απόσταση μειώνεται.
• Σκληρά κωδικοποιημένες αποστάσεις — οι τιμές 20px ή 44px είναι κατάλληλες μόνο για παλιά iPhone χωρίς εγκοπή. Σε σύγχρονες συσκευές οι αποστάσεις διαφέρουν 2-3 φορές.
• ScrollView και Safe Area — το contentInsetAdjustmentBehavior στο UIScrollView πρέπει να ρυθμιστεί σε .always, διαφορετικά το περιεχόμενο θα κρυφτεί κάτω από τις γραμμές συστήματος.