Notch — 基础知识，界面适配屏幕凹口

什么是 Notch？

Notch（凹口，"刘海"） — 智能手机屏幕顶部区域，放置前置摄像头、听筒、接近传感器和光线传感器，对于 iPhone X 及更新机型 — 还放置 Face ID 红外摄像头、点阵投影器和泛光照明元件（TrueDepth 摄像头系统）。Notch 的引入是为了在保留所有必要传感器的同时增加屏幕可用面积 — 显示屏不是有顶部边框（bezel），而是围绕凹口向上扩展。

尺寸：标准 iPhone notch 宽度约 ~34 毫米（6.1 英寸机型竖屏方向约 ~209 pt），高度约 ~5 毫米（~30 pt）。Notch 两侧留有"耳朵"（ears）— 凹口右侧和左侧的小块屏幕区域。右"耳"通常显示时间、电池指示器和 Wi-Fi；左"耳"显示运营商和状态。在横屏方向下，iOS 用贯穿状态栏宽度的黑色条隐藏 notch — 内容不会显示在凹口区域。

不仅仅是 iPhone：许多 Android 厂商采用了 notch 概念。Google Pixel 3 XL、OnePlus 6、Huawei P20、Xiaomi Mi 8 — 都有凹口。一些厂商走得更远："水滴"凹口（waterdrop notch）、打孔屏摄像头（punch-hole，屏幕开孔）、滑盖摄像头（可伸缩模块）。现代 Android 旗舰机（Samsung Galaxy S23+、Google Pixel 8 Pro）使用打孔屏 — 屏幕顶部为摄像头留出的最小开孔，没有宽凹口。

iOS 中的 Safe Area：safeAreaInsets

Safe Area — 视图内部的矩形区域，保证不被系统界面元素遮挡：notch、屏幕圆角（corner radius）、Home Indicator、标签栏（tab bar）和导航栏（navigation bar）。Safe Area 的尺寸通过 UIView.safeAreaInsets 属性返回 — 包含 top、left、bottom、right 值的 UIEdgeInsets。对于带 notch 的 iPhone，顶部边距 = ~44 pt（竖屏）或 ~0 pt（横屏带黑色条）。

// 使用 safeAreaInsets 定位内容
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // 读取 Safe Area 边距
        let safeArea = self.view.safeAreaInsets

        // 记录值用于调试
        print("顶部 inset：\(safeArea.top)")    // ~44 pt 带 notch
        print("底部 inset：\(safeArea.bottom)") // ~34 pt 带 Home Indicator

        // 考虑 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
        )
    }

    // 处理 Safe Area 更改（旋转、多任务）
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // 重新计算布局
    }
}

Auto Layout 和 Safe Area：在 Interface Builder 中，使用"Safe Area"作为 anchor 目标，而不是"Superview"。对于编程布局，使用 safeAreaLayoutGuide：let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor)。iOS 在设备旋转、iPad 上进入 Split View、显示/隐藏键盘和方向更改时自动更新 safeAreaInsets。所有标准 UIKit 控制器（UINavigationController、UITabBarController）已经考虑了 Safe Area。自定义视图和控制器必须显式使用 safeAreaInsets。

Android 中的 Notch：DisplayCutout 和 WindowInsets

DisplayCutout — 在 API 28（Android 9.0）中添加的 Android SDK 类，描述屏幕上的凹口区域。可以通过 WindowInsets.displayCutout() 获取。该类返回 boundingBoxList — 描述凹口的矩形列表，以及 safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — 安全显示内容的最小边距。Android 支持不同的凹口配置：中央（如 iPhone）、侧面（摄像头在角落）、双凹口（两个摄像头）、打孔屏。

// 在 Activity 中适配 DisplayCutout 的界面
class NotchAwareActivity : AppCompatActivity() {

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

        // 允许在凹口区域显示内容（如果需要）
        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)

        // 通过 WindowInsets 获取 DisplayCutout
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // 为顶部内容设置边距
            headerView.updatePadding(top = safeTop)
        }
    }
}

显示模式（layoutInDisplayCutoutMode）：ALWAYS — 内容可在凹口区域显示（适用于全屏应用、视频、游戏）；NEVER — 内容从不遮挡凹口，系统添加边距；SHORT_EDGES — 内容仅在短边凹口区域显示（适用于顶部有 notch 的竖屏应用）。默认模式 — SHORT_EDGES（从 Android 12 开始）。对于打孔屏摄像头，凹口较小，许多应用使用 ALWAYS 以最大化屏幕利用。

Notch 的演变：从 iPhone X 到 Dynamic Island

iPhone X（2017） — 第一款带 notch 的 Apple 智能手机。凹口包含用于 Face ID 的 TrueDepth 摄像头系统 — 由红外摄像头、点阵投影器（Dot Projector）和泛光照明元件（Flood Illuminator）组成。凹口尺寸：约 34 毫米 × 5 毫米。在 iOS 11 中，Apple 引入了 Safe Area 用于应用适配。用户分为两派：一些人接受 notch 作为 Face ID 的必要条件，另一些人则批评它"切割"了屏幕。

iPhone 13（2021） — Apple 通过将扬声器移动到屏幕顶部边框，将 notch 缩小了 20%。这是最后一个经典 notch。iPhone 14 和 14 Plus（2022）保留了缩小的 notch。iPhone 14 Pro 和 Pro Max 引入了 Dynamic Island — 一个椭圆形的凹口，结合了摄像头和 Face ID 传感器，动态改变形状并显示系统通知（计时器、音乐、AirPods 连接）。Dynamic Island 成为拥有自己 API（ActivityKit、Live Activities）的软件平台。

Dynamic Island — 不仅仅是一个凹口，而是一个交互式界面元素。连接 AirPods 时，灵动岛会扩展显示图标和状态。叫出租车（Uber）会显示到达时间。最小化应用时，计时器会在灵动岛中可见。Dynamic Island 适用于 iPhone 14 Pro/Pro Max、iPhone 15/15 Pro/15 Pro Max、iPhone 16/16 Pro/16 Pro Max。Dynamic Island 的 Safe Area：顶部边距 = 54 pt（比经典 notch 多 10 pt）。

凹口界面的设计规则

切勿将内容隐藏在 notch 后面 — 使用 Safe Area 或 DisplayCutout 自动计算边距。不要设置固定边距值（例如 44 pt）— 它们在不同设备和不同方向上有所不同。始终使用系统 API 读取 Safe Area：iOS 中的 safeAreaInsets，Android 中的 windowInsets.displayCutout。这保证了在所有设备上的正确显示：iPhone SE（无 notch）、iPhone 14 Pro（notch）、iPhone 15（Dynamic Island）、iPad（无 notch，但有 Home Indicator）。

横屏方向 — 特别风险区域。在带 notch 的 iPhone 横屏模式下，iOS 会自动在整个状态栏宽度上添加黑色条（notch 左右两侧的内容不显示）。这是通过系统 Safe Area inset = 0 top 但增大的 left/right insets（约 47 pt）实现的。不要试图禁用此行为 — App Store 会拒绝在横屏模式下使用"禁止"屏幕区域展示内容的应用。对于全屏视频，使用 AVPlayerViewController，它会自动将控件放置在 notch 区域之外。

背景和状态栏：如果使用自定义背景颜色，它应填充整个屏幕区域，包括 notch 后面的区域。不要在状态栏上绘制内容 — 使用 Safe Area。对于深色模式，确保状态栏可读：根据背景样式设置 preferredStatusBarStyle（浅色背景上的深色文本使用 .default，深色背景上的浅色文本使用 .lightContent）。

测试 Notch 适配

模拟器：Xcode 提供所有带 notch（iPhone X–14）和 Dynamic Island（iPhone 14 Pro–15）的 iPhone 型号模拟器。Android Studio 提供不同凹口配置的模拟器（Google Pixel 3 XL、带 cutout 的自定义模拟器）。在竖屏和横屏方向、有键盘和无键盘、Split View（iPad）下进行测试。检查所有内容是否可读且未被遮挡。

真实设备：模拟器上的 notch 与真实设备上的 notch 可能不同。例如，iPhone 14 Pro 模拟器显示 Dynamic Island，但没有真实交互性（Live Activities）。在 Android 中，打孔屏摄像头可能无法精确模拟。最好的方法是在真实设备上测试。最小组合：iPhone SE（无 notch）、iPhone 14（notch）、iPhone 15 Pro（Dynamic Island）、打孔屏 Android、瀑布屏 Android（Samsung Edge）。

工具：对于 iOS，使用带有"Show Safe Area Insets"选项的 Xcode View Debugger — 将直观显示 Safe Area 边界。对于 Android — Android Studio 中的 Layout Inspector，在 Attributes 面板中显示 WindowInsets 和 DisplayCutout。Accessibility Inspector 也很有用，用于检查 Safe Area 内的所有元素是否可通过 VoiceOver/TalkBack 访问。不要忘记没有 notch 但有 Home Indicator（底部边距约 21 pt）和圆角的 iPad。