Safe Area — là gì, khoảng cách từ notch và StatusBar

Safe Area là gì?

Safe Area là vùng hình chữ nhật trên màn hình nơi nội dung được đảm bảo không bị che bởi các thành phần hệ thống phần cứng và phần mềm: khuyết camera (notch), Dynamic Island, thanh trạng thái (StatusBar), chỉ báo điều hướng cử chỉ (Home Indicator), góc màn hình bo tròn và thanh điều hướng. Ranh giới của Safe Area thay đổi động khi xoay thiết bị, gọi bàn phím hoặc khởi động Split View. Theo Apple Human Interface Guidelines (2025), bỏ qua Safe Area được coi là lỗi thiết kế và có thể dẫn đến việc ứng dụng bị từ chối trong quá trình xét duyệt.

Tại sao cần Safe Area

Safe Area giải quyết vấn đề phân mảnh màn hình trong hệ sinh thái di động. Trước iPhone X, tất cả iPhone đều có màn hình hình chữ nhật với tỷ lệ giống nhau. Với sự ra đời của notch, số lượng biến thể màn hình đã tăng lên hơn 20 — kích thước notch khác nhau, Dynamic Island, góc bo tròn, chỉ báo. Safe Area trừu tượng hóa nhà phát triển khỏi những khác biệt này bằng cách cung cấp API thống nhất cho khoảng cách thích ứng. Theo Apple Developer (2025), iOS tự động áp dụng Safe Area cho view gốc, nhưng UICollectionView và UIScrollView yêu cầu cấu hình thủ công.

Safe Area trong iOS: SafeAreaLayoutGuide và SwiftUI

Trong iOS, Safe Area được triển khai qua SafeAreaLayoutGuide trong UIKit và bổ ngữ safeAreaInset trong SwiftUI. SafeAreaLayoutGuide là một hướng dẫn bố cục được thêm vào mỗi UIView và xác định hình chữ nhật không có thành phần hệ thống. Trong Interface Builder, Safe Area hiển thị dưới dạng vùng màu xanh lam. SwiftUI tự động áp dụng Safe Area cho hầu hết các container nhưng cho phép bỏ qua qua .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 trong UIKit xác định bốn neo — trên, dưới, đầu, cuối — tự động tính đến notch, StatusBar và Home Indicator. Cách tiếp cận này hoạt động trên tất cả thiết bị iOS từ iOS 11 trở đi. Trong SwiftUI, hiệu ứng tương tự đạt được qua bổ ngữ nội dung bên trong NavigationStack hoặc VStack — SwiftUI tự động áp dụng Safe Area Insets.

// SwiftUI: safeAreaInset và ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Nội dung trong Safe Area")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("Thanh ở cuối màn hình")
        .padding()
        .background(.thinMaterial)
}

Trong SwiftUI, .ignoresSafeArea() cho phép nền mở rộng ra ngoài Safe Area, trong khi .safeAreaInset(edge:) thêm bảng tùy chỉnh làm giảm Safe Area ở phía được chỉ định. Đây là mẫu tiêu chuẩn cho thanh điều hướng, thanh công cụ và biểu ngữ quảng cáo.

Safe Area trong Android: WindowInsets và System Bars

Trong Android, Safe Area được triển khai qua WindowInsets (API 30+) và WindowInsetsCompat (thư viện AndroidX). WindowInsets cung cấp khoảng cách cho Status Bar, Navigation Bar, IME (bàn phím) và cử chỉ hệ thống. Bắt đầu từ Android 10 (API 29), Google khuyến nghị sử dụng WindowInsetsCompat.getInsets() với WindowInsetsCompat.Type.systemBars() để có bộ khoảng cách thống nhất cho tất cả thành phần hệ thống.

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

Trong ví dụ này, WindowInsets trả về khoảng cách cho tất cả thanh hệ thống — Status Bar ở trên, Navigation Bar ở dưới. setOnApplyWindowInsetsListener được gọi mỗi khi khoảng cách thay đổi (xoay, gọi bàn phím). Phương thức systemBars() kết hợp thanh trạng thái, thanh điều hướng và thanh tùy chỉnh thành một tập hợp, đơn giản hóa mã.

Edge-to-Edge trong Android

Bắt đầu từ Android 15, Google yêu cầu hiển thị edge-to-edge cho tất cả ứng dụng nhắm mục tiêu API mới. Điều này có nghĩa là ứng dụng vẽ bên dưới các thanh hệ thống và Safe Area được áp dụng qua handleWindowInsets hoặc WindowInsetController. Theo Android Developer Blog (2025), 68% ứng dụng đã chuyển sang edge-to-edge, cải thiện nhận thức thị giác trên thiết bị có màn hình lớn.

Safe Area, Padding và Insets: khác biệt là gì

Safe Area, Padding và Insets là các khái niệm liên quan nhưng khác nhau. Safe Area là vùng màn hình được đảm bảo không có thành phần hệ thống. Padding là khoảng cách bên trong của một phần tử từ các cạnh của nó. Insets là các giá trị bù số cụ thể do API Safe Area trả về. Theo Apple Tech Notes (2025), nhầm lẫn giữa Safe Area và Padding là nguyên nhân của 40% vấn đề thích ứng trong các cửa hàng ứng dụng.

Ví dụ triển khai Safe Area với mã

Hãy xem xét các kịch bản điển hình: Safe Area trong UIKit cho hướng ngang với notch, Safe Area trong SwiftUI với bảng tùy chỉnh, Safe Area trong Android Compose. Ví dụ cho iOS UIKit — đặt bộ sưu tập trong Safe Area trên iPhone có Dynamic Island. Ví dụ cho Jetpack Compose — sử dụng WindowInsets trong Material 3.

// Jetpack Compose: khoảng cách 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("Nội dung trong Safe Area")
        }
    }
}

Trong Jetpack Compose, Scaffold tự động xem xét WindowInsets qua tham số contentWindowInsets. InnerPadding được truyền cho nội dung và áp dụng cho các phần tử bên trong. Column với bổ ngữ padding(innerPadding) đảm bảo văn bản không nằm dưới các thanh hệ thống.

Lỗi thường gặp khi làm việc với Safe Area

Theo phân tích App Store Review của Apple (2025), năm lỗi phổ biến nhất là: bỏ qua Safe Area ở hướng ngang, sử dụng khoảng cách cứng thay vì SafeAreaLayoutGuide, xử lý Safe Area không đúng trong UIScrollView, quên khoảng cách trong trình bày modal và thiếu thích ứng cho Dynamic Island. Khoảng cách cứng (20px cố định ở trên) là lỗi phổ biến nhất: trên iPhone 14 Pro, 20px đó trở thành 59px và nội dung bị cắt.

• Bỏ qua hướng ngang — ở hướng ngang, Safe Area có khoảng cách khác: Home Indicator di chuyển sang phải và khoảng cách trên giảm.
• Khoảng cách cứng — giá trị 20px hoặc 44px chỉ hoạt động trên iPhone cũ không có notch. Trên thiết bị hiện đại, khoảng cách chênh lệch 2-3 lần.
• ScrollView và Safe Area — contentInsetAdjustmentBehavior trong UIScrollView cần được đặt thành .always, nếu không nội dung sẽ bị ẩn dưới các thanh hệ thống.