关于iOS中的布局向导（Layout Guide）和安全区域（Safe Area）

iOS在默认情况下，竖屏会显示状态栏，横屏自动隐藏状态栏。而视图控制器的主视图默认位于屏幕顶端，在竖屏时会被顶部状态栏遮挡。如果我们希望不被状态栏遮挡，则需要先判断横竖屏，然后动态显示隐藏状态栏。如果界面中还存在导航栏、分页栏，情况就更复杂一些。总之，自己处理是一件很麻烦的事情。

布局向导

在iOS 7中，苹果引入了Top Layout Guide（顶部布局向导）和Bottom Layout Guide（底部布局向导）的概念，它们是界面中的两个隐藏视图，分别指示当前界面中被顶部条形区域（如状态栏StatusBar、导航栏NavigationBar）和被底部条形区域（如分页栏TabBar）占据的区域。

topLayoutGuide和bottomLayoutGuide是视图控制器的两个属性（上图中的self是当前的ViewController）。其中顶部布局向导的底部为顶部条形区域的最下方，即：

• 如果没有状态栏和导航栏，则为屏幕顶端。
• 如果只有状态栏，则为状态栏下方（20px）。
• 如果只有导航栏，则为导航栏下方（44px）。
• 如果同时有状态栏和导航栏，则为导航栏下方（64px）。

同理，底部布局向导的顶部为下方条形区域的最上方。
这两个布局向导会根据界面的情况动态调整其高度。我们就可以参照这两个布局向导建立布局约束，无需自己去判断和实现了。

安全区域

iOS 11引入了Safe Area（安全区域）的概念，它指示当前界面中不被遮挡的区域，有如下特点：

• 它是一个不被顶部条形区域和底部条形区域遮挡的区域。
• 它不位于曲面屏边缘区域（例如iPhone X）。
• 它能够根据界面动态调整大小。
• 开发者能够调整安全区域的大小。

下图为安全区域的示意图。

同时，顶部和底部布局向导被标记为废弃（Deprecated）不再推荐使用。如果你的项目是使用老版本Xcode创建，则新版本Xcode会将storyboard/xib文件中基于导航向导的约束自动转换为基于安全区域的约束。另外，尽管安全区域是iOS 11新增加的，但storyboard文件仍然兼容老的系统（iOS 8、9、10）。

参考文献

1. 苹果官方文档《Positioning Content Relative to the Safe Area》：https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area
2. Safe Area Layout Guide：https://useyourloaf.com/blog/safe-area-layout-guide/