寒哥细谈之AutoLayout全解

时间：2016-03-01 10:51:26 阅读：157 评论：0 收藏：0 [点我收藏+]

标签：

文／南栀倾寒（简书作者）
原文链接：http://www.jianshu.com/p/683fbcbfb705
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

看到群中好多朋友还停留在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从哪里入手

haha.gif

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

AutoLayout+IB中操作的属性介绍

Paste_Image.png

我们会发现貌似这个玩意好多配置貌似很麻烦的样子下面我们挨个讲解

1.相对处理（Pin）：

属性说明：
1:距离边缘最上面的4个虚线表示某个View的距离上边左边右边下边多高
2:那个蓝色的Constrain To Margins 是iPhone6出现之后。
Apple 觉得更大的分辨率有点间距好看，默认为8 ，如果这个勾上了这个View距离四周的值就变成了你输入的值+8。一般建议勾掉。

let`s Play

我们开始Demo前先想想我们在Frame时代布局需要什么？

：
{
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

haha.gif

请注意我这里把距离下面的，也就是BottomLayoutGuide的约束改成了距离控制器的View 为什么？
因为BottomLayoutGuide是晚于View加载的如果参考这个会造成进入页面会卡一下尽量不要直接参考下面 TopLayoutGuide 则没事

加完约束你会发现貌似并没有什么效果？
不是的，屏幕中出现的黄色的线条这是IB在提升我们你所添加的约束和真实的尺寸不一样怎么修改？继续图

haha.gif

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

Demo 2 某个View距离在父View的左侧20 上20 宽高为 100 ， 100

haha.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中的宽高一样

haha.gif

属性6 AspectRatio 比例
假设某个View距离父View右上角20 ，20 宽高比 2：1 宽100

haha.gif

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

我们点击下某个约束

Paste_Image.png

AutoLayout的公式

第一个Item的属性= (<= />= )第二个Item的属性*Multiplier+Constant
第一个Item的属性= (<= />= )第二个Item的属性*Multiplier+Constant
第一个Item的属性= (<= />= )第二个Item的属性*Multiplier+Constant

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

注意比例是支持表达式的如 2：3
releation是支持great than lessthan 具体是多少系统自动算出

2. 对齐处理（Align）

介绍

属性说明：Leading Edges：左对齐

Trailing Edges：右对齐

Top Edges：上对齐

Bottom Edges：下对齐

Horizontal Centers：水平中心对齐

Vertical Centers：竖向中心对齐

Baselines：基线对齐

Horizontal Center in Container：对齐容器中的水平中心

Vertical Center in Container：对齐容器中的竖向中心