Safe Area — ce este, distanțe de la notch și StatusBar

Ce este Safe Area?

Safe Area — este o zonă dreptunghiulară a ecranului în care conținutul este garantat că nu este acoperit de elementele hardware și software ale sistemului: decupajul camerei (notch), Dynamic Island, bara de stare (StatusBar), indicatorul de navigare prin gesturi (Home Indicator), colțurile rotunjite ale ecranului și panoul de navigare. Limitele Safe Area se schimbă dinamic la rotirea dispozitivului, apelarea tastaturii sau lansarea Split View. Conform Apple Human Interface Guidelines (2025), ignorarea Safe Area este considerată o eroare de design și poate duce la respingerea aplicației la revizuire.

De ce este necesară Safe Area

Safe Area rezolvă problema fragmentării ecranelor în ecosistemul mobil. Înainte de iPhone X, toate iPhone-urile aveau un ecran dreptunghiular cu aceleași proporții. Odată cu apariția notch, numărul variantelor de ecrane a crescut la 20+ — diferite dimensiuni de decupaje, Dynamic Island, rotunjiri, indicatoare. Safe Area abstractizează dezvoltatorul de aceste diferențe, oferind o API unică pentru distanțe adaptive. Conform Apple Developer (2025), iOS aplică automat Safe Area pentru vizualizarea rădăcină, dar pentru UICollectionView și UIScrollView este necesară configurarea manuală.

Safe Area în iOS: SafeAreaLayoutGuide și SwiftUI

În iOS Safe Area este implementată prin SafeAreaLayoutGuide în UIKit și modificatorul safeAreaInset în SwiftUI. SafeAreaLayoutGuide este un ghid de layout care este adăugat la fiecare UIView și definește dreptunghiul liber de elemente ale sistemului. În Interface Builder Safe Area este afișată ca o zonă albastră. SwiftUI aplică Safe Area automat pentru majoritatea containerelor, dar permite ignorarea ei prin .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 în UIKit definește patru ancore — top, bottom, leading, trailing — care iau automat în considerare notch, StatusBar și Home Indicator. Această abordare funcționează pe toate dispozitivele iOS, începând cu iOS 11. În SwiftUI același efect se obține prin modificatorul de conținut în interiorul NavigationStack sau VStack — SwiftUI aplică automat Safe Area Insets.

// SwiftUI: safeAreaInset și ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Conținut în Safe Area")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("Bara de jos a ecranului")
        .padding()
        .background(.thinMaterial)
}

În SwiftUI .ignoresSafeArea() permite fundalului să se extindă dincolo de Safe Area, iar .safeAreaInset(edge:) adaugă un panou personalizat care reduce Safe Area din partea specificată. Acesta este modelul standard pentru panouri de navigare, bare de instrumente și bannere publicitare.

Safe Area în Android: WindowInsets și System Bars

În Android Safe Area este implementată prin WindowInsets (API 30+) și WindowInsetsCompat (biblioteca AndroidX). WindowInsets oferă distanțe pentru Status Bar, Navigation Bar, IME (tastatură) și gesturi de sistem. Începând cu Android 10 (API 29), Google recomandă utilizarea WindowInsetsCompat.getInsets() cu tipul WindowInsetsCompat.Type.systemBars() pentru a obține un set unitar de distanțe pentru toate elementele sistemului.

// 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
        }
    }
}

În acest exemplu WindowInsets returnează distanțe pentru toate barele de sistem — Status Bar sus, Navigation Bar jos. setOnApplyWindowInsetsListener este apelat de fiecare dată când insets se schimbă (rotire, apelare tastatură). Metoda systemBars() combină bara de stare, bara de navigare și bara de personalizare într-un singur set, simplificând codul.

Edge-to-Edge în Android

Începând cu Android 15, Google solicită edge-to-edge pentru toate aplicațiile care vizează noul API. Aceasta înseamnă că aplicația se desenează sub barele de sistem, iar Safe Area se aplică prin handleWindowInsets sau WindowInsetController. Conform Android Developer Blog (2025), 68% dintre aplicații au trecut deja la edge-to-edge, ceea ce îmbunătățește percepția vizuală pe dispozitivele cu ecrane mari.

Safe Area, Padding și Insets: care este diferența

Safe Area, Padding și Insets — concepte conexe, dar diferite. Safe Area este zona ecranului garantată liberă de elemente ale sistemului. Padding este distanța interioară a unui element față de marginile sale. Insets sunt valorile numerice specifice ale distanțelor returnate de API-ul Safe Area. Conform Apple Tech Notes (2025), confuzia între Safe Area și Padding este cauza a 40% din problemele de adaptabilitate în magazinele de aplicații.

Exemple de implementare Safe Area cu cod

Să analizăm scenariile tipice: Safe Area în UIKit pentru orientare orizontală cu notch, Safe Area în SwiftUI cu panou personalizat, Safe Area în Android Compose. Exemplu pentru iOS UIKit — plasarea colecției în interiorul Safe Area pe iPhone cu Dynamic Island. Exemplu pentru Jetpack Compose — utilizarea WindowInsets în Material 3.

// Jetpack Compose: distanțe de la 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("Conținut în Safe Area")
        }
    }
}

În Jetpack Compose Scaffold ia automat în considerare WindowInsets prin parametrul contentWindowInsets. InnerPadding este transmis către content și aplicat elementelor interioare. Column cu modificatorul padding(innerPadding) garantează că textul nu va ajunge sub barele de sistem.

Greșeli tipice la lucrul cu Safe Area

Conform analizei App Store Review de la Apple (2025), cinci greșeli frecvente: ignorarea Safe Area în orientare orizontală, utilizarea distanțelor codificate fix în loc de SafeAreaLayoutGuide, procesarea incorectă a Safe Area în UIScrollView, distanțe uitate în prezentări modale și lipsa adaptării pentru Dynamic Island. Distanțe fixe (hardcoded 20px sus) — cea mai frecventă greșeală: pe iPhone 14 Pro acești 20px se transformă în 59px, iar conținutul este tăiat.

• Ignorarea orientării orizontale — în orientarea orizontală Safe Area are distanțe diferite: Home Indicator se mută pe partea dreaptă, iar distanța de sus se reduce.
• Distanțe fixe — valorile 20px sau 44px sunt potrivite doar pentru iPhone-urile vechi fără decupaj. Pe dispozitivele moderne distanțele diferă de 2-3 ori.
• ScrollView și Safe Area — contentInsetAdjustmentBehavior în UIScrollView trebuie setat pe .always, altfel conținutul va fi ascuns sub barele de sistem.