AutoLayout自动布局

来源:互联网 发布:51单片机毕业设计 编辑:程序博客网 时间:2024/05/22 05:01

首先认识一下AutoLayout要使用到的两个图标工具
1.
这里写图片描述
(选择两个view时可设置)
由上到下意思依次为:
左对齐
右对齐
顶部对齐
下面对齐
垂直对齐
水平对齐
x轴中心对齐,
y轴中心对齐,
文本底标线对齐,

(单选择一个view时可设置)
对于父view的x轴中心对齐,
对于父view的y轴中心对齐,

这里写图片描述
上面的十字是”与最近的邻居的约束”,单击虚线变成实线, 填上数字, 就是要添加这个约束.
这里的”邻居”是将一个包含子view的父view看做一个装了一堆积木的盒子, 积木相对于盒子的边框和其他的积木都作为”邻居”

(定义的宽高数据约束)
宽度指定,
高度指定,

(定义多个view之间的宽高约束)
宽度相同,
高度相同,

(列表, 多个view之间的对齐约束, 等同于前一菜单的内容)
(列表, frame更新方式, 等同于前一菜单)
(确定按钮, 设置约束后点击添加)

添加约束完了之后注意的两点:
这里写图片描述

下面来看一下实例:
比如,给控制器添加两个view,一个红色,一个绿色
2个view的宽度高度相等
距离父控件左边、右边、下边间距以及两个view之间的间距均为20
view的高度为40

其步骤如下:
当两个view,view之间有关系时,将view一个一个的添加,每添加一个都将这个view与父控件之间的约束设置好,如果这个view本身有固定的宽度或者高度时也要进行添加,都添加完了之后再将这两个view之间相互约束的地方进行添加。
按照这种思路,分析如下:首先将一个view进行添加,并设置其与父控件之间的约束,以及自身的固定的高度:距离父控件左边的距离是20,下边的距离是20,自身的高度是40,所以先将这两个添加

这里写图片描述
再添加第二个,第二个的宽,高,与底部的距离,都可以根据第一个来设置,所以对第二个单独设置的只设置其与父控件的右边的距离为20即可,如下:
这里写图片描述

接下来是设置这两个图片相互约束的地方,等高,等宽,与底部距离相等:
这里写图片描述

这里写图片描述

另外,不要忘记的一点是,两个图片之间的距离是20,所以可以选中其中一个图片来设置一下即可,比如,选中右边的view,设置其与左view的距离为20即可:
这里写图片描述

这样,两个view的约束就设置好了,再更新frame即可。(注意:两个view之间有约束时,最后是都设置完了再更新,设置完一个马上更新的话,可能会导致view的高度或者宽度没有设置而更新后view就缩小的找不到了)。
更新frame后的:
这里写图片描述

旋转后的:
这里写图片描述

0 0