Auto Layout 快速布局12宫格按钮排列

要求1:水平排列等宽等间距4个按钮

一, 拖拽按钮

1, 拖拽一个按钮到左上角位置(系统会有提示约束线出现的位置),如下图所示

图-1.png

2,接着拖拽第二个按钮,紧邻第一个按钮的右侧,如下图所示, 之后的按钮以此类推

图-2.png

3,拖拽完成4个按钮,还没有添加约束

图-3.png

二, 添加缺少的约束

选中某一个按钮,

1, 选择 Resolve Auto Layout Isues (解决自动布局冲突)

2, 选择Add Missing Constraints (添加缺少的约束)

图-4.png

三, 设置等宽

1, 选择四个按钮,选择添加约束,设置等宽

图-5.png

2, 选中最后一个按钮, 添加右边距,

图-6.png

3, 修改最后一个按钮的右边距为8,

图-7.png

这样就完成了,静态等间距,动态等宽的一行多个按钮的布局,你也可以修改间距,来达到具体的UI要求

要求二, 完成3行4列12宫格按钮排列

1, 先按照上面的方法,完成第一行的布局

2, 然后按照上面的方法完成到(三.1),先不添加最后一个按钮的右边距,这时会有个警告,

图-8.png

3, 第三行和第二行一样

这样就完成了要求二,如果想改变按钮的宽度,可以通过改变按钮的间距,会实现3行4列按钮同时跟着改变位置

图-9.png

引用:Understanding Auto Layout in Xcode 9