【转】最近很火的 Safe Area 到底是什么
iOS 7 之后苹果给 UIViewController 引入了 topLayoutGuide 和 bottomLayoutGuide 两个属性来描述不希望被透明的状态栏或者导航栏遮挡的最高位置(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.swift
的 viewDidLoad
中打印
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 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
// 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
在其他情况下 automoatc 跟 scrollableAxes 一样
Adjusted Content Insets
iOS 11 中 UIScrollView 新加了一个属性: adjustedContentInset
@available(iOS 11.0, *)
open var adjustedContentInset: UIEdgeInsets { get }
adjustedContentInset 和 contentInset 之间有什么区别呢?
在同时有 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
我们再分别修改, 看具体会是什么样子的。
这种情况下 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 了。
总结
- 在适配 iPhone X 的时候首先是要理解 safe area 是怎么回事。盲目的
if iPhoneX{}
只会给之后的工作代码更多的麻烦。 - 如果只需要适配到 iOS9 之前的 storyboard 都只需要做一件事情。
- Xcode9 用 IB 可以看得出来, safe area 到处都是了。理解起来很简单。就是系统对每个 View 都添加了 safe area, 这个区域的大小,是否跟 view 的大小相同是系统来决定的。在这个 View 上的布局只需要相对于 safe area 就可以了。每个 View 的 safe area 都可以通过 iOS 11 新增的 API safeAreaInsets 或者 safeAreaLayoutGuide 获取。
- 对与 UIViewController 来说新增了 additionalSafeAreaInsets 这个属性, 用来管理有 tabbar 或者 navigation bar 的情况下额外的情况。
- 对于 UIScrollView, UITableView, UICollectionView 这三个控件来说,系统以及做了大多数的事情。
- scrollView 只需要设置 contentInsetAdjustmentBehavior 就可以很容易的适配带 iPhoneX
- tableView 只需要在 cell header footer 等设置约束的时候相对于 safe area 来做
- 对 collection view 来说修改 sectionInsetReference 为 .safeArea 就可以做大多数的事情了。
- 总的来说, safe area 可以看作是系统在所有的 view 上加了一个虚拟的 view, 这个虚拟的 view 的大小等都是跟 view 的位置等有关的(当然是在 iPhoneX上才有值) 以后在写代码的时候,自定义的控件都尽量针对 safe area 这个虚拟的 view 进行布局。
作者:CepheusSun
链接:http://www.jianshu.com/p/63c0b6cc66fd
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
【转】最近很火的 Safe Area 到底是什么的更多相关文章
- 现在很火的数据科学到底是什么?你对做DATA SCIENTIST感兴趣吗?
转自– Warald (Email: iamxiaoning@gmail.com) 博客: http://www.1point3acres.com,微博:http://www.weibo.com/wa ...
- Safe Area Layout Guide
原文:Safe Area Layout Guide Apple在iOS 7中引入了topLayoutGuide和bottomLayoutGuide作为UIViewController属性.它们允许您创 ...
- iOS开发-LayoutGuide(从top/bottom LayoutGuide到Safe Area)
iOS7 topLayoutGuide/bottomLayoutGuide 创建一个叫做LayoutGuideStudy的工程,我们打开看一下Main.storyboard: storyboard-t ...
- xcode升级至9.0之后,新建xib报错: Safe Area Layout Guide Before IOS 9.0
直接翻译是:iOS 9.0前安全区域布局指南. 字面意思就是safe area布局应用在iOS 9之前的版本上了. 解决方法: 1,我们可以把safe area勾掉,不用safe area布局,如下图 ...
- 安利一个很火的 Github 滤镜项目
安利一个很火的 Github 滤镜项目 园长 1 个月前 简评:通过深度学习,一秒钟让你的照片高大上,这是康奈尔大学和 Adobe 的工程师合作的一个新项目,通过卷积神经网络把图片进行风格迁移.项目已 ...
- xcode9报错 Safe Area Layout Guide before iOS9.0
运行工程的时候会遇到 Safe Area Layout Guide before iOS9.0 这是因为xcode9 storyboard的设置里面多了 个 Safe Area Layout Gu ...
- Xcode9出现错误safe area layout guide before ios 9 真正解决办法
网上很多解决办法瞎扯淡,以讹传讹之势愈演愈烈. 正解是选中控制器,右边面板的Builds for 选择iOS9.0 and Later,如下图红框广为流传的错解是不勾选Use Safe Area La ...
- 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 ...
- Safe Area Layout Guide before iOS 9.0
今天使用Xcode9.1重建项目,什么都没写运行报错:Safe Area Layout Guide before iOS 9.0!目前为止,不晓得原因,现记录解决方法:
随机推荐
- CentOS6.2(64bit)下mysql5.6.16主从同步配置
1. 主配置,进入mysql.cnf在[mysqld]下面添加以下配置 [root@localhost ~]# vi /etc/mysql.cnf server-id=1 binlog-format= ...
- int和intege相比
int i = 100; Integer i1 = 100; Integer i2 = new Integer(100); system.out.println(i == i1);true syste ...
- oracle 中可以用 case when then else end来处理除数是0的情况
case when a.ZJXJE != 0 then to_char(round((a.YFZK-b.YFZK)/a.ZJXJE,2)) else '本期总进项金额为零' end then和else ...
- Bi-shoe and Phi-shoe (欧拉函数)
题目描述: 题目大意:一个竹竿长度为p,它的score值就是比p长度小且与且与p互质的数字总数,比如9有1,2,4,5,7,8这六个数那它的score就是6.给你T组数据,每组n个学生,每个学生都有一 ...
- python爬虫积累(一)--------selenium+python+PhantomJS的使用(转)
阅读目录 一.Selenium介绍 二.爬虫为什么要用selenium? 三.PhantomJS介绍 四.PhantomJS安装 五.操作实战 六.在此推荐虫师博客的学习资料 selenium + p ...
- 创建emlog
第一步:解压安装包并且安装 第二步:打开phpstudy,并启动(如果安装后打开显示没有VC11,则要去安装) 第三步:打开“其他管理项菜单”下面的“根目录”,将emlog下面的emlog之下的全部文 ...
- JS 实现打印
<input id="btnPrint" type="button" value="打印预览" onclick=preview(1) ...
- 并发编程之I/O模型
1.I/O模型介绍 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个 ...
- 《C#图解教程》一览
本书针对编程新手和中级水平的程序员.笔者尽力专注 C# 语言本身,详尽深入地描述语言及各部分.少涉及 .NET 和相关编程实践.本书写作过程中,笔者始终坚持确保内容简洁性的同时又能透彻地讲解这门语言. ...
- 英语口语练习系列-C33-露营-谈论日期-离思
词汇-露营 Camping camping 露营 campground camping camper picnic bonfire backpack tent public campground co ...