xcode6 使用layout自动布局

刚刚学习了xcode6的自动布局,发现网上的教程有很多,写的也很详细,但还是感觉很复杂,自己实现不了这个效果.但是最终还是尝试出了一些方法,并且能够实现较为固定的xib布局,可以作为layout的入门级别的吧.其实layout看上去很复杂,但是明白了最基本的原理之后就会变的清晰很多.

layout中的约束:

(固定值)

top spacing :视图距离父视图顶部保持一个固定的距离

bottom spacing:视图距离父视图底部保持一个固定的距离

trailing spacing:视图距离父视图右边保持一个固定的距离

leading spacing:视图距离父视图左边保持一个固定的距离

left:两个视图的左边界相等

right:两个视图的右边界相等

top:两个视图的上边界相等

bottom:两个视图的底边界相等

width:视图自身的宽度是一个固定的值

height:视图自身的高度是一个固定的值

center vertically:视图与父视图保持垂直方向的固定

center horizontally:视图与父视图保持水平方向的固定

(固定比例)

equal widths:两个同级视图保持相同的宽

equal heights:两个同级视图保持相同的高

aspect ratio:视图自身保持固定的宽高比

以上就是xib中最常用的约束,

布局的状态:

1.布局约束不足.(视图的位置不能唯一的确定)

我们只给一个视图添加bottom spacing约束.现在处于的就是约束不足的状态.

也就是其他的状态都是未确定.

2.约束充足的状态(视图的位置能够唯一的确定)

再为视图添加leading,trailing spacing,aspect

先是通过三个固定值的约束固定了视图的位置,这时只有上面没有约束,并且视图会因为尺寸的改变而在横向拉伸,添加保持比例的约束之后,视图的形状保持不变,这样无论在哪里显示效果都是唯一个.这里说明aspect实在所有的视图效果生效后才起作用.也就是如果其他的约束限定了宽高.那么他就不起作用了.我们让一个视图的约束变得充足大都是需要4个方向的约束.

3.约束冲突(视图的位置在固定值约束上有冲突)

如果我们在为视图添加一个约束width,这时约束就会发生冲突,使所有的约束失效.约束冲突是由于固定值的约束引起的,因为leading tailing 和width这三个就会固定住父视图的宽,也就是不能够在拉伸了.我们可以把固定值约束想象成砖头,把比例约束想象成(可以保持自身和其他同级视图的)水泥,这样能够让我们更形象的布局.

所以我们利用约束实现布局的时候,就要避免会发生约束冲突.layout实现的效果就是子视图之间保持固定的间隙,视图本身做等比例的收放.

这里有一个方法可以让我们快速的上手约束是怎样的布置的.

首先我们先建立一些视图并且为他们标记上颜色,注意这些视图的摆放要和一些项目中的差不多.

然后采用点下面有一个添加建议约束,按钮为当前的视图添加上约束.

然后我解释一下这些建议的约束大致是一个什么情况首先由最外面的几个视图

他们由上到下垂直方向上加的都是固定值得约束,而且这些固定值的约束往往会让上面的视图高度不变,而最后一个视图的高度被拉伸.如果我们要实现的效果是垂直方向的尺寸不改变,这样的约束就很适合我们.(我们只需要将最下面视图的约束,修改一下,去掉底部space加上height约束),注意只关注三个大view的垂直方向.

top spacing :视图距离父视图顶部保持一个固定的距离

bottom spacing:视图距离父视图底部保持一个 固定的距离

水平方向的对其,如果xocde发现两个视图的(上,下,左,右)位置相同就会添加

left:两个视图的左边界相等

right:两个视图的右边界相等

top:两个视图的上边界相等

bottom:两个视图的底边界 相等

的约束

然后在用第一个大视图添加

trailing spacing:视图距离父视图右边保持一个固定的距离

leading spacing:视图距离父视图左边保持一个固定的距离

这样我们的外面视图的布局就弄好了,他的思路其实是先固定第一个视图的位置然后在根据他以此建立其他视图的位置,这也是建立视图的一个思路

视图内部的布局和外面的远离差不多,只不过xcode会根据视图的种类添加不同的约束,例如UILabel他往往会给一个height的约束.UIImage添加一个witdh

而且建议的布局也是会让一个视图的宽度拉伸,这里的建议是根据自己的需求,然后调整一下看看是拉伸那一个或者是那几个

equal widths:两个同级视图保持相同的宽

equal heights:两个同级视图保持相同的高

如果有两个以上的视图要拉伸,要根据他们自身的款高比设置他们的系数.

center vertically:视图与父视图保持垂直方向的固定

center horizontally:视图与父视图保持水平方向的固定

这两个约束的效果,是已视图的中心向两边各拉伸一半的距离.配合上

equal widths:两个同级视图保持相同的宽

equal heights:两个同级视图保持相同的高

就能唯一确定一个方向的约束了

所以自己看看建议的布局是怎样的,就能够很好的理解,并且能够根据自己的需求添加约束到底那个需要拉伸,那个需要保持原来的距离.

但是相对布局和纯代码布局比起来也是有局限的,他不能随意的摆放view的位置.但是他可以较为直观的看到布局而且不用添加子view.

如果你看懂了他的布局,并且按照一定的模式做了,发现布局的时候还是不起作用,这有可能是因为布局的的尺寸有问题,可以尝试调整一下子视图的边界离开父视图一定的距离,左边的视图离开右边的视图一定的距离.而且在布局的时候我们一定优先找到一个切入点,优先固定位置,并作为其他视图的切入点,而且确保视图的约束没有黄色了再去确定其他的视图,而且所有的布局好的约束都可以再作为基准点,另外之前也有提到一些简化约束的方法,例如

left:两个视图的左边界相等

right:两个视图的右边界相等

top:两个视图的上边界相等

bottom:两个视图的底边界 相等

这些约束的使用,所以如果我们想要使用自动布局就要我们在布局的时候尽量使用方便布局的空间位置和大小,也就是一开始布局就要想到我们怎样去布局.

还有一种比较蛋疼的警告和scrollview有关,就是你满足了原则但是黄色的警告一直会存在,也不知道究竟是什么原因,但是可以按照连接:http://www.lanou3g.com/bbs/forum.php?mod=viewthread&tid=5193

的这种做法去设计,警告就没有了,估计是边界上有什么约定之类的.

后来关于scrollview的问题还是出现了,表现为scrollview里面明明没有黄色的警告但是还是不能滚动的问题.

首先可以参照博客:http://blog.csdn.net/kmyhy/article/details/41846027

结合上面两个关于scrollview的博客我们可以知道,scrollview的尺寸是和内部的视图相关的,所以我们要做的是

1.建立一个尺寸固定的子view

width:视图自身的宽度是一个固定的值

height:视图自身的高度是一个固定的值

然后把他们的约束拉到控制器中去(方便我们的修改)

2.把子视图和俯视图的

top spacing :视图距离父视图顶部保持一个固定的距离

bottom spacing:视图距离父视图底部保持一个固定的距离

trailing spacing:视图距离父视图右边保持一个固定的距离

leading spacing:视图距离父视图左边保持一个固定的距离

属性都设定成0

这样做的目的,不是让view适应Scrollview,而是让scrollview的contentsize根据view来计算,这就是scrollview和其他布局不同的地方(scrollview 的contentsize是根据子视图来计算的,当然scroll的frame的远离和普通的布局一样).

3.这样的布局完成之后,我们就可以把这个把这两个操作等效为为scrollview添加了一个contentsize的视图,视图内部的布局是普通布局类型.

updateFrame这个约束其实时和我们的约束直接挂钩的,(它的作用是反应在当前的屏幕尺寸上我们这样的约束回事一个什么效果),所以我们不必害怕他会影响我们的布局,她只是布局的真实反应,所以放心的点吧.

自动布局是实时布局的:页面上每一点改变都会遵循写好的布局,布局在时刻发生着作用.

结合我的一个错误说明:我有一个按钮在控制器视图的最上面,下面有一个scrollview,scrollview里面有一些子控件,然后我实现了scrollview的滚动(可以看到scrollview的条子在动),但是scorllview里面的内容纹丝不动,产生这个现象的原因是因为我不小心把scrollview里面最顶上的view的

top spacing :视图距离父视图顶部保持一个固定的距离

约束,加到了scrollview上面的按钮上面,造成了一个如此奇葩的现象.