首页 > 代码库 > 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





Auto Layout用法剖析(1)