ios8来了,屏幕更大,准备好使用 iOS Auto Layout了吗?
引言:
Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应.
要完全掌握Auto Layout是一件非常消耗精力的事情,需要大量的实践,并且在根本上面,理解其如何使用,如果要全面的介绍Auto Layout和使用场景估计几篇博文都介绍不完,
本文希望能将使用Auto Layout的重点和技巧以及注意事项,进行一个介绍.成为学习Auto Layout的一个导航文章.
参考资料:
1:iOS7.0 Xcode5 Auto Layout 备忘录
http://www.cnblogs.com/thefeelingofsimple/p/3316300.html
2:iOS 6 Auto Layout NSLayoutConstraint 界面布局
3:iOS 6 新特性 Auto Layout
http://www.cocoachina.com/bbs/read.php?tid=116558
4:WWDC 2012 Session笔记——202, 228, 232 AutoLayout(自动布局)入门
http://onevcat.com/2012/09/autoayout/
5:iOS 6 自动布局 入门-1
6:先进的自动布局工具箱
使用:
1:理解概念
Auto Layout中文翻译过来意思是自动布局,通过内定的Constraint(约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图.
将我们想象中的结果展现出来.Constraint的设定非常灵活,实现一种布局的方法可以通过多Constraint套来完成.
以下几点是我们在开始使用之前必须弄清楚的事情:
1:我们要抛弃以往旧的布局方式不再去关注View的Frame,Center,和autoresizing. 因为这些坐标和大小的定位都可以通过来Auto Layout完成.
2:理解每一种Constraint的含义,否则,当你去看别人的实现的Constraint时,就会有种看天书的感觉.
3:按意图设计,一切按我们理想中的效果去布局,只要约束设定的合理,就一定能够完成目标布局.
2:开始使用
先从Interface Builder开始吧. 打开某个Xib或者StoryBoard,
在右侧Show in file inspector里面找到Ues Autolayout,将其勾选.如下图:
自此,Autolayout便启用成功,autoresizingMask被废弃.其所有以往的功能和特性都被Autolayout取代.
现在我们定位控件位置的方式,不再像以前一样,计算好每一个控件具体的位置,x是多少,y是多少.
而是思考,这个控件离左边是相隔多少距离,或者离顶部或底部相隔多少距离.
而有些规则性的事情还是类似的,比如我们定位一个控制的位置,一定要有x,y两个坐标点同时有值,少一个都不能正常显示.
同样Autolayout在创建约束时也一样,在思考完离顶部距离以后,还需要思考离顶部距离,否则控件的显示位置一样无法正常显示.
换言之,要让Autolayout计算出合理的位置,需要保证水平距离和垂直距离同时存在. 否则IDE,都会给出警告,提示这样的布局Ambiguous
Layout(模凌两可)
接下来,让我们来熟悉一下Interface Builder提供哪些实现Autolayout的功能:
观察一下界面预览右下角,有一排如下图这样的按钮:
这些是Interface Builder用来创建Constraint的主要方式,同时,我们也可以在Xcode的菜单栏中找到这些功能,如下图:
这些功能分别如下图中描述的那样:
如果是从代码层面开始使用Autolayout,需要对使用的View的translatesAutoresizingMaskIntoConstraints的属性设置为NO.
即可开始通过代码添加Constraint,否则View还是会按照以往的autoresizingMask进行计算.
而在Interface Builder中勾选了Ues Autolayout,IB生成的控件的translatesAutoresizingMaskIntoConstraints属性都会被默认设置NO.
3:从旧的IB布局中转换成Auto layout
4:熟练使用Interface Builder
5:通过代码来构建自动布局
代码创建的约束有两种方式:
1:常规约束,写法非常冗长,但能实现所有的约束方式以及非常特殊的约束方式,代码如下:
- //实例化Button
- button1 = [[UIButton alloc] initWithFrame:(CGRectZero)];//这里不再需要去刻意指定x.y等坐标.
- [button1 setTitle:@"yushuyi" forState:UIControlStateNormal];
- [button1 setBackgroundColor:[UIColor redColor]];
- [button1 sizeToFit];
- [button1 setTranslatesAutoresizingMaskIntoConstraints:NO];//将使用AutoLayout的方式来布局
- [self.view addSubview:button1];
- //创建了一个水平居中父视图的约束
- NSLayoutConstraint *constraint = [
- NSLayoutConstraint
- constraintWithItem:button1
- attribute:NSLayoutAttributeCenterX
- relatedBy:NSLayoutRelationEqual
- toItem:self.view
- attribute:NSLayoutAttributeCenterX
- multiplier:1.0f
- constant:00.0f
- ];
- [self.view addConstraint:constraint];//将约束添加到对应的父视图中
- //继续创建了一个位于父视图底部相隔20距离的约束
- constraint = [
- NSLayoutConstraint
- constraintWithItem:button1
- attribute:NSLayoutAttributeBottom
- relatedBy:NSLayoutRelationEqual
- toItem:self.view
- attribute:NSLayoutAttributeBottom
- multiplier:1.0f
- constant:-20.0f
- ];
- [self.view addConstraint:constraint];
值得注意的是,添加约束之前一定要将子视图优先addSubview到父视图中,否则在添加约束时会产生编译器警告.
而我们在理解的时候,可以通过这种方式来理解.
item1.attribute = multiplier ⨉ item2.attribute + constant
2:可视化格式语言约束
所谓可视化格式语言约束,是一种很直观的理解方式,当然,前提是你已经熟练理解这套语言的规则.
通过可视化语言可以一次性创建多个约束. 这对于第一次方式来说,是相当方面和容易理解的.但可视化语言不是所有约束都能满足.
我们可以用正则表达式的学习方式来学习这项可视化格式语言.举例代码如下:
- //创建需要参与约束规则的对象字典 <span style="font-family:Arial,Helvetica,sans-serif">表示这三个Button将参与Autolayout的约束处理</span>
- NSDictionary *viewsDic = NSDictionaryOfVariableBindings(deleteButton,cancelButton,nextButton);
- NSArray *constraints = nil;
- constraints = [NSLayoutConstraint constraintsWithVisualFormat:
- @"H:|-25-[deleteButton(==cancelButton@700)]-(>=8)-[cancelButton(140)]-[nextButton(nextButtonWidth)]-rectY-|"//水平 可视化格式语言
- options:NSLayoutFormatAlignAllTop //对齐功能
- metrics:@{@"rectY":@5,@"nextButtonWidth":@30}//指标参数
- views:viewsDic];//参与约束的对象字典
- [self.view addConstraints:constraints];
- constraints = [NSLayoutConstraint constraintsWithVisualFormat:
- @"V:[nextButton]-|" //垂直 可视化格式语言
- options:0 //无条件
- metrics:nil//不带指标参数
- views:viewsDic];//参与约束的对象字典
- [self.view addConstraints:constraints];
- // [deleteButton setContentHuggingPriority:249 forAxis:UILayoutConstraintAxisHorizontal];
这简单的十行代码,如果你没有学习过Autolayout也会看出一些猫腻,似乎看懂了.但又似懂非懂.接下来就详细解释一下
在解释之前,先看看上面这些代码执行后的效果,竖屏如下图:
横屏:
三个按钮位于视图的底部,有大有小,中间有间隔.
3:通过第三方Auto Layout的增强类别包,来实现约束的创建
https://github.com/smileyborg/UIView-AutoLayout
UIView-AutoLayout的出现如作者所说,其实现思路来源于Interface Builder. 所以在其API命名方面可以找到很多Interface Builder的影子,
博主极力推荐这个类库,通过它来创建约束是一件非常愉快的事情,思路清晰,当有个前提是,你已经理解了Auto Layout各项规则.
constraintsAffectingLayoutForAxis //约束检查 为什么这个View 这样显示
6:调试:
看懂IB给出的警告:
通过代码来检测 模凌两可的布局:
总结:
ios8来了,屏幕更大,准备好使用 iOS Auto Layout了吗?的更多相关文章
- 梭子鱼:APT攻击是一盘更大的棋吗?
随着企业对IT的依赖越来越强,APT攻击可能会成为一种恶意打击竞争对手的手段.目前,APT攻击目标主要有政治和经济目的两大类.而出于经济目的而进行的APT攻击可以获取竞争对手的商业信息,也可使用竞争对 ...
- Qt带来的是更加低廉的开发成本和学习成本,对于很多小公司而言,这种优势足以让他们获得更大的利润空间 good
不能单纯从技术上来看待这个问题,Qt本来是小众的开发平台,个人认为,它的出现只是解决特性场景的特定问题,Qt带来的是更加低廉的开发成本和学习成本,对于很多小公司而言,这种优势足以让他们获得更大的利润空 ...
- 在.NET中快速创建一个5GB、10GB或更大的空文件
对于通过UDP进行打文件传输的朋友应该首先会考虑到一个问题,那就是由于UDP并不会根据先来先到原则进行发送,也许你发送端发送的时候是以包1和包2的顺序传输的,但接收端可能以包2和包1 的顺序来进行接收 ...
- [Swift]LeetCode496. 下一个更大元素 I | Next Greater Element I
You are given two arrays (without duplicates) nums1 and nums2 where nums1’s elements are subset of n ...
- [Swift]LeetCode503. 下一个更大元素 II | Next Greater Element II
Given a circular array (the next element of the last element is the first element of the array), pri ...
- [Swift]LeetCode1019. 链表中的下一个更大节点 | Next Greater Node In Linked List
We are given a linked list with head as the first node. Let's number the nodes in the list: node_1, ...
- 1197多行事务要求更大的max_binlog_cache_size处理与优化
1197多语句事务要求更大的max_binlog_cache_size报错 binlog_cache_size:为每个session 分配的内存,在事务过程中用来存储二进制日志的缓存,提高记录bi ...
- MT【272】更大的视野,更好的思路.
已知$f(x)=\sum\limits_{k=1}^{2017}\dfrac{\cos kx}{\cos^k x},$则$f(\dfrac{\pi}{2018})=$_____ 分析:设$g(x)=\ ...
- Leetcode 496. 下一个更大元素 I
1.题目描述 给定两个没有重复元素的数组 nums1 和 nums2 ,其中nums1 是 nums2 的子集.找到 nums1 中每个元素在 nums2 中的下一个比其大的值. nums1 中数字 ...
随机推荐
- jmeter正则提取器提取指定位置的字符串
1.需求:提取登录后的凭证ticket供系统其他接口调用 2.登录接口返回的格式如下: { "ret_code":0, "ret_msg":"logi ...
- Java——ArrayList底层源码分析
1.简介 ArrayList 是最常用的 List 实现类,内部是通过数组实现的,它允许对元素进行快速随机访问.数组的缺点是每个元素之间不能有间隔, 当数组大小不满足时需要增加存储能力,就要将已经有数 ...
- [AGC040B]Two Contests
Description 给出若干条线段 \((L[i], R[i])\) ,把他们分成两个非空的集合,最大化集合内线段交的和. \(n\le 10 ^ 5\) Solution 考虑最小的一个右端点 ...
- 牛客练习赛51 C 勾股定理
链接:https://ac.nowcoder.com/acm/contest/1083/C 题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角三角形. 输 ...
- GUI自动化测试中优化测试用例思维方法
1.测试脚本与数据解耦(数据驱动) 让操作相同但是数据不同的测试可以通过同一 套自动化测试脚本来实现,只是在每次测试执行时提供不同的测试输入数据. 2.页面对象模型(POM) 以页面为单位来封装页面上 ...
- HNUSTOJ-1636 心电图
1636: 心电图 时间限制: 1 Sec 内存限制: 128 MB提交: 583 解决: 231[提交][状态][讨论版] 题目描述 众所周知,ACM/ICPC实验室聚集了一堆学霸Orz 有学霸 ...
- SharePoint自己定义程序页面部署 不用重新启动IIS
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/dz45693/article/details/30840255 SharePoint的部署方式默认是 ...
- 【问题解决方案】Centos操作文件vim-No write since last change (add ! to override)
参考链接 CSDN:Centos 7 操作文件No write since last change (add ! to override) 问题描述: :q或者:wq退出失败,显示如No write ...
- 公用flex类
开发过程中,很多布局,用antd的栅格还是不灵活,flex弹性布局会更好用 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 注意 ...
- Maven 添加其他Maven组件配置问题
在父工程的pom文件里,添加如下配置 <project> <!--其它配置--> <modules> <module>A项目文件夹</module ...