Safe Area — mi ez, távolságok a notch-tól és StatusBar-tól

Mi az a Safe Area?

Safe Area — a képernyő azon téglalap alakú területe, ahol a tartalom garantáltan nem fedődik át a hardveres és szoftveres rendszerelemekkel: a kamera kivágásával (notch), Dynamic Island-del, állapotsorral (StatusBar), gesztus navigációs indikátorral (Home Indicator), a kijelző lekerekített sarkaival és a navigációs panellel. A Safe Area határai dinamikusan változnak az eszköz elforgatásakor, a billentyűzet előhívásakor vagy a Split View indításakor. Az Apple Human Interface Guidelines (2025) szerint a Safe Area figyelmen kívül hagyása tervezési hibának minősül, és az alkalmazás elutasításához vezethet a felülvizsgálat során.

Miért van szükség a Safe Area-ra

Safe Area megoldja a képernyők töredezettségének problémáját a mobil ökoszisztémában. Az iPhone X előtt minden iPhone téglalap alakú kijelzővel rendelkezett azonos arányokkal. A notch megjelenésével a képernyőváltozatok száma 20+-ra nőtt — különböző méretű kivágások, Dynamic Island, lekerekítések, indikátorok. A Safe Area elvonatkoztatja a fejlesztőt ezektől a különbségektől, egységes API-t biztosítva az adaptív távolságokhoz. Az Apple Developer (2025) szerint az iOS automatikusan alkalmazza a Safe Area-t a gyökér nézethez, de az UICollectionView és UIScrollView esetében kézi konfiguráció szükséges.

Safe Area iOS rendszerben: SafeAreaLayoutGuide és SwiftUI

iOS rendszerben a Safe Area a UIKit SafeAreaLayoutGuide és a SwiftUI safeAreaInset módosítója segítségével van megvalósítva. A SafeAreaLayoutGuide egy elrendezési útmutató, amely minden UIView-hez hozzáadódik és meghatározza a rendszerelemektől mentes téglalapot. Az Interface Builder-ben a Safe Area kék területként jelenik meg. A SwiftUI automatikusan alkalmazza a Safe Area-t a legtöbb konténerre, de lehetővé teszi annak figyelmen kívül hagyását az .ignoresSafeArea() segítségével.

// 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 a UIKit-ben négy anchor-t határoz meg — top, bottom, leading, trailing — amelyek automatikusan figyelembe veszik a notch-ot, StatusBar-t és Home Indicator-t. Ez a megközelítés minden iOS-eszközön működik, iOS 11-től kezdve. SwiftUI-ban ugyanez a hatás a NavigationStack vagy VStack tartalmának módosítójával érhető el — a SwiftUI automatikusan alkalmazza a Safe Area Insets-et.

// SwiftUI: safeAreaInset és ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Tartalom a Safe Area-ban")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("Sáv a képernyő alján")
        .padding()
        .background(.thinMaterial)
}

SwiftUI-ban az .ignoresSafeArea() lehetővé teszi a háttér számára, hogy túlnyúljon a Safe Area-n, a .safeAreaInset(edge:) pedig egy egyéni panelt ad hozzá, amely csökkenti a Safe Area-t a megadott oldalon. Ez a szabványos minta navigációs panelekhez, eszköztárakhoz és hirdetési bannerekhez.

Safe Area Android rendszerben: WindowInsets és System Bars

Android rendszerben a Safe Area a WindowInsets (API 30+) és a WindowInsetsCompat (AndroidX könyvtár) segítségével van megvalósítva. A WindowInsets távolságokat biztosít a Status Bar, Navigation Bar, IME (billentyűzet) és rendszergesztusok számára. Android 10-től (API 29) kezdve a Google a WindowInsetsCompat.getInsets() használatát javasolja a WindowInsetsCompat.Type.systemBars() típussal az egységes távolságkészlet eléréséhez az összes rendszerelem számára.

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

Ebben a példában a WindowInsets távolságokat ad vissza az összes rendszersávhoz — Status Bar fent, Navigation Bar lent. A setOnApplyWindowInsetsListener minden alkalommal meghívódik, amikor az insets megváltozik (elforgatás, billentyűzethívás). A systemBars() metódus egyesíti az állapotsort, navigációs sávot és testreszabási sávot egyetlen készletbe, egyszerűsítve a kódot.

Edge-to-Edge Android rendszerben

Android 15-től kezdve a Google edge-to-edge megjelenítést ír elő minden olyan alkalmazás számára, amely az új API-t célozza. Ez azt jelenti, hogy az alkalmazás a rendszersávok alá rajzolódik, és a Safe Area a handleWindowInsets vagy WindowInsetController segítségével kerül alkalmazásra. Az Android Developer Blog (2025) szerint az alkalmazások 68%-a már áttért az edge-to-edge-re, ami javítja a vizuális érzékelést a nagy képernyős eszközökön.

Safe Area, Padding és Insets: mi a különbség

Safe Area, Padding és Insets — kapcsolódó, de különböző fogalmak. A Safe Area a képernyő garantáltan rendszerelemektől mentes területe. A Padding egy elem belső távolsága a határaitól. Az Insets a Safe Area API által visszaadott konkrét numerikus távolságértékek. Az Apple Tech Notes (2025) szerint a Safe Area és Padding összekeverése az alkalmazásboltokban az adaptivitási problémák 40%-ának az oka.

Safe Area megvalósítási példák kóddal

Vizsgáljuk meg a tipikus forgatókönyveket: Safe Area UIKit-ban vízszintes tájoláshoz notch-csal, Safe Area SwiftUI-ban egyéni panellel, Safe Area Android Compose-ban. Példa iOS UIKit-hoz — gyűjtemény elhelyezése a Safe Area-n belül iPhone-on Dynamic Island-del. Példa Jetpack Compose-hoz — WindowInsets használata Material 3-ban.

// Jetpack Compose: távolságok a Safe Area-tól
@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("Tartalom a Safe Area-ban")
        }
    }
}

Jetpack Compose-ban a Scaffold automatikusan figyelembe veszi a WindowInsets-et a contentWindowInsets paraméteren keresztül. Az InnerPadding átadódik a content-nek és alkalmazódik a belső elemekre. A padding(innerPadding) módosítóval ellátott Column garantálja, hogy a szöveg ne kerüljön a rendszersávok alá.

Gyakori hibák a Safe Area használatakor

Az Apple App Store Review (2025) elemzése szerint az öt leggyakoribb hiba: a Safe Area figyelmen kívül hagyása vízszintes tájolásban, mereven kódolt távolságok használata a SafeAreaLayoutGuide helyett, a Safe Area helytelen feldolgozása UIScrollView-ban, elfelejtett távolságok modális prezentációkban és a Dynamic Island-hez való alkalmazkodás hiánya. Mereven kódolt távolságok (hardcoded 20px felül) — a leggyakoribb hiba: iPhone 14 Pro-n ez a 20px 59px-re változik, és a tartalom levágódik.

• Vízszintes tájolás figyelmen kívül hagyása — vízszintes tájolásban a Safe Area eltérő távolságokkal rendelkezik: a Home Indicator jobb oldalra mozdul, a felső távolság pedig csökken.
• Mereven kódolt távolságok — a 20px vagy 44px értékek csak a régi, kivágás nélküli iPhone-okhoz megfelelőek. A modern eszközökön a távolságok 2-3-szorosan eltérnek.
• ScrollView és Safe Area — a contentInsetAdjustmentBehavior-t UIScrollView-ban .always értékre kell állítani, különben a tartalom elrejtőzik a rendszersávok alatt.