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 са наведене стране. Ово је стандардни образац за навигационе панеле, траке са алаткама и рекламне банере.

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 су конкретне нумеричке вредности одступања које враћа Safe Area API. Према 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, заборављена одступања у модалним презентацијама и недостатак адаптације за Dynamic Island. Тврдо кодирана одступања (hardcoded 20px горе) — најчешћа грешка: на iPhone 14 Pro ових 20px се претвара у 59px, а садржај се сече.

• Игнорисање хоризонталне оријентације — у хоризонталној оријентацији Safe Area има другачија одступања: Home Indicator се помера на десну страну, а горње одступање се смањује.
• Тврдо кодирана одступања — вредности 20px или 44px одговарају само старим iPhone-има без изреза. На савременим уређајима одступања се разликују 2-3 пута.
• ScrollView и Safe Area — contentInsetAdjustmentBehavior у UIScrollView треба подесити на .always, иначе ће садржај бити скривен испод системских трака.