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، تعداد انواع صفحه‌ها به ۲۰+ افزایش یافت — اندازه‌های مختلف بریدگی‌ها، 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 برای همه برنامه‌هایی که API جدید را هدف قرار می‌دهند edge-to-edge را الزامی می‌کند. این بدان معناست که برنامه زیر نوارهای سیستم کشیده می‌شود و Safe Area از طریق handleWindowInsets یا WindowInsetController اعمال می‌شود. طبق Android Developer Blog (2025)، ۶۸٪ برنامه‌ها قبلاً به 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 عامل ۴۰٪ مشکلات تطبیق‌پذیری در فروشگاه‌های برنامه است.

نمونه‌های پیاده‌سازی 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‌های قدیمی بدون بریدگی مناسب هستند. در دستگاه‌های مدرن فاصله‌ها ۲-۳ برابر متفاوت هستند.
• ScrollView و Safe Area — contentInsetAdjustmentBehavior در UIScrollView باید روی .always تنظیم شود، در غیر این صورت محتوا زیر نوارهای سیستم پنهان می‌شود.