iOS自动布局(AutoLayout)之 NSLayoutAnchor
自动布局(AutoLayout)之 NSLayoutAnchor 方式使用
AutoLayout
自动布局(AutoLayout)是iOS6引入的关系布局,实现动态位置和多视图关系的布局方式,是对frame布局和AutoresizingMask的不足进行补充的一种方式,现在已经成为主流的布局方案,由于原始创建方式比较复杂,可以使用优秀的第三方框架方便创建约束(Swift: SnapKit, Objective-C: Masonary)。
自动布局创建约束方式:
- 基于frame属性自动转化AutoLayout的约束,需要
translatesAutoresizingMaskIntoConstraints
为true. - 通过NSLayouConstraint创建,比较麻烦且代码量多。
- 通过VFL语法创建约束组添加,不适合复杂布局,且理解有一定难度。
- NSLayoutAnchor, iOS9.0后添加的布局特性,是原生代码布局中最方便的。
- 直接在xib或storyboard中添加,最方便简单的实现自动布局方式。
自动布局基本原则:
- 创建约束尽量参考依赖父视图。
- 约束意义明确完整,尽量避免约束冲突
- 代码添加约束,一定要将View的
translatesAutoresizingMaskIntoConstraints
属性设置为false,否则约束不起效果。 - 先添加到父视图,再添加约束,否则会崩溃。
NSLayoutAnchor
NSLayoutAnchor是对AutoLayout创建约束的补充,核心还是NSLayoutConstraint,可以避免过长创建约束代码。NSLayoutAnchor可以理解为约束描边,通过视图之间的边关系和X、Y轴关系,以及定义自身宽高来创建约束。
锚(Anchor)关系
苹果公司为UIView添加如下属性Anchor来作为约束参考
四边关系
Anchor(锚边) | 描述 |
---|---|
leadingAnchor | 前边锚(与trailingAnchor成对使用) |
trailingAnchor | 后边锚 |
leftAnchor | 左边锚(与rightAnchor成对使用) |
rightAchor | 右边锚 |
topAnchor | 上边锚 |
bottomAnchor | 下边锚 |
大小关系
Anchor(锚) | 描述 |
---|---|
widthAnchor | 宽度约束 |
heightAnchor | 高度约束 |
中心点关系
Anchor(锚点) | 描述 |
---|---|
centerXAnchor | X轴对齐关系 |
centerYAnchor | Y轴对齐关系 |
基准线
Anchor(锚) | 描述 |
---|---|
firstBaseLineAnchor | 文本首行基准线 |
lastBaeLineAnchor | 文本最后一行基准线 |
基本使用
实现灰色View和橙色View对齐,且大小相同。
1.初始化视图,并添加到父视图
private var grayView = UIView()private var orangeView = UIView()grayView.backgroundColor = .grayorangeView.backgroundColor = .orange// 1. 先添加到父视图view.addSubview(grayView)view.addSubview(orangeView)
2.设置取消自动转化frame为约束
// 2.设置取消自动转化frame为约束grayView.translatesAutoresizingMaskIntoConstraints = falseorangeView.translatesAutoresizingMaskIntoConstraints = false
3.通过锚关系添加约束
// 3. 添加约束grayView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 15).isActive = truegrayView.topAnchor.constraint(equalTo: view.topAnchor, constant: 80).isActive = truegrayView.heightAnchor.constraint(equalToConstant: 40).isActive = truegrayView.widthAnchor.constraint(equalToConstant: 40).isActive = truegrayView.rightAnchor.constraint(equalTo: orangeView.leftAnchor, constant: -15).isActive = true // 注意这里的值为负值[是相对于orangeView坐标系来确定值]orangeView.centerYAnchor.constraint(equalTo: grayView.centerYAnchor).isActive = trueorangeView.widthAnchor.constraint(equalToConstant: 40).isActive = trueorangeView.heightAnchor.constraint(equalToConstant: 40).isActive = true
与创建NSLayoutConstraint一样,也可以设置约束优先级,大于等于,小于等于等关系。
关系值确定
不知道你对grayView.rightAnchor.constraint(equalTo: orangeView.leftAnchor, constant: -15).isActive = true
这个约束有没有疑问?为啥 值是负的,如果是使用xib来添加约束,他们两个的关系应该是15。
那是因为这个约束值是以orangeView的left锚为原点坐标系来确定的,灰色right边在次坐标系中的数值就是负值。参考以下示例图
同理特别容易出错的还有需求,如果现在需要灰色view与橙色view的距离大于等于15.
90%的人会写如下错误代码:
grayView.rightAnchor.constraint(greaterThanOrEqualTo: orangeView.leftAnchor, constant: 15).isActive = true
// 语义上描述就是: 灰色view的right边大于等于橙色left边15距离
事实真是这样吗?你看
他们反而重合了,那你说把值换为负值总可以了吧!
grayView.rightAnchor.constraint(greaterThanOrEqualTo: orangeView.leftAnchor, constant: -15).isActive = true
然而并不是?你看下面这张图
由于是参考橙色left边的为原点的坐标系,所以是负值,又因为距离越大负得越多,值越小(-15 > -65)所以就需要使用小于等于,是不是和xib有点相反。
正确约束应该为:
grayView.rightAnchor.constraint(lessThanOrEqualTo: orangeView.leftAnchor, constant: -15).isActive = true
Tips: 在创建leftAnchor或者TopAnchor,一般为正值和xib一致,但是rightAnchor和BottomAnchor就要注意参考哪个坐标系原点来取值,来决定正负值和大于等、小于等于关系选择
参考坐标系的确定是以参数中视图锚边为原点坐标系(注意:此坐标系,不同于view的坐标系,这是一个以边为原点的虚拟坐标系)
UILayoutGuide
UILayoutGuide用于辅助添加约束,它的作用就像一个透明的View,具备约束参考,但是不会渲染。
假如我们想让三个view水平对齐,且中间间距相等。我们就可以使用UILayoutGuide辅助实现。
创建view即layoutGuide
private var grayView = UIView()private var orangeView = UIView()private var redView = UIView()private var layouGuide1 = UILayoutGuide()private var layouGuide2 = UILayoutGuide()
添加view到父视图
// 1. 先添加到父视图view.addSubview(grayView)view.addSubview(orangeView)view.addSubview(redView)// layoutGuide也需要添加进来view.addLayoutGuide(layouGuide1)view.addLayoutGuide(layouGuide2)
通过锚关系添加约束
// 2.设置取消自动转化frame为约束grayView.translatesAutoresizingMaskIntoConstraints = falseorangeView.translatesAutoresizingMaskIntoConstraints = falseredView.translatesAutoresizingMaskIntoConstraints = false// 3. 添加约束// 添加layoutGuide的约束layouGuide1.widthAnchor.constraint(equalTo: layouGuide2.widthAnchor, multiplier: 1.0).isActive = truelayouGuide1.heightAnchor.constraint(equalToConstant: 1).isActive = truelayouGuide2.heightAnchor.constraint(equalToConstant: 1).isActive = true// 添加view和layouGuide的约束grayView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 30).isActive = truegrayView.topAnchor.constraint(equalTo: view.topAnchor, constant: 80).isActive = truegrayView.heightAnchor.constraint(equalToConstant: 40).isActive = truegrayView.widthAnchor.constraint(equalToConstant: 40).isActive = truegrayView.rightAnchor.constraint(equalTo: layouGuide1.leftAnchor).isActive = truelayouGuide1.rightAnchor.constraint(equalTo: orangeView.leftAnchor).isActive = trueorangeView.widthAnchor.constraint(equalToConstant: 40).isActive = trueorangeView.heightAnchor.constraint(equalToConstant: 40).isActive = trueorangeView.rightAnchor.constraint(equalTo: layouGuide2.leftAnchor).isActive = truelayouGuide2.rightAnchor.constraint(equalTo: redView.leftAnchor).isActive = trueredView.widthAnchor.constraint(equalToConstant: 40).isActive = trueredView.heightAnchor.constraint(equalToConstant: 40).isActive = trueredView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -15).isActive = true// 灰色、橙色、红色view和layoutGuide1、layoutGuide2水平中心对齐grayView.centerYAnchor.constraint(equalTo: layouGuide1.centerYAnchor).isActive = trueorangeView.centerYAnchor.constraint(equalTo: grayView.centerYAnchor).isActive = trueorangeView.centerYAnchor.constraint(equalTo: layouGuide2.centerYAnchor).isActive = trueorangeView.centerYAnchor.constraint(equalTo: redView.centerYAnchor).isActive = true
代码量还是有点多,还是xib和storyboard香。
参考
- 官网文档
- 通过VFL语法实现AutoLayout约束添加
- AutoLayou约束布局的发展
iOS自动布局(AutoLayout)之 NSLayoutAnchor相关推荐
- iOS 自动布局 Autolayout 报错:Unable to simultaneously satisfy constraints.
在使用自动布局时,不断的报下面的错误: Unable to simultaneously satisfy constraints. Probably at least one of the const ...
- android自动布局优先级,自动布局AutoLayout
1:理解概念 Auto Layout 中文翻译过来意思是 自动布局 ,通过内定的 Constraint (约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图. 将我们想象中的 ...
- 关于IOS的Autolayout特性的理解以及使用
前段时间时间总是在纠结这个ios的Autolayout的布局问题.总感觉Apple这样做很麻烦,感觉Autolayout的代码写起来很别扭.半个眼都不想去看那些代码,又臭又长.其实不然,当现在Appl ...
- 第三方库Masonry自动布局AutoLayout使用
布局: 1. 放在哪 坐标 CGPoint(x, y) 2. 有多大 尺寸 CGSize(width, height) 布局方式: 1.绝对布局(FrameLayout)也称 坐标布局 ...
- IOS之AutoLayout框架的使用
IOS之AutoLayout框架的使用 #import "UIView+AutoLayout.h" [citySearchResultController.view autoPin ...
- Unity中的自动布局(AutoLayout)
本文分享Unity中的自动布局(AutoLayout) 在大部分情况下, Unity提供的RectTransform已经足够应付我们日常遇到的需求, 我们一般通过手动修改RectTransform即可 ...
- 【iOS开发】Mansory自动布局(autolayout)使用教程
一.简介 Mansory Mansory是一个轻量级的自动布局库,采用独特的链式语法进行代码封装,具有高可用性和阅读性等特点,支持iOS和Mac OS X. 先上点官方的代码,当当开胃菜. Heres ...
- iOS中AutoLayout自动布局,自适应高度
以往我们做cell的自适应的时候都是要写许多的代码进行计算高度,而且在适配的时候容易出现问题,费时耗工.那么下面我们就共同探讨一种基于xib的自动计算高度的方法 1.我们先创建tableView,ta ...
- iOS 自动布局框架 – Masonry 详解
来源:伯乐在线 - 刘小壮 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了 ...
最新文章
- 1004_C/C++笔试题_13:16道c语言面试【8/9】
- svn客户端文件显示灰色的对号代表什么
- win10巨帧数据包在哪里设置_Win10电脑总感觉网速慢,是什么原因
- c语言奇数值结点链表,习题11-7 奇数值结点链表 (20 分)
- 八种Docker容器开发模式解析
- GS使用HTTPS登录的设置过程
- windows 7搭建流媒体服务
- python刷题_小李飞刀:用python刷题ing....
- vc浏览器_自主创业项目推荐,晨兴资本刘芹:我的市场非共识+超配投资原则VC洞见...
- mysql开启slowquery_log_MySQL slow_query_log慢查询日志配置详解
- python判断图片类型_python模块之imghdr检测图片类型
- 内存图片IOS app启动动画的实现
- 七月老师python_七月在线Python数据分析入门
- arcgis中editor在哪_leetcode 刷题工具 leetcode-editor 本地调试篇
- #java项目#《水果库存系统1.0》(java(jdbc)+mysql)
- Redis开启远程访问
- 新人爬虫学习_爬取腾讯招聘信息
- 为什么说Python现在是风口上的猪?
- 信息安全风险评估---矩阵法计算风险
- CTS/ITS/GSI
热门文章
- 1600802071
- 告别“臃肿”,选择微服务(文末福利)
- 麻烦不断,Uber因保护用户隐私不力要接受20年的审计
- 网络报错:“The connection is not for this device.”
- springmvc接收前台(可以是ajax)传来的数组list,map,set等集合,复杂对象集合等图文详解...
- JSR-303 Bean Validation 介绍及 Spring MVC 服务端验证最佳实践
- 支付宝移动支付文档url
- 清理SQL Server日志释放文件空间的终极方法
- 安装Maya 6.5指南
- Saiku的下载与安装(一)