safeArea

即可以正常显示内容的部分。

可以通过 additionalSafeAreaInsets 来调整 safeArea 的大小。

经过调整,范围如下:

  1. self.additionalSafeAreaInsets = UIEdgeInsets.init(top: 20, left: 30, bottom: 0, right: 10)

通过 safeAreaLayoutGuide 创建约束

  1. bgView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
  2. bgView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  3. bgView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
  4. bgView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)

subView 的 safeAreaInsets

  1. 完全在内部的,safeAreaInsets 为 0
  2. 部分在 supview 内部,但在 safeArea 之外的,safeAreaInsets 为之间的大小
  3. 在 superview 之外的,为父 view safeAreaInsets 的大小,不会延伸出去

  1. view safeArea: UIEdgeInsets(top: 64.0, left: 30.0, bottom: 83.0, right: 10.0)
  2. bgview SafeArea: UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
  3. topview SafeArea: UIEdgeInsets(top: 64.0, left: 10.0, bottom: 0.0, right: 0.0)
  4. rightView SafeArea: UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 10.0)

如上所示,蓝色完全在 rootview 的 safeArea 之内,所以 safeAreaInsets 为0.
topview 在 rootview 的 bounds 之内,但是在 safeArea 之外,所以 safeAreaInsets 反映了在 rootview 的 bounds 之内, safeArea 之外的区域。
rightView 的右边已经超出了屏幕范围,所以 safeAreaInsets 的右边是 rootview 的 safeAreaInsets 的右边,不会继续超出。

Margin

即内间距

使用 layoutMarginsGuide 来创建约束

  1. bgView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
  2. bgView.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor),
  3. bgView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
  4. bgView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor)

insetsLayoutMarginsFromSafeArea 属性

When the value of this property is true, any margins that are outside the safe area are automatically modified to fall within the safe area boundary. The default value of this property is true. Changing the value to false allows your margins to remain at their original locations, even when they are outside the safe area.

即这个属性可以保证不落在 safeArea 区域之外

  1. // 这里可以修改 layoutmargin
  2. topView.layoutMargins = UIEdgeInsets.init(top: 0, left: 0, bottom: 0, right: 0)
  3. [topView, rightView].forEach { (viewa) in
  4. let label = UILabel.init()
  5. label.translatesAutoresizingMaskIntoConstraints = false
  6. label.backgroundColor = UIColor.purple
  7. viewa?.addSubview(label)
  8. label.text = "tesx"
  9. let labelConstranits = [label.topAnchor.constraint(equalTo: viewa!.layoutMarginsGuide.topAnchor),
  10. label.leftAnchor.constraint(equalTo: viewa!.layoutMarginsGuide.leftAnchor)]
  11. NSLayoutConstraint.activate(labelConstranits)
  12. // 如果这个是false,那么topview中的label,可以出现在safeArea区域之外 topView.layoutMargins维持为0
  13. // 如果这个是true,那么topview的lable一定在safeArea之内。topView.layoutMargins也会变化
  14. viewa!.insetsLayoutMarginsFromSafeArea = false
  15. }

如上图所示,lable 落在了 safeArea 之外,如果把 insetsLayoutMarginsFromSafeArea 设置为 true,结果如下:

值得注意的是,创建约束时,一定要用 layoutMarginsGuide,否则,即使insetsLayoutMarginsFromSafeArea 设置为 true,也会落在 safeArea 之外。

preservesSuperviewLayoutMargins

When the value of this property is true, the superview’s margins are also considered when laying out content. This margin affects layouts where the distance between the edge of a view and its superview is smaller than the corresponding margin. For example, you might have a content view whose frame precisely matches the bounds of its superview. When any of the superview’s margins is inside the area represented by the content view and its own margins, UIKit adjusts the content view’s layout to respect the superview’s margins. The amount of the adjustment is the smallest amount needed to ensure that content is also inside the superview’s margins.

文档写的有点稀里糊涂的,我们看一个例子。

  • 蓝色的 view 上加了一层紫色的 view, 紫色的 view 上加了白色的 view
  • 蓝色 view 的 layoutMargins(top: 100, left: 50, bottom: 100, right: 40)
  • 紫色 view 的约束为顶部的底部差10,左右展开
  • 紫色 view 的 preservesSuperviewLayoutMargins 为 true
  • 白色 view 的约束为上下左右和紫色 view 的 layoutMarginsGuide 对齐
  • 紫色 view 的 layoutMargins(top: 0, left: 0, bottom: 0, right: 0)

如果 preservesSuperviewLayoutMargins 为 false,那么白色 view 和紫色 view 大小完全一致。由于这个属性为 true,所以紫色 view 在布局时,考虑到了父 view 的 layoutMargins,因此白色 view 大小被缩减了。

viewRespectsSystemMinimumLayoutMargins

系统的 VC 有一个默认的最小内间距,只读不可写,称为 systemMinimumLayoutMargins
即使我们设置了 rootview 的 directionalLayoutMargins,如果太小的话,系统会会退到系统默认的最小间距。

如上所示,VC 的 rootView 的内间距被设为了零,按照 layoutMarginsGuide 创建约束,左右仍然有内间距。是因为这个VC 的 systemMinimumLayoutMargins(top: 0.0, leading: 16.0, bottom: 0.0, trailing: 16.0)
如果把 viewRespectsSystemMinimumLayoutMargins 设置为 false,就可以扩展到边缘了。

参考

UIKit: Apps for Every Size and Shape的更多相关文章

  1. shape的简单用法

    shap节点-----------------------------------定义shape的值,必须是下面的之一:"rectangle" 矩阵,这也是默认的shape&quo ...

  2. android shape使用总结

    今天使用到shape,这个里面有很多属性,在这里我记录一下各个属性的使用的情况以及所代表的意思 <?xml version="1.0" encoding="utf- ...

  3. Android Drawable - Shape Drawable使用详解(附图)

    TIPS shape图形 –简单介绍 shape图形 –如何画? shape图形 –参数详细解析 shape图形 –如何用? shape图形 –实际开发应用场景 shape图形简单介绍 用xml实现一 ...

  4. 每日英语:Missing at Mobile World Congress: Innovation

    The hottest showcase for new technology at this year's Mobile World Congress wasn't in the event's c ...

  5. iOS8 对开发者来说意味着什么?

    今天凌晨,Apple WWDC2014 iOS8 正式推出! 也许,对于广大iOS用户来说,iOS8的创新并不是特别多. 但对于开发者来说,影响却将会是无比巨大的! 正如Apple官网上的广告:Hug ...

  6. cocos2d-x 2.2.0 图片选中聚焦 ,图片描边 CCClippingNode 实现

    效果例如以下图 左边箭头是x方向翻转的.右边箭头有旋转和缩放action. 大概实现方法:用箭头作为遮罩层,底图是一个绘制的矩形,得到一个黄色箭头背景.在用schedule尾随要聚焦箭头动作.这个 ...

  7. Auto Layout Guide----(一)-----Understanding Auto Layout

    Understanding Auto Layout 理解自动布局 Auto Layout dynamically calculates the size and position of all the ...

  8. UI与数据分离 与 UI的演进

    解藕的好处:UI内部模块能够灵活的变化. MVC或者三层架构着重强调了数据.业务逻辑和UI的分离. (MVC中的C只是UI和业务逻辑模块间的一个中转组件,理论上应该是个轻模块.) 以前的关注的解藕技术 ...

  9. iOS8 对开发人员来说意味着什么?

    今天凌晨.Apple WWDC2014 iOS8 正式推出. 或许,对于广大iOS用户来说,iOS8的创新并非特别多. 但对于开发人员来说,影响却将会是无比巨大的! 正如Apple官网上的广告:Hug ...

随机推荐

  1. bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验

    bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验 (解决办法) http://blog.csdn.net/biedazhangs ...

  2. 【Unity】2.1 初识Unity编辑器

    分类:Unity.C#.VS2015 创建日期:2016-03-26 一.简介 本节要点:了解Unity编辑器的菜单和视图界面,以及最基本的操作,这是入门的最基础部分,必须掌握. 二.启动界面 双击桌 ...

  3. python面向对象-3类的静态方法和类方法

    还是以上次的洗衣机例子: class Washer: company='ZBL' def __init__(self,water=10,scour=2): self._water=water #不想让 ...

  4. 使用Revel(go)开发网站

    Revel很好的利用了Go语言的goroutine,把每一个request都分配到了goroutine里.不用再写一大堆的回调.如果你写过nodejs的话就会深刻的体会到callback hell是什 ...

  5. struts2从浅至深(三)拦截器

    一:拦截器概述 Struts2中的很多功能都是由拦截器完成的. 是AOP编程思想的一种应用形式. 二:拦截器执行时机                             interceptor表示 ...

  6. PAT甲 1046. Shortest Distance (20) 2016-09-09 23:17 22人阅读 评论(0) 收藏

    1046. Shortest Distance (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The ...

  7. Amazon成本和产出的衡量方式

    Amazon用一种T-Shirt Size 估计的方式来做项目. 产品经理会对每一条需求评估上业务影响力的尺寸,如:XXXL 影响一千万人以上或是可以占到上亿美金的市场,XXL,影响百万用户或是占了千 ...

  8. 快速排序—三路快排 vs 双基准

    快速排序被公认为是本世纪最重要的算法之一,这已经不是什么新闻了.对很多语言来说是实际系统排序,包括在Java中的Arrays.sort. 那么快速排序有什么新进展呢? 好吧,就像我刚才提到的那样(Ja ...

  9. nodejs 上传文件 upload

    只是现在主要用nodejs做后端了,所以记录一些上传文件的使用方法. 上传文件的主要方式: 1.form上传,优点是方便,缺点是没法回调,上传后返回的数据没法处理 2.ajax上传,优点是可控制,有回 ...

  10. PHP编译安装完成之后没有'php.ini'文件的处理方法

    在我们编译安装PHP的时候,编译安装完成是不会自动生成php.ini文件的,所以需要我们手动生成. 1.通过命令行确定php.ini文件的位置 php -r "phpinfo();" ...