Auto Layout用法剖析（1）

 

Auto Layout用法剖析（1） 

 

转载请注明转自此处：http://blog.csdn.net/xietao3/article/details/41549959

 

 

1、首先是图片最上方四个方向键（leading左、trailing右、top上、bottom下）

举个栗子，左方的方向键，使用该功能需要选中方向键为红色实心才会起到相应的作用，而输入框表示该控件x坐标相对某一控件的leading、trailing、top、bottom（四个位置选其一）坐标距离，这个相对的控件和控件的哪个位置都是可以选择的，，通过点击输入框右方下三角进行选择控件，控件的位置在属性面板选择，constant输入框为具体数值大小，值得一提的是这个功能不仅仅是针对于上级视图，对同一层的控件也可以用这个方法保持2个控件之间的距离恒定。

如图所示：该图内容表示相对的控件为命名为1的Button相对距离为80

 

 

2、width、height

这两个功能比较直接，比如说控件A在sb中宽度是50，加入约束宽度输入数字100，启动后该控件实际宽度为100。

 

3、Equal Widths、Equal Heights

这两个约束功能比较实用，可以控制控件A的宽度或高度随控件B的宽度或高度变化。

如图所示：控件1的宽度和控件View1的宽度绑定，为View1宽度的四分之一。

 

4、结合上面几点约束功能，学以致用，左边为模拟器编译后效果，右方为SB面板。

这里用到的有2类约束，一个是上面讲的1、space to 和3、Equal Widths/heights

控件1、2、3、4分别与背景View1添加Equal Widths约束，其宽度为View1的1/4。

控件1的leading与VIewleading间隔0，1的trailing与控件2leading间隔0，以此类推一直到4的trailing与View1的trailing间隔为0。

可以看到控件5被拉伸了，此处用了2个约束，5的leading与View1leading间隔10，5的trailing与View1的trailing间隔10，由此造成5被拉伸。

 

5、Aspect Ratio此功能与Equal系列有点类似，都是动态控制宽高，不同的是此功能相对控件可以是本身

如图所示：控件6的高与本身的宽成1：2比例，在模拟器运行后，宽即是高的2倍。

6、Align 这个主要是用来各种对齐的
leading、trailing、top、bottom、center、hor、ver分别为左对齐、右对齐上对齐、下对齐、水平中心对齐、垂直中心对齐，同时可以通过constant设置偏移量。
baseline比较奇怪，为控件内文本底部对齐，跟实际效果有点出路，看上去只起到压缩文本框高度的作用如图所示。

水平对齐，对齐位置可以是centerX、leading、trailing。

图中左边为模拟器运行情况，右边为SB面板，该效果使用的是水平对齐方式，位置为CenterX