Notch — khái niệm cơ bản, thích ứng giao diện với phần cắt màn hình

Notch là gì?

Notch (phần cắt) là một khu vực ở phía trên màn hình điện thoại thông minh nơi đặt camera trước, loa tai nghe, cảm biến khoảng cách và ánh sáng xung quanh, và đối với iPhone X trở lên — camera hồng ngoại Face ID, bộ chiếu điểm và đèn chiếu sáng (TrueDepth camera system). Notch được giới thiệu để tăng diện tích màn hình có thể sử dụng trong khi vẫn giữ lại tất cả cảm biến cần thiết — thay vì một viền trên (bezel), màn hình mở rộng lên trên xung quanh phần cắt.

Kích thước: notch iPhone tiêu chuẩn có chiều rộng khoảng ~34 mm (~209 pt ở chế độ dọc cho các mẫu 6.1 inch) và chiều cao khoảng ~5 mm (~30 pt). ở hai bên notch có "tai" — các phần màn hình nhỏ ở bên phải và trái của phần cắt. "Tai" phải thường hiển thị thời gian, chỉ báo pin và Wi-Fi; tai trái hiển thị nhà mạng và trạng thái. ở chế độ ngang, iOS ẩn notch bằng một thanh màu đen trên toàn bộ chiều rộng thanh trạng thái — nội dung không được hiển thị trong khu vực phần cắt.

Không chỉ iPhone: khái niệm notch đã được nhiều nhà sản xuất Android áp dụng. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — tất cả đều có phần cắt. Một số nhà sản xuất đã đi xa hơn: notch hình giọt nước (waterdrop), camera punch-hole (lỗ trên màn hình), camera trượt (mô-đun có thể thu vào). Các flagship Android hiện đại (Samsung Galaxy S23+, Google Pixel 8 Pro) sử dụng punch-hole — một lỗ tối thiểu cho camera ở phía trên màn hình, không có phần cắt rộng.

Safe Area trong iOS: safeAreaInsets

Safe Area là một vùng hình chữ nhật bên trong một view được đảm bảo không bị các thành phần giao diện hệ thống che khuất: notch, các góc màn hình bo tròn (corner radius), Home Indicator, thanh tab (tab bar) và thanh điều hướng (navigation bar). Kích thước Safe Area được trả về qua thuộc tính UIView.safeAreaInsets — UIEdgeInsets với các giá trị top, left, bottom, right. Đối với iPhone có notch, top inset = ~44 pt (dọc) hoặc ~0 pt (ngang với thanh đen).

// Sử dụng safeAreaInsets để định vị nội dung
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Đọc khoảng lùi Safe Area
        let safeArea = self.view.safeAreaInsets

        // Ghi log giá trị để gỡ lỗi
        print("Top inset: \(safeArea.top)")    // ~44 pt với notch
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt với Home Indicator

        // Định vị tiêu đề với Safe Area
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // Xử lý thay đổi Safe Area (xoay, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Tính toán lại bố cục
    }
}

Auto Layout và Safe Area: trong Interface Builder, sử dụng "Safe Area" làm mục tiêu neo thay vì "Superview". Đối với bố cục lập trình, sử dụng safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS tự động cập nhật safeAreaInsets khi xoay thiết bị, vào Split View trên iPad, hiển thị/ẩn bàn phím và thay đổi hướng. Tất cả các bộ điều khiển UIKit tiêu chuẩn (UINavigationController, UITabBarController) đã tính đến Safe Area. Các view và bộ điều khiển tùy chỉnh phải sử dụng safeAreaInsets một cách rõ ràng.

Notch trong Android: DisplayCutout và WindowInsets

DisplayCutout là một lớp SDK Android được thêm vào API 28 (Android 9.0) mô tả khu vực phần cắt trên màn hình. Có thể lấy nó qua WindowInsets.displayCutout(). Lớp này trả về boundingBoxList — danh sách các hình chữ nhật mô tả (các) phần cắt, và safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — khoảng lùi tối thiểu để hiển thị nội dung an toàn. Android hỗ trợ nhiều cấu hình phần cắt khác nhau: trung tâm (như iPhone), bên (camera ở góc), kép (hai camera), punch-hole.

// Thích ứng giao diện cho DisplayCutout trong Activity
class NotchAwareActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Cho phép hiển thị nội dung trong khu vực phần cắt (nếu cần)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
        }
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)

        // Lấy DisplayCutout qua WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Đặt khoảng lùi cho nội dung phía trên
            headerView.updatePadding(top = safeTop)
        }
    }
}

Các chế độ hiển thị (layoutInDisplayCutoutMode): ALWAYS — nội dung có thể hiển thị trong khu vực phần cắt (cho ứng dụng toàn màn hình, video, trò chơi); NEVER — nội dung không bao giờ che phần cắt, hệ thống thêm khoảng lùi; SHORT_EDGES — nội dung chỉ hiển thị trong khu vực phần cắt ở cạnh ngắn (cho ứng dụng dọc có notch phía trên). Chế độ mặc định là SHORT_EDGES (từ Android 12). Đối với camera punch-hole, phần cắt nhỏ hơn và nhiều ứng dụng sử dụng ALWAYS để tối đa hóa việc sử dụng màn hình.

Sự tiến hóa của Notch: từ iPhone X đến Dynamic Island

iPhone X (2017) — điện thoại thông minh đầu tiên của Apple có notch. Phần cắt chứa camera TrueDepth cho Face ID — một hệ thống gồm camera hồng ngoại, bộ chiếu điểm và đèn chiếu sáng. Kích thước phần cắt: ~34 mm × 5 mm. Trong iOS 11, Apple đã giới thiệu Safe Area để thích ứng ứng dụng. Người dùng chia làm hai: một số chấp nhận notch như cần thiết cho Face ID, những người khác chỉ trích nó vì màn hình "bị cắt".

iPhone 13 (2021) — Apple đã giảm notch 20% bằng cách di chuyển loa lên viền trên. Đây là notch cổ điển cuối cùng. iPhone 14 và 14 Plus (2022) giữ lại notch thu nhỏ. iPhone 14 Pro và Pro Max đã giới thiệu Dynamic Island — một phần cắt hình elip kết hợp camera và cảm biến Face ID, thay đổi hình dạng linh hoạt và hiển thị thông báo hệ thống (hẹn giờ, âm nhạc, kết nối AirPods). Dynamic Island đã trở thành một nền tảng phần mềm với API riêng (ActivityKit, Live Activities).

Dynamic Island không chỉ là một phần cắt, mà là một thành phần giao diện tương tác. Khi kết nối AirPods, hòn đảo mở rộng hiển thị biểu tượng và trạng thái. Gọi taxi (Uber) hiển thị thời gian đến. Bộ hẹn giờ hiện ra trong hòn đảo khi thu nhỏ ứng dụng. Dynamic Island có sẵn trên iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area cho Dynamic Island: top inset = 54 pt (lớn hơn notch cổ điển 10 pt).

Quy tắc thiết kế cho giao diện có phần cắt

Không bao giờ ẩn nội dung sau notch — sử dụng Safe Area hoặc DisplayCutout để tính toán khoảng lùi tự động. Không đặt giá trị khoảng lùi cố định (ví dụ: 44 pt) — chúng khác nhau trên các thiết bị và hướng khác nhau. Luôn sử dụng API hệ thống để đọc Safe Area: safeAreaInsets trong iOS, windowInsets.displayCutout trong Android. Điều này đảm bảo hiển thị chính xác trên tất cả các thiết bị: iPhone SE (không notch), iPhone 14 Pro (có notch), iPhone 15 (Dynamic Island), iPad (không notch, nhưng có Home Indicator).

Hướng ngang — một khu vực rủi ro đặc biệt. Trên iPhone có notch ở chế độ ngang, iOS tự động thêm một thanh màu đen trên toàn bộ chiều rộng thanh trạng thái (nội dung không được hiển thị ở bên trái và phải của notch). Điều này được thực hiện bởi Safe Area inset = 0 top, nhưng tăng left/right insets (~47 pt). Đừng cố gắng vô hiệu hóa hành vi này — App Store sẽ từ chối ứng dụng sử dụng các vùng "bị cấm" của màn hình cho nội dung ở chế độ ngang. Đối với video toàn màn hình, hãy sử dụng AVPlayerViewController, tự động đặt các điều khiển bên ngoài khu vực notch.

Nền và thanh trạng thái: nếu bạn sử dụng màu nền tùy chỉnh, nó phải lấp đầy toàn bộ khu vực màn hình, bao gồm cả khu vực phía sau notch. Không vẽ nội dung lên thanh trạng thái — hãy sử dụng Safe Area. Đối với chế độ tối, hãy đảm bảo thanh trạng thái có thể đọc được: đặt preferredStatusBarStyle phù hợp với kiểu nền của bạn (.default cho văn bản tối trên nền sáng, .lightContent cho văn bản sáng trên nền tối).

Kiểm tra thích ứng Notch

Trình mô phỏng và giả lập: Xcode cung cấp trình mô phỏng cho tất cả các mẫu iPhone có notch (iPhone X–14) và Dynamic Island (iPhone 14 Pro–15). Android Studio cung cấp trình giả lập với nhiều cấu hình phần cắt khác nhau (Google Pixel 3 XL, trình giả lập tùy chỉnh với cutout). Kiểm tra ở chế độ dọc và ngang, có và không có bàn phím, trong Split View (iPad). Xác nhận rằng tất cả nội dung có thể đọc được và không bị che khuất.

Thiết bị thật: notch trên trình mô phỏng và thiết bị thật có thể khác nhau. Ví dụ, trình mô phỏng iPhone 14 Pro hiển thị Dynamic Island, nhưng không có tương tác thực (Live Activities). Đối với Android, camera punch-hole có thể không được giả lập chính xác. Cách tốt nhất là kiểm tra trên thiết bị thật. Bộ tối thiểu: iPhone SE (không notch), iPhone 14 (có notch), iPhone 15 Pro (Dynamic Island), Android có punch-hole, Android có màn hình waterfall (Samsung Edge).

Công cụ: đối với iOS, sử dụng Xcode View Debugger với tùy chọn "Show Safe Area Insets" — hiển thị trực quan ranh giới Safe Area. Đối với Android — Layout Inspector trong Android Studio, hiển thị WindowInsets và DisplayCutout trong bảng Attributes. Cũng hữu ích là Accessibility Inspector để xác minh tất cả các thành phần trong Safe Area có thể truy cập được bởi VoiceOver/TalkBack hay không. Đừng quên iPad không có notch, nhưng có Home Indicator (khoảng lùi dưới ~21 pt) và các góc bo tròn.