美文网首页
iPhone X适配指南之Safe Area

iPhone X适配指南之Safe Area

作者: _Choice_ | 来源:发表于2017-09-13 16:52 被阅读1171次

前言

Safe areas的作用是帮助我们将views放置在整个视图中可见的正确的位置。UIKit定义下的View controllers中常常会有一部分特殊的views会被放置在最上方。例如:导航控制器NavigationController的NavigationBar就被放置在视图的最顶部。即使有些时候这些放置在最顶部的views是透明的或者部分透明的,但是它仍然会遮盖住在此位置的其他内容。(注:此处最顶部不是指Y轴坐标为0的顶部,而是视图层级的顶部,导航栏的位置永远在视图最顶部不会被其他view遮盖住)

使用Safe areas来帮助我们布置我们的内容。每个view都包含一个自身的layout guide(这一部分可以参考 safeAreaLayoutGuide
),我们可以用它来创建对view 的约束,如果你并没有使用 Auto Layout 来定位你的view,我们可以通过 safeAreaInsets
属性来获得内部的值加以处理达到我们的目的。

图1

图1展示了日历App的两个页面,并且解释了这两个不同的页面下关联的Safe area的部分。

扩展安全区域并包括自定义的views

我们可以定义一个容器视图控制器container viewcontroller并通过添加子控制器child viewcontroller来将子控制器的视图展示出来(注:这一部分的容器控制器其实代表的是诸如:NavigationController、TabbarController之类的视图控制器)。之后,更新child viewcontroller的safe area来排除被container viewcontroller视图遮盖的部分。UIKit下的container viewcontroller已经自动调整了child viewcontroller的安全区域以便正确布局。例如:NavigationController 会自动调整其之下的child viewcontroller的safe area以便放置NavigationBar。如果我们想要调整一个child viewcontroller的safe area可以通过修改additionalSafeAreaInsets属性。

假设我们定义了一个container controller并在屏幕底部和边缘放置了我们自定义的views,如图2

图2

因为这两个custom view将会遮盖child viewcontroller 中的内容。所以我们必须调整child viewcontroller的safe area以便正确布局。
下面的代码是container view controller中的 viewDidAppear(_:)
方法,这个方法的作用就是调整child viewcontroller中的safe area。在这个方法中修改safe area的原因是在视图被添加到view hierarchy之前,safeAreaInsets这个值都是不准确的。

override func viewDidAppear(_ animated: Bool) {
   var newSafeArea = view.safeAreaInsets

   // Adjust the safe area to accommodate 
   //  the width of the side view.
   if let sideViewWidth = sideView?.bounds.size.width {
      newSafeArea.right += sideViewWidth
   }

   // Adjust the safe area to accommodate 
   //  the height of the bottom view.
   if let bottomViewHeight = bottomView?.bounds.size.height {
      newSafeArea.bottom += bottomViewHeight
   }

   // Adjust the safe area insets of the 
   //  embedded child view controller.
   let child = self.childViewControllers[0]
   child.additionalSafeAreaInsets = newSafeArea
}

官方文档

相关文章

网友评论

      本文标题:iPhone X适配指南之Safe Area

      本文链接:https://www.haomeiwen.com/subject/vqxlsxtx.html