细谈之AutoLayout全解

转载 2016年05月31日 15:58:49

看到群中好多朋友还停留在Frame布局的痛苦时代,以及有些开发者接手别人的就项目发现布局一团乱。
而且没有启动图的时候并不是真正真正适配iPhone 6(S)、iPhone6(S) Plus等设备 。
寒哥准备尽可能详细的讲一讲我所掌握的AutoLayout 。

AutoLayout很难?
我觉得AutoLayout的难的、约束的选择性太多,抽象性增加,大家直接看书或者看博客不太好理解,但是有人教的话还是挺快的。所以我尽量用GIF的方式给大家展现。

AutoLayout是什么?

  • Autolayout是一种布局技术,专门用来布局UI界面的。用来取代Frame布局在遇见屏幕尺寸多重多样的不足

  • Autolayout自iOS6开始引入,由于Xcode4的不给力,当时并没有得到很大的推广

  • 在iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升

苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
Autolayout能轻松的解决屏幕适配的问题


AutoLayout从哪里入手?

1.gif

自从Xcode6之后,你会看到我们新建一个Single Application,会发现一个ViewController的View非常大,跟任何一个iPhone/iPad的尺寸都不一样,这些都是假象、假象、假象。Apple 把尺寸抽象为了一个正方形,到真正的设备上才是真正的布局。
AutoLayout+IB中操作的属性介绍

2.png3.png4.png

我们会发现貌似这个玩意好多配置,貌似很麻烦的样子。下面我们挨个讲解:
1.相对处理(Pin):

5.png

属性说明:
1:距离边缘 最上面的4个虚线表示某个View的距离上边、左边、右边、下边多高。
2:那个蓝色的Constrain To Margins 是iPhone6出现之后。
Apple 觉得更大的分辨率有点间距好看,默认为8,如果这个勾上了,这个View距离四周的值就变成了你输入的值+8。 一般建议勾掉 。
let`s Play
我们开始Demo前先想想我们在Frame时代,布局需要什么:

1
2
3
4
{
original:{x,y}
size:{width,height}
}

在iOS中布局是绝对定位的(大致这么理解吧)。
所以我们需要某个View的X,Y,W,H
我们从基本的入门 ,我们无论添加多少约束,都是需要定位好某个View的X,Y,W,H。

少了不行,多了更不行。

少了不行,多了更不行。

少了不行,多了更不行。

重要的事情说三遍。这里先不讨论UIlabel、UITextView、UIImageView等自带的内建高度。

  • Demo 1.某个View距离父View上下左右间距全部为20。

6.png

请注意我这里把距离下面的,也就是BottomLayoutGuide的约束改成了距离控制器的View,为什么?

因为BottomLayoutGuide是晚于View加载的,如果参考这个,会造成进入页面会卡一下。尽量不要直接参考下面 TopLayoutGuide 则没事。

加完约束你会发现貌似并没有什么效果?

不是的,屏幕中出现的黄色的线条 ,这是IB在提升我们你所添加的约束 。和真实的尺寸不一样,怎么修改?继续图:

7.gif

属性说明3,4 固定某个View的宽高。

  • Demo 2.某个View距离在父View的左侧20,上20,宽高为:100,100。

8.gif

注意我在添加约束的时候有个选项叫做updateFrame,如果勾选会直接将Frame调整到真实值,而不需要再次update 。
这里我们只是讲了最简单定位单个View,你会觉得和Frame并没有什么区别 。

区别在于:AutoLayout的核心是参照,也就是基本上任何一个View都可以参照另一个View。

接下来讲解Pin里面第5,6个属性:

equal、Width、equal、Height,选中的多个View宽高相等。

  • Demo 3.某个View距离在父View的左侧20,demo2中白色View,上20,宽高和Demo2中的宽高一样。

9.gif

属性6.AspectRatio比例。
假设某个View距离父View右上角20 ,20 宽高比 2:1 宽100。

10.gif

第七个属性Align其实在第一个面板中已经有了,放在下一部分讲解。
是时候给讲解下约束是什么玩意了刚才你看到我对约束修改了。
我们点击下某个约束。

11.gif

AutoLayout的公式

1
2
3
第一个Item的属性= (= )第二个Item的属性*Multiplier+Constant
第一个Item的属性= (= )第二个Item的属性*Multiplier+Constant
第一个Item的属性= (= )第二个Item的属性*Multiplier+Constant

比如图中的View 约束 可以理解为:View的tralling(右侧) 等于(eauql) 1倍(multpiler)的控制的右侧 + 20(constant)

1
2
注意比例是支持表达式的 如 2:3
releation是支持great than  lessthan

具体是多少 系统自动算出
2. 对齐处理(Align)

12.png

介绍:
属性说明:
Leading Edges:左对齐
Trailing Edges:右对齐
Top Edges:上对齐
Bottom Edges:下对齐
Horizontal Centers:水平中心对齐
Vertical Centers:竖向中心对齐
Baselines:基线对齐
Horizontal Center in Container:对齐容器中的水平中心
Vertical Center in Container:对齐容器中的竖向中心
Demo 4.某个View距离在父View的右侧20,demo3中白色View上20,宽高和Demo3中的宽高一样,并且有对齐。

13.png

Demo5.某个View 居中与父View 长宽50。

14.gif

某些控件是有baseLine的,如UILabel、UITextView,看下不同吧。
Demo6.某个label和另外一个label基线对。

15.gif

3. UILabel内建高度自适应高度
像label ,默认是有宽度的,宽度就是字体自适应的。
这样我们就可以不给UIlabel高度,把Label的NumberOfline = 0就可以自适应高度了。
Demo7.Label自适应高度:

16.gif

4. 小技巧
1.有时候约束太多的时候,我们可以给某个View起个假名字,就能很方便的看到是哪个View了。
2.View总是选不中按 ctrl + shift + 单击。

17.gif

3.AutoLayout遇见ScrollView。
参看这个文章《AutoLayout深入浅出三[相遇Scrollview]》,如图

19.png

  • Demo 8.ScrollView过长,无法编辑怎么办?

20.gif

将控制器改为Freedom,修改ContentView的高度约束,这样ScrollView就可以滚动了,也可以往下编辑了。

5.AutoLayout遇见UItableViewCell

AutoLayout深入浅出四[不仅是UIWebView与UITableView的纠缠]

AutoLayout深入浅出五[UITableView动态高度]

动态计算UITableViewCell高度详解

以上4个为讲解 。

下面实践:

https://github.com/forkingdog/UITableView-FDTemplateLayoutCell博客讲解

6.个人写的小技巧

《AutoLayout分分钟搞定等比例布局》

《友好的ContainerView&AutoLayout资料推荐》

7.iOS 9及AutoLayout的注意点:
当然也是我写的。AutoLayout好多好多不懂的,终于明白了。
总结:在StoryBoard里面开发其实就是拿着ViewController当做View用,如果你还是觉得复杂,可以把View抽象出去。

21.png


相关文章推荐

细谈之AutoLayout全解

看到群中好多朋友还停留在Frame布局的痛苦时代,以及有些开发者接手别人的就项目发现布局一团乱。 而且没有启动图的时候并不是真正真正适配iPhone 6(S)、iPhone6(S) Plus...

细谈VC程序调试的若干方法.doc

  • 2010年03月09日 19:39
  • 22KB
  • 下载

细谈HTML 5新增的元素

  • 2011年11月29日 11:51
  • 42KB
  • 下载

文科生细谈学习Linux系统的重要性

首先大概介绍下自己,我学的是公共事业管理方面的专业,可以说是面向纯理论,社区管理社会管理的专业,但是从大二开始,对网络及服务器运维方面产生浓厚兴趣,并不断在网上找相关资料。 在这期间经历过很多,...

Java程序员从笨鸟到菜鸟之(七十八)细谈Spring(七)spring之JDBC访问数据库及配置详解

利用spring访问数据库是我们ssh程序中必不可少的步骤,在没有hibernate之前,我们一般都用jdbc访问数据库,所以用jdbc访问数据库必不可少的要进行一些配置,spring中为我们提供了访...

多轴飞行器无人机硬件技术细谈

http://www.52rd.com/S_TXT/2015_3/TXT65233.HTM   多轴飞行器无人机硬件技术细谈 52RD.com 2015年3月6日 电子工程专辑            ...

【搜索那些事】细谈lucene(一)初识全文资源检索框架lucene

算算差不多有小半年没正儿八经的写博客了,从考完专升本考试就直接参加了工作,工作四个月之后又回来上本科,开学又在校内创办了CSDN高校俱乐部,制定学员学习方向,搞讲座,办公开课,反正一切事情很多。现在开...

细谈C语言中的strcpy,strncpy,memcpy,memmove,memset函数

转自:http://blog.csdn.net/piaojun_pj/article/details/5945926 一.函数介绍: 1、memcpy 函数原型:extern void *mem...

Java程序员从笨鸟到菜鸟之(三十七)细谈struts2(二)开发第一个struts2的实例

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188                前面一篇博客(细谈struts2之自己实现struts2...

Java程序员从笨鸟到菜鸟之(八十二)细谈Spring(十一)深入理解spring+struts2整合(附源码)

Spring和struts2是我们在项目架构中用的比较多的两个框架,怎么才能把这两个框架用好,怎么来整合是我们掌握运用这两个框架的关键点,下面我们就怎么来整合,从哪来整合,为什么要整合,从这几点来看一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:细谈之AutoLayout全解
举报原因:
原因补充:

(最多只允许输入30个字)