0从1到iOS Swift5系列七：SafeArea 值得拥有且必会使用
2023-09-17 05:31:43
iOS 在推出了刘海屏后（iPhoneX），我们就需要考虑如何来适配竖屏、横屏的边界情况了。如果你百度过，你会发现非常多的，各种根据分辨率来判断是否是刘海屏而调整 UI 布局。然而，我们需要结合着应用的实际情况、使用人群、产品or公司要求，来考虑需要从哪个系统版本开始支持，例如：微信、QQ、微博…等这些国民应用软件，为所有用户提供用户体验和性能最好的产品，那它的支持系统版本肯定是相对来说最老的，当然升级新的版本不在讨论范围内。我们首先要知道从哪个系统版本开始支持刘海屏，不然的话做出来的东西非常多余，甚至于把所有版本适配全了，就为了一个刘海屏，这样成本是否太高了呢？一不小心就浪费了大家宝贵的开发时间。
那么知道了是从某个系统版本开始支持了，剩下的其实就比较简单了，UI 界面的适配，推荐使用SafeArea进行适配，SafeArea提供了系统级别的一些适配方式，无论是竖屏还是横屏，还是切换旋转之后，可以帮助你做一些边界情况的处理，不用你再关心是哪个分辨率，是哪个系统，帮你解决非常多的问题。
SafeArea在iOS 11中引入，它是一个UIView的子类，用于定义安全区域，即屏幕上不会被刘海或其他系统元素遮挡的区域。
SafeArea的使用非常简单，只需要将它添加到你的视图层次结构中，然后设置其frame属性即可。SafeArea会自动调整其frame属性，以适应设备的屏幕尺寸和方向。
在以下情况下，SafeArea可以帮助你适配UI布局：
- 当你在竖屏和横屏之间切换时。
- 当设备的屏幕尺寸发生变化时，例如从iPhone X切换到iPhone XR。
- 当系统元素（如状态栏或导航栏）出现或消失时。
SafeArea在实际项目中非常有用，因为它可以帮助你轻松地适配不同设备的屏幕尺寸，而无需编写大量代码。以下是一些使用SafeArea的示例：
- 在视图控制器的viewDidLoad()方法中添加SafeArea。
override func viewDidLoad() {
super.viewDidLoad()
let safeArea = UIApplication.shared.keyWindow?.safeAreaInsets
// 将视图的frame属性设置为安全区域
view.frame = CGRect(x: safeArea!.left, y: safeArea!.top, width: safeArea!.width, height: safeArea!.height)
}
- 在视图中添加一个子视图，并将其frame属性设置为安全区域。
let subview = UIView()
// 将子视图的frame属性设置为安全区域
subview.frame = CGRect(x: safeArea!.left, y: safeArea!.top, width: safeArea!.width, height: safeArea!.height)
// 将子视图添加到视图中
view.addSubview(subview)
- 在自动布局中使用SafeArea。
let safeArea = UIApplication.shared.keyWindow?.safeAreaInsets
// 将视图的顶部约束设置为安全区域的顶部约束
view.topAnchor.constraint(equalTo: safeArea!.topAnchor).isActive = true
// 将视图的底部约束设置为安全区域的底部约束
view.bottomAnchor.constraint(equalTo: safeArea!.bottomAnchor).isActive = true
// 将视图的左边约束设置为安全区域的左边约束
view.leftAnchor.constraint(equalTo: safeArea!.leftAnchor).isActive = true
// 将视图的右边约束设置为安全区域的右边约束
view.rightAnchor.constraint(equalTo: safeArea!.rightAnchor).isActive = true
SafeArea是一个非常有用的工具，可以帮助你轻松地适配不同设备的屏幕尺寸。在实际项目中，你应该使用SafeArea来适配你的UI布局，以确保你的应用在所有设备上都能正确显示。
