iOS 7 之后苹果给 UIViewController 引入了 topLayoutGuidebottomLayoutGuide 两个属性来描述不希望被透明的状态栏或者导航栏遮挡的最高位置(status bar, navigation bar, toolbar, tab bar 等)。这个属性的值是一个 length 属性( topLayoutGuide.length)。 这个值可能由当前的 ViewController 或者 NavigationController 或者 TabbarController 决定。

  • 一个独立的ViewController,不包含于任何其他的ViewController。如果状态栏可见,topLayoutGuide表示状态栏的底部,否则表示这个ViewController的上边缘。
  • 包含于其他ViewController的ViewController不对这个属性起决定作用,而是由容器ViewController决定这个属性的含义:
    • 如果导航栏(Navigation Bar)可见,topLayoutGuide表示导航栏的底部。
    • 如果状态栏可见,topLayoutGuide表示状态栏的底部。
    • 如果都不可见,表示ViewController的上边缘。
      这部分还比较好理解,总之是屏幕上方任何遮挡内容的栏的最底部。

iOS 11 开始弃用了这两个属性, 并且引入了 Safe Area 这个概念。苹果建议: 不要把 Control 放在 Safe Area 之外的地方

    // These objects may be used as layout items in the NSLayoutConstraint API
@available(iOS, introduced: 7.0, deprecated: 11.0)
open var topLayoutGuide: UILayoutSupport { get } @available(iOS, introduced: 7.0, deprecated: 11.0)
open var bottomLayoutGuide: UILayoutSupport { get }

今天, 来研究一下 iOS 11 中新引入的这个 API。

UIView 中的 safe area

iOS 11 中 UIViewController 的 topLayoutGuide 和 bottonLayoutGuide 两个属性被 UIView 中的 safe area 替代了。

    @available(iOS 11.0, *)
open var safeAreaInsets: UIEdgeInsets { get } @available(iOS 11.0, *)
open func safeAreaInsetsDidChange()

safeAreaInsets

这个属性表示相对于屏幕四个边的间距, 而不仅仅是顶部还有底部。这么说好像没有什么感觉, 我们来看一看这个东西分别在 iPhone X 和 iPhone 8 中是什么样的吧!

什么都没有做, 只是新建了一个工程然后在 Main.storyboard 中的 UIViewController 中拖了一个橙色的 View 并且设置约束为:

 

ViewController.swiftviewDidLoad 中打印

    override func viewDidLoad() {
super.viewDidLoad()
print(view.safeAreaInsets)
}
// 无论是iPhone 8 还是 iPhone X 输出结果均为
// UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)

iPhone 8 VS iPhone X Safe Area (竖屏)

iPhone 8 VS iPhone X Safe Area (横屏)

这样对比可以看出, iPhone X 同时具有上下, 还有左右的 Safe Area。

**再来看这个例子: ** 拖两个自定义的 View, 这个 View 上有一个 显示很多字的Label。然后设置这两个 View 的约束分别是:

let view1 = MyView()
let view2 = MyView()
view.addSubview(view1)
view.addSubview(view2)
let screenW = UIScreen.main.bounds.size.width
let screenH = UIScreen.main.bounds.size.height view1.frame = CGRect(
x: 0,
y: 0,
width:screenW,
height: 200) view2.frame = CGRect(
x: 0,
y: screenH - 200,
width:screenW,
height: 200)

 

可以看出来, 子视图被顶部的刘海以及底部的 home 指示区挡住了。我们可以使用 frame 布局或者 auto layout 来优化这个地方:

let insets = UIApplication.shared.delegate?.window??.safeAreaInsets ?? UIEdgeInsets.zero

view1.frame = CGRect(
x: insets.left,
y: insets.top,
width:view.bounds.width - insets.left - insets.right,
height: 200) view2.frame = CGRect(
x: insets.left,
y: screenH - insets.bottom - 200,
width:view.bounds.width - insets.left - insets.right,
height: 200)

 

这样起来好多了, 还有另外一个更好的办法是直接在自定义的 View 中修改 Label 的布局:

override func layoutSubviews() {
super.layoutSubviews()
if #available(iOS 11.0, *) {
label.frame = safeAreaLayoutGuide.layoutFrame
}
}

 

这样, 不仅仅是在 ViewController 中能够使用 safe area 了。

UIViewController 中的 safe area

在 iOS 11 中 UIViewController 有一个新的属性

@available(iOS 11.0, *)
open var additionalSafeAreaInsets: UIEdgeInsets

当 view controller 的子视图覆盖了嵌入的子 view controller 的视图的时候。比如说, 当 UINavigationController 和 UITabbarController 中的 bar 是半透明(translucent) 状态的时候, 就有 additionalSafeAreaInsets

自定义的 View 上面的 label 布局兼容了 safe area。
// UIView
@available(iOS 11.0, *)
open func safeAreaInsetsDidChange() //UIViewController
@available(iOS 11.0, *)
open func viewSafeAreaInsetsDidChange()

这两个方法分别是 UIView 和 UIViewController 的 safe area insets 发生改变时调用的方法,如果需要做一些处理,可以重写这个方法。有点类似于 KVO 的意思。

模拟 iPhone X 的 safe area

额外的 safe area insets 也能用来测试你的 app 是否支持 iPhone X。在没有 iPhone X 也不方便使用模拟器的时候, 这个还是很有用的。

//竖屏
additionalSafeAreaInsets.top = 24.0
additionalSafeAreaInsets.bottom = 34.0 //竖屏, status bar 隐藏
additionalSafeAreaInsets.top = 44.0
additionalSafeAreaInsets.bottom = 34.0 //横屏
additionalSafeAreaInsets.left = 44.0
additionalSafeAreaInsets.bottom = 21.0
additionalSafeAreaInsets.right = 44.0

UIScrollView 中的 safe area

在 scroll view 上加一个 label。设置scroll 的约束为:

        scrollView.snp.makeConstraints { (make) in
make.edges.equalToSuperview()
}

 

iOS 7 中引入 UIViewController 的 automaticallyAdjustsScrollViewInsets 属性在 iOS11 中被废弃掉了。取而代之的是 UIScrollView 的 contentInsetAdjustmentBehavior

@available(iOS 11.0, *)
public enum UIScrollViewContentInsetAdjustmentBehavior : Int {
case automatic //default value
case scrollableAxes
case never
case always
} @available(iOS 11.0, *)
open var contentInsetAdjustmentBehavior: UIScrollViewContentInsetAdjustmentBehavior

Content Insets Adjustment Behavior

never 不做调整。

scrollableAxes content insets 只会针对 scrollview 滚动方向做调整。

always content insets 会针对两个方向都做调整。

automatic 这是默认值。当下面的条件满足时, 它跟 always 是一个意思

  • 能够水平滚动,不能垂直滚动
  • scroll view 是 当前 view controller 的第一个视图
  • 这个controller 是被navigation controller 或者 tab bar controller 管理的
  • automaticallyAdjustsScrollViewInsets 为 true

在其他情况下 automoatcscrollableAxes 一样

Adjusted Content Insets

iOS 11 中 UIScrollView 新加了一个属性: adjustedContentInset

@available(iOS 11.0, *)
open var adjustedContentInset: UIEdgeInsets { get }

adjustedContentInsetcontentInset 之间有什么区别呢?

在同时有 navigation 和 tab bar 的 view controller 中添加一个 scrollview 然后分别打印两个值:

//iOS 10
//contentInset = UIEdgeInsets(top: 64.0, left: 0.0, bottom: 49.0, right: 0.0)
//iOS 11
//contentInset = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
//adjustedContentInset = UIEdgeInsets(top: 64.0, left: 0.0, bottom: 49.0, right: 0.0)

然后再设置:

// 给 scroll view 的四个方向都加 10 的间距
scrollView.contentInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

打印:

//iOS 10
//contentInset = UIEdgeInsets(top: 74.0, left: 10.0, bottom: 59.0, right: 10.0)
//iOS 11
//contentInset = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
//adjustedContentInset = UIEdgeInsets(top: 74.0, left: 10.0, bottom: 59.0, right: 10.0)

由此可见,在 iOS 11 中 scroll view 实际的 content inset 可以通过 adjustedContentInset 获取。这就是说如果你要适配 iOS 10 的话。这一部分的逻辑是不一样的。

系统还提供了两个方法来监听这个属性的改变

//UIScrollView
@available(iOS 11.0, *)
open func adjustedContentInsetDidChange() //UIScrollViewDelegate
@available(iOS 11.0, *)
optional public func scrollViewDidChangeAdjustedContentInset(_ scrollView: UIScrollView)

UITableView 中的 safe area

我们现在再来看一下 UITableView 中 safe area 的情况。我们先添加一个有自定义 header 以及自定义 cell 的 tableview。设置边框为 self.view 的边框。也就是

tableView.snp.makeConstraints { (make) in
make.edges.equalToSuperview()
}

或者

tableView.frame = view.bounds

 

自定义的 header 上面有一个 lable,自定义的 cell 上面也有一个 label。将屏幕横屏之后会发现,cell 以及 header 的布局均自动留出了 safe area 以外的距离。cell 还是那么大,只是 cell 的 contnt view 留出了相应的距离。这其实是 UITableView 中新引入的属性管理的:

@available(iOS 11.0, *)
open var insetsContentViewsToSafeArea: Bool

insetsContentViewsToSafeArea 的默认值是 true, 将其设置成 no 之后:

 

可以看出来 footer 和 cell 的 content view 的大小跟 cell 的大小相同了。这就是说:在 iOS 11 下, 并不需要改变 header/footer/cell 的布局, 系统会自动区适配 safe area

需要注意的是, Xcode 9 中使用 IB 拖出来的 TableView 默认的边框是 safe area 的。所以实际运行起来 tableview 都是在 safe area 之内的。

 

UICollectionView 中的 safe area

我们在做一个相同的 collection view 来看一下 collection view 中是什么情况:

 

这是一个使用了 UICollectionViewFlowLayout 的 collection view。 滑动方向是竖向的。cell 透明, cell 的 content view 是白色的。这些都跟上面 table view 一样。header(UICollectionReusableView) 没有 content view 的概念, 所以给其自身设置了红色的背景。

从截图上可以看出来, collection view 并没有默认给 header cell footer 添加safe area 的间距。能够将布局调整到合适的情况的方法只有将 header/ footer / cell 的子视图跟其 safe area 关联起来。跟 IB 中拖 table view 一个道理。

 

现在我们再试试把布局调整成更像 collection view 那样:

 

截图上可以看出来横屏下, 左右两边的 cell 都被刘海挡住了。这种情况下, 我们可以通过修改 section insets 来适配 safe area 来解决这个问题。但是再 iOS 11 中, UICollectionViewFlowLayout 提供了一个新的属性 sectionInsetReference 来帮你做这件事情。

@available(iOS 11.0, *)
public enum UICollectionViewFlowLayoutSectionInsetReference : Int { case fromContentInset case fromSafeArea case fromLayoutMargins
} /// The reference boundary that the section insets will be defined as relative to. Defaults to `.fromContentInset`.
/// NOTE: Content inset will always be respected at a minimum. For example, if the sectionInsetReference equals `.fromSafeArea`, but the adjusted content inset is greater that the combination of the safe area and section insets, then section content will be aligned with the content inset instead.
@available(iOS 11.0, *)
open var sectionInsetReference: UICollectionViewFlowLayoutSectionInsetReference

可以看出来,系统默认是使用 .fromContentInset 我们再分别修改, 看具体会是什么样子的。

fromSafeArea

这种情况下 section content insets 等于原来的大小加上 safe area insets 的大小。

跟使用 .fromLayoutMargins 相似使用这个属性 colection view 的 layout margins 会被添加到 section content insets 上面。

 

IB 中的 Safe Area

前面的例子都说的是用代码布局要实现的部分。但是很多人都还是习惯用 Interface Builder 来写 UI 界面。苹果在 WWDC 2107 Session 412 中提到:Storyboards 中的 safe area 是向下兼容的 也就是说, 即使在 iOS10 及以下的 target 中,也可以使用 safe area 来做布局。唯一需要做的就是给每个 stroyboard 勾选 Use Safe Area Layout Guide。实际测试看,应该是 iOS9 以后都只需要这么做。

知识点: 在使用 IB 设置约束之后, 注意看相对的是 superview 还是 topLayoutGuide/bottomLayoutGuide, 包括在 Xcode 9 中勾选了 Use Safe Area Layout Guide 之后,默认应该是相对于 safe area 了。

总结

  1. 在适配 iPhone X 的时候首先是要理解 safe area 是怎么回事。盲目的 if iPhoneX{} 只会给之后的工作代码更多的麻烦。
  2. 如果只需要适配到 iOS9 之前的 storyboard 都只需要做一件事情。
  3. Xcode9 用 IB 可以看得出来, safe area 到处都是了。理解起来很简单。就是系统对每个 View 都添加了 safe area, 这个区域的大小,是否跟 view 的大小相同是系统来决定的。在这个 View 上的布局只需要相对于 safe area 就可以了。每个 View 的 safe area 都可以通过 iOS 11 新增的 API safeAreaInsets 或者 safeAreaLayoutGuide 获取。
  4. 对与 UIViewController 来说新增了 additionalSafeAreaInsets 这个属性, 用来管理有 tabbar 或者 navigation bar 的情况下额外的情况。
  5. 对于 UIScrollView, UITableView, UICollectionView 这三个控件来说,系统以及做了大多数的事情。
    • scrollView 只需要设置 contentInsetAdjustmentBehavior 就可以很容易的适配带 iPhoneX
    • tableView 只需要在 cell header footer 等设置约束的时候相对于 safe area 来做
    • 对 collection view 来说修改 sectionInsetReference 为 .safeArea 就可以做大多数的事情了。
  6. 总的来说, safe area 可以看作是系统在所有的 view 上加了一个虚拟的 view, 这个虚拟的 view 的大小等都是跟 view 的位置等有关的(当然是在 iPhoneX上才有值) 以后在写代码的时候,自定义的控件都尽量针对 safe area 这个虚拟的 view 进行布局。

作者:CepheusSun
链接:http://www.jianshu.com/p/63c0b6cc66fd
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

【转】最近很火的 Safe Area 到底是什么的更多相关文章

  1. 现在很火的数据科学到底是什么?你对做DATA SCIENTIST感兴趣吗?

    转自– Warald (Email: iamxiaoning@gmail.com) 博客: http://www.1point3acres.com,微博:http://www.weibo.com/wa ...

  2. Safe Area Layout Guide

    原文:Safe Area Layout Guide Apple在iOS 7中引入了topLayoutGuide和bottomLayoutGuide作为UIViewController属性.它们允许您创 ...

  3. iOS开发-LayoutGuide(从top/bottom LayoutGuide到Safe Area)

    iOS7 topLayoutGuide/bottomLayoutGuide 创建一个叫做LayoutGuideStudy的工程,我们打开看一下Main.storyboard: storyboard-t ...

  4. xcode升级至9.0之后,新建xib报错: Safe Area Layout Guide Before IOS 9.0

    直接翻译是:iOS 9.0前安全区域布局指南. 字面意思就是safe area布局应用在iOS 9之前的版本上了. 解决方法: 1,我们可以把safe area勾掉,不用safe area布局,如下图 ...

  5. 安利一个很火的 Github 滤镜项目

    安利一个很火的 Github 滤镜项目 园长 1 个月前 简评:通过深度学习,一秒钟让你的照片高大上,这是康奈尔大学和 Adobe 的工程师合作的一个新项目,通过卷积神经网络把图片进行风格迁移.项目已 ...

  6. xcode9报错 Safe Area Layout Guide before iOS9.0

    运行工程的时候会遇到  Safe Area Layout Guide before iOS9.0 这是因为xcode9  storyboard的设置里面多了 个 Safe Area Layout Gu ...

  7. Xcode9出现错误safe area layout guide before ios 9 真正解决办法

    网上很多解决办法瞎扯淡,以讹传讹之势愈演愈烈. 正解是选中控制器,右边面板的Builds for 选择iOS9.0 and Later,如下图红框广为流传的错解是不勾选Use Safe Area La ...

  8. Xcode 9.0 报错, Safe Area Layout Guide Before IOS 9.0

    Xcode 9.0 新建工程报错 xcode Safe Area Layout Guide Before IOS 9.0 如下图,在Builds for 选择iOS9.0 and Later,不勾选U ...

  9. Safe Area Layout Guide before iOS 9.0

    今天使用Xcode9.1重建项目,什么都没写运行报错:Safe Area Layout Guide before iOS 9.0!目前为止,不晓得原因,现记录解决方法:

随机推荐

  1. STC15W408AS简单使用教程-简单的光强检测!

    第一步:搭建开发环境 安装最新版本的STC_ISP程序烧录软件,链接:http://pan.baidu.com/s/1slLPnOD 密码:6bov 安装keil C51的51系列单片机集成IDE软件 ...

  2. java反射对实体类取值和赋值

    public static void checkDesignerEdit(Object dtos) throws Exception { Class dtosClass = dtos.getClass ...

  3. Trace 2018徐州icpc网络赛 (二分)(树状数组)

    Trace There's a beach in the first quadrant. And from time to time, there are sea waves. A wave ( xx ...

  4. POJ 3177 Redundant Paths (边双连通+缩点)

    <题目链接> <转载于 >>>  > 题目大意: 有n个牧场,Bessie 要从一个牧场到另一个牧场,要求至少要有2条独立的路可以走.现已有m条路,求至少要新 ...

  5. 堆优化dijstra

    因为spfa没事就被卡一卡,所以堆优化dijstra就显得很重要,在最短路或者其模型里边,最少有一条边是没有被更新过的,也就是它是最短的,同理从这个点开始也有一条边最短,所以每次就找最短的然后松弛操作 ...

  6. Effective前端1---chapter 2 用CSS画一个三角形

    1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...

  7. linux 学习笔记 tail 命令

    #tail -f -n 100 catalina.out 含义:从文件尾部监视catalina.out文件  主要看尾部100行 #tail -f -n 100 catalina.out > n ...

  8. Alpha(3/10)

    鐵鍋燉腯鱻 项目:小鱼记账 团队成员 项目燃尽图 冲刺情况描述 站立式会议照片 各成员情况 团队成员 学号 姓名 git地址 博客地址 031602240 许郁杨 (组长) https://githu ...

  9. js获取form元素,不使用id

    <form method="post" name="form"> <input type="text" name=&quo ...

  10. POJ1700----Crossing River

    #include<cstdio> #include<iostream> #include<cstring> #include<algorithm> us ...