通过storyboard,我们初识一下autolayout的表现形式:

看下图,使用storyboard创建的两个控件视图:

上图中的四个圆角框内的距离值,就是约束;

比如上图的第二个视图,他的 约束是:  距离 view左边,右边界的距离,这样就确定了 宽度和水平方向上的位置,还有距离上面(第一个)视图的距离,还有高,这样就确定了 视图的高度和y轴的位置;这样就可以在一个二维空间(屏幕)中唯一的确定这个视图的位置了;

但是,需要注意的,在添加距离上一个视图下边界的约束时,第一个视图的位置一定要确定,否则 第二个视图的位置可能就是不在合适的位置了.

如何添加约束呢?不多说了直接上图:

选中一个视图之后,点击图中右下角第二个按钮即可对该视图添加约束;

如上图,添加的约束是 :距离左右边界距离 ,上边界距离上面的视图距离,高度约束;

添加完成回车,或Add 即可;

上图说明:

1.一定要先选择一个或多个边界值完成 之后再改变其值,否则可能会导致,你修改值之后再选择其他约束时,你改变的值又死灰复燃;

2.四个约束即可确定视图的位置,尽量不要重复添加,更不能冲突

3.constrain to margin 前面的钩钩去掉,否则会在 视图的左右边界留出空白区域

4.Equal Width等宽,Equal Heights等高, 也就是视图之间可以添加等宽等高的约束,A的高度可以等于B的高度

5.Aspect Ratio,希望保持的比例,比如你想尽量保持长款比为1:1可以勾选此项;与此对应的有等比缩放,后面会讲到,是现在ios布局解决方案之一

6.Align 预留的边界

7.Update Frames 尽量选择图中的方案,选择完之后就更新该视图的位置约束

至此我们就成功的对一个视图添加约束啦

说明:

边界约束,是属于 父视图上的约束;(依赖于父视图,父视图消失,该约束也就消失)

宽高约束,是属于视图本身的约束;

如何查看和修改约束?:

大家看图,就可以知道如何查看和修改约束的值了,这就是autolaout的第一次体验,更多精彩,高级部分在后续教程中!

iOS AutoLayout自动布局中级开发教程(2)-初识autolayout