Safe Area — vad är det, avstånd från notch och StatusBar

Vad är Safe Area?

Safe Area — är ett rektangulärt skärmområde där innehållet garanterat inte täcks av hårdvaru- och mjukvarusystemelement: kameraurtaget (notch), Dynamic Island, statusfältet (StatusBar), navigeringsindikatorn för gester (Home Indicator), rundade skärmhörn och navigeringspanelen. Safe Areas gränser ändras dynamiskt vid rotation av enheten, anrop av tangentbord eller start av Split View. Enligt Apple Human Interface Guidelines (2025) anses ignorering av Safe Area vara ett designfel och kan leda till att appen avvisas vid granskning.

Varför Safe Area behövs

Safe Area löser problemet med skärmfragmentering i mobila ekosystemet. Före iPhone X hade alla iPhone rektangulära skärmar med samma proportioner. Med notch kom antalet skärmvarianter att öka till 20+ — olika storlekar på urtag, Dynamic Island, rundningar, indikatorer. Safe Area abstraherar utvecklaren från dessa skillnader genom att tillhandahålla ett enhetligt API för adaptiva avstånd. Enligt Apple Developer (2025) tillämpar iOS automatiskt Safe Area för rotvyn, men för UICollectionView och UIScrollView krävs manuell konfiguration.

Safe Area i iOS: SafeAreaLayoutGuide och SwiftUI

I iOS implementeras Safe Area via SafeAreaLayoutGuide i UIKit och modifieraren safeAreaInset i SwiftUI. SafeAreaLayoutGuide är en layoutguide som läggs till varje UIView och definierar rektangeln fri från systemelement. I Interface Builder visas Safe Area som ett blått område. SwiftUI tillämpar Safe Area automatiskt för de flesta containrar, men tillåter att ignorera den via .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 i UIKit definierar fyra anchor — top, bottom, leading, trailing — som automatiskt tar hänsyn till notch, StatusBar och Home Indicator. Detta tillvägagångssätt fungerar på alla iOS-enheter från och med iOS 11. I SwiftUI uppnås samma effekt via innehållsmodifieraren inuti NavigationStack eller VStack — SwiftUI tillämpar automatiskt Safe Area Insets.

// SwiftUI: safeAreaInset och ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Innehåll i Safe Area")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("Fält längst ner på skärmen")
        .padding()
        .background(.thinMaterial)
}

I SwiftUI tillåter .ignoresSafeArea() bakgrunden att sträcka sig utanför Safe Area, och .safeAreaInset(edge:) lägger till en anpassad panel som minskar Safe Area från den angivna sidan. Detta är standardmönstret för navigeringspaneler, verktygsfält och reklambanners.

Safe Area i Android: WindowInsets och System Bars

I Android implementeras Safe Area via WindowInsets (API 30+) och WindowInsetsCompat (AndroidX-biblioteket). WindowInsets tillhandahåller avstånd för Status Bar, Navigation Bar, IME (tangentbord) och systemgester. Från och med Android 10 (API 29) rekommenderar Google att använda WindowInsetsCompat.getInsets() med typen WindowInsetsCompat.Type.systemBars() för att få en enhetlig uppsättning avstånd för alla systemelement.

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

I detta exempel returnerar WindowInsets avstånd för alla systemfält — Status Bar högst upp, Navigation Bar längst ner. setOnApplyWindowInsetsListener anropas varje gång insets ändras (rotation, tangentbordsanrop). Metoden systemBars() kombinerar statusfältet, navigeringsfältet och anpassningsfältet i en uppsättning, vilket förenklar koden.

Edge-to-Edge i Android

Från och med Android 15 kräver Google edge-to-edge visning för alla appar som riktar sig till det nya API:et. Det innebär att appen ritas under systemfälten och Safe Area tillämpas via handleWindowInsets eller WindowInsetController. Enligt Android Developer Blog (2025) har 68% av apparna redan övergått till edge-to-edge, vilket förbättrar den visuella upplevelsen på enheter med stora skärmar.

Safe Area, Padding och Insets: vad är skillnaden

Safe Area, Padding och Insets — relaterade men olika begrepp. Safe Area är skärmområdet som garanterat är fritt från systemelement. Padding är det inre avståndet för ett element från dess gränser. Insets är de specifika numeriska avståndsvärden som returneras av Safe Area API. Enligt Apple Tech Notes (2025) är förväxling mellan Safe Area och Padding orsaken till 40% av anpassningsproblemen i appbutiker.

Exempel på implementering av Safe Area med kod

Låt oss titta på typiska scenarier: Safe Area i UIKit för horisontell orientering med notch, Safe Area i SwiftUI med anpassad panel, Safe Area i Android Compose. Exempel för iOS UIKit — placering av samling inom Safe Area på iPhone med Dynamic Island. Exempel för Jetpack Compose — användning av WindowInsets i Material 3.

// Jetpack Compose: avstånd från 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("Innehåll i Safe Area")
        }
    }
}

I Jetpack Compose tar Scaffold automatiskt hänsyn till WindowInsets via parametern contentWindowInsets. InnerPadding skickas till content och tillämpas på interna element. Column med modifieraren padding(innerPadding) garanterar att text inte hamnar under systemfälten.

Vanliga misstag vid arbete med Safe Area

Enligt analys av App Store Review från Apple (2025) är de fem vanligaste misstagen: ignorering av Safe Area i horisontell orientering, användning av hårdkodade avstånd istället för SafeAreaLayoutGuide, felaktig hantering av Safe Area i UIScrollView, glömda avstånd i modala presentationer och brist på anpassning för Dynamic Island. Hårdkodade avstånd (hardcoded 20px upptill) — det vanligaste misstaget: på iPhone 14 Pro blir dessa 20px 59px och innehållet kapas.

• Ignorering av horisontell orientering — i horisontell orientering har Safe Area andra avstånd: Home Indicator flyttas till höger sida och det övre avståndet minskar.
• Hårdkodade avstånd — värdena 20px eller 44px passar bara för gamla iPhone utan urtag. På moderna enheter skiljer sig avstånden 2-3 gånger.
• ScrollView och Safe Area — contentInsetAdjustmentBehavior i UIScrollView måste ställas in på .always, annars kommer innehållet att döljas under systemfälten.