通过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的第一次体验,更多精彩,高级部分在后续教程中!