iOS 11 safeArea详解及iphoneX 适配

2020-01-21 05:01:02于丽

最近看了许多iPhone X适配的文章,发现很少有介绍safeArea的,就来随便写写

现在对于iPhone X的适配,有一种常见的做法是给导航栏或tabbar增加一个固定的距离,比如顶部增加44pt,底部增加34pt。这种写死距离的做法乍看上去挺简单,其实并不好,理由如下

    不适合多机型的适配,如果以后出了一种带刘海的iPad,需要预留出来的距离就未必是现在写死的距离 不适合需要支持横竖屏的app,横屏顶部不需要增加距离,反而是左右各有44pt,底部的距离也和竖屏不同 不够动态。还是举个例子,假如有电话打进来了,导航栏应该会下移,这时候view可能还是会被挡住

这里我想探讨一下如何使用safeAreaLayoutGuide和safeAreaInsets,以一种动态的方式,一劳永逸地解决iPhone X甚至后续所有机型的适配问题。

safeAreaLayoutGuide

首先我们看看什么是safeAreaLayoutGuide

iOS11,safeArea

看起来复杂,其实很简单,我归纳一下有几点:

    它是UIView的一个只读属性,意味着所有UIView对象都有并且是系统帮我们创建好的 它继承UILayoutGuide,有layoutFrame意味着它能代表一块区域 它代表的区域避开了诸如导航栏、tabbar或者其他有可能挡住你这个UIView对象显示的所有父view,意味着你的view对象只要相对另一个view的safeLayoutGuide做布局就不用担心她被奇奇怪怪的东西挡住 对于控制器的view的safeAreaLayoutGuide,他的区域同样避开了statusbar或其他有可能挡住view显示的东西,我们甚至可以用控制器的additionalSafeAreaInsets属性,来额外指定inset 如果view完全在父view的安全区域内,或者view不在视图层级或屏幕上,那么view的safeAreaLayoutGuide区域其实和view自身是一样大的

safeAreaLayoutGuide是一个相对抽象的概念,为了便于理解,我们可以把safeAreaLayoutGuide看成是一个“view”,这个“view”系统自动帮我们调整它的bounds,让它不会被各种奇奇怪怪的东西挡住,包括iPhone X的刘海区域和底部的一道杠区域,可以认为在这个“view”上一定能完整显示所有内容。

以下绿色部分就是当前控制器view的safeAreaLayoutGuide区域

iOS11,safeArea

iphone X竖屏safeAreaLayoutGuide的bounds.png

iOS11,safeArea

iPhone X横屏safeAreaLayoutGuide的bounds.png