实例1
上篇文章我们已经通过 storyboard 熟悉了一下 Autolayout 最基本的使用.下面我们通过实例对 Autolayout 的其他属性进行介绍
假定我们现在有这样的需求: 控制器中有两个并排的 view ,他们的宽高相等单位为70,左右边框以及两个 view 之间的间距都为 40,宽度虽屏幕变化.
下面我们通过 storyboard 拖入两个 view 并设置不同颜色和名称用以区分
颜色尺寸不同的两个view
可以看到,我拖入的两个 view 宽高都是不一致的.下面我们进行 Autolayout 约束设置.
首先设置左边绿色 viwe 的约束
设置左边绿色 viwe 的约束
这里需要注意的是,设置它右边约束的时候是相对于其右边的 blueView 的.当你把 blueView 明显拖拽到非 greenView 的右边 时,设置 greenView 右边间距是不会出现相对于 blue的定位的选项
注意点
设置右边 blueview 的约束:
blueView的约束设置
接着选中 blueview 按住 control 键拖线到 greenView 上选中下列几个选项
blueView的约束设置
更新 frame 并预览效果
预览效果
补充说明,我们除了直接设置 blueView 的宽高等于 greenView 之外还可以设置其 bottom 和 top 等于 greenView
此外对于偏上的定位是注意默认会根据 Top Layout Guide 这根"线"定位
预览效果
实例2
需求说明:四个不同颜色的 view 全屏四等分.并适应不同屏幕尺寸.我们先看下效果图
效果图
下面看下约束添加方式
添加四个不同颜色的 view 并设置好各自的名称
新拖入的view控件及命名
添加 orangeView 的约束
orangeView
添加 blueView 的约束
blueView
添加 yellowView 的约束
yellowView
添加 purpleView 的约束
purpleView
最后让四个控件等高等宽
让四个控件等高等宽
更新状态
更新状态
运行结果
运行结果
网友评论