Autolayout 基本使用Ⅱ

实例1

上篇文章我们已经通过 storyboard 熟悉了一下 Autolayout 最基本的使用.下面我们通过实例对 Autolayout 的其他属性进行介绍

假定我们现在有这样的需求: 控制器中有两个并排的 view ,他们的宽高相等单位为70,左右边框以及两个 view 之间的间距都为 40,宽度虽屏幕变化.

下面我们通过 storyboard 拖入两个 view 并设置不同颜色和名称用以区分

Autolayout 基本使用Ⅱ_第1张图片
颜色尺寸不同的两个view

可以看到,我拖入的两个 view 宽高都是不一致的.下面我们进行 Autolayout 约束设置.

首先设置左边绿色 viwe 的约束

Autolayout 基本使用Ⅱ_第2张图片
设置左边绿色 viwe 的约束

这里需要注意的是,设置它右边约束的时候是相对于其右边的 blueView 的.当你把 blueView 明显拖拽到非 greenView 的右边 时,设置 greenView 右边间距是不会出现相对于 blue的定位的选项

Autolayout 基本使用Ⅱ_第3张图片
注意点

设置右边 blueview 的约束:

Autolayout 基本使用Ⅱ_第4张图片
blueView的约束设置

接着选中 blueview 按住 control 键拖线到 greenView 上选中下列几个选项

Autolayout 基本使用Ⅱ_第5张图片
blueView的约束设置

更新 frame 并预览效果

Autolayout 基本使用Ⅱ_第6张图片
预览效果

补充说明,我们除了直接设置 blueView 的宽高等于 greenView 之外还可以设置其 bottom 和 top 等于 greenView

此外对于偏上的定位是注意默认会根据 Top Layout Guide 这根"线"定位


Autolayout 基本使用Ⅱ_第7张图片
预览效果

实例2

需求说明:四个不同颜色的 view 全屏四等分.并适应不同屏幕尺寸.我们先看下效果图

Autolayout 基本使用Ⅱ_第8张图片
效果图

下面看下约束添加方式

添加四个不同颜色的 view 并设置好各自的名称
Autolayout 基本使用Ⅱ_第9张图片
新拖入的view控件及命名
添加 orangeView 的约束
Autolayout 基本使用Ⅱ_第10张图片
orangeView
添加 blueView 的约束
Autolayout 基本使用Ⅱ_第11张图片
blueView
添加 yellowView 的约束
Autolayout 基本使用Ⅱ_第12张图片
yellowView
添加 purpleView 的约束
Autolayout 基本使用Ⅱ_第13张图片
purpleView
最后让四个控件等高等宽
Autolayout 基本使用Ⅱ_第14张图片
让四个控件等高等宽
更新状态
Autolayout 基本使用Ⅱ_第15张图片
更新状态

运行结果

Autolayout 基本使用Ⅱ_第16张图片
运行结果

你可能感兴趣的:(Autolayout 基本使用Ⅱ)