【iOS新手开发之旅】自动布局

竹林风 · 发表于 2018-12-26 15:33:24

本帖最后由竹林风于 2018-12-27 15:31 编辑

文章导航

【iOS新手开发之旅】 http://www.sufeinet.com/thread-24000-1-1.html

AutoLayout介绍

在iOS6之前，我们都是通过UI控件的Frame属性和Autoresizing Mask来进行UI布局的。AutoLayout则是苹果公司在iOS6推出的一种基于约束的，描述性的布局系统。自从AutoLayout问世以来，逐步得到了iOS开发者们的青睐。

AutoLayout占据UI布局的主要领导位置依赖于它的特殊性：

1.基于约束：和以往定义frame的位置和尺寸不同，AutoLayout的位置确定是以所谓相对位置的约束来定义的，比如x坐标为superView的中心，y坐标为屏幕底部上方10像素等。
2.描述性：约束的定义和各个view的关系使用接近自然语言或者可视化语言的方法来描述。
3.布局系统：即字面意思，用来负责界面的各个元素的位置。

总之，AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前，不论是在IB里拖放，还是在代码中写，每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。使用AutoLayout的话，就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一并解决了不同分辨率和屏幕尺寸下view的适配问题，另外也简化了旋转时view的位置和定义，原来在底部上10像素居中的view，不论旋转屏幕或是更换设置的时候，始终还在底部之上10像素居中的位置，不会发生变化。总的来说，使用约束条件来描述布局，view的frame会依据这些约束来进行计算。

使用

（1）首先，拖拽三个UIView视图,如图

（2）view_1红色视图添加约束，添加上和左距离父视图都是30px

（3）view_2绿色视图添加约束，添加左和右分别距离view_1和父视图的距离都是30px

（4）view_2添加约束，如图，直接点击view_2拖拽到view_1上，然后选择Center Vertically、Equal Widths和Equal Heights，则添加了view_2的约束：竖直方向上中心和view_1一致、宽度和高度也和view_1相等

(5) view_3 蓝色视图添加约束，添加左、下、右距离父视图的值都为30 上上距离view_1的距离为30，并且高度和view_1相等

这样，我们的布局就完成了。

运行：

附件：

Test-AutoLayout.zip (289.53 KB, 下载次数: 0)

站长苏飞 · 发表于 2018-12-26 16:03:17

我只是路过打酱油的。

Amy · 发表于 2018-12-27 09:40:28

强烈支持楼主ing……

liu · 发表于 2018-12-27 13:45:00

我只是路过打酱油的。

范范 · 发表于 2018-12-27 17:11:18

无回帖，不论坛，这才是人道。

惜 · 发表于 2018-12-30 15:46:50

强烈支持楼主ing……

		自动登录	找回密码
密码			马上注册

[新手开发之旅] 【iOS新手开发之旅】自动布局

相关帖子