3.3_安全区域(Safe_Area)布局指南

安全区域布局指南旨在帮助你创建在各种 iOS 设备上都能良好显示的界面。安全区域考虑了状态栏、导航栏、标签栏以及 iPhone X 及更高版本上的“刘海”等因素，确保你的内容不会被这些系统界面元素遮挡。🎉

什么是安全区域？

安全区域是视图中未被系统界面元素（如状态栏、导航栏、标签栏和 Home Indicator）遮挡的部分。它本质上是一个 UIEdgeInsets 结构体，定义了视图边缘到安全区域边缘的距离。你可以通过 UIView 的 safeAreaLayoutGuide 属性访问安全区域。

• safeAreaLayoutGuide: 提供安全区域的布局指南。
• safeAreaInsets: 指示视图边缘到安全区域边缘的距离。

如何使用安全区域进行布局？

使用安全区域进行布局非常简单！你可以使用 Auto Layout 约束将视图固定到安全区域的边缘，而不是直接固定到父视图的边缘。这确保了你的视图始终在可见区域内。

1. 获取安全区域布局指南: 通过 view.safeAreaLayoutGuide 获取。

2. 创建约束: 使用 safeAreaLayoutGuide 创建约束，例如：

   myView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
   myView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
   myView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
   myView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

安全区域与传统布局的区别

在没有安全区域的情况下，你可能会直接将视图固定到父视图的边缘。这在某些设备上可能会导致内容被遮挡。安全区域提供了一种更可靠的方式来确保内容始终可见。

• 传统布局: 容易被系统界面元素遮挡。
• 安全区域布局: 自动适应各种设备和屏幕尺寸，确保内容可见。

示例：使用安全区域约束按钮

假设你想要在屏幕底部放置一个按钮，并确保它不会被 Home Indicator 遮挡。你可以使用以下代码：

let myButton = UIButton()
myButton.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(myButton)

NSLayoutConstraint.activate([
    myButton.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20),
    myButton.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20),
    myButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20),
    myButton.heightAnchor.constraint(equalToConstant: 50)
])

这段代码将按钮的左右边缘固定到安全区域的左右边缘，底部固定到安全区域的底部，并设置了按钮的高度。这样，按钮就会始终在可见区域内，不会被 Home Indicator 遮挡。👍

何时使用安全区域？

你应该在以下情况下使用安全区域：

• 布局关键内容: 确保用户可以始终看到重要的信息和交互元素。
• 支持多种设备: 你的应用需要在各种 iOS 设备上都能良好显示。
• 避免内容遮挡: 确保内容不会被状态栏、导航栏、标签栏或 Home Indicator 遮挡。

通过使用安全区域，你可以创建更健壮、更用户友好的 iOS 应用。记住，良好的布局是优秀用户体验的关键！🚀