用autolyout实现子视图对齐等宽排列

简介: 最终效果实现效果IB中实现组成部分其实,要让三个button三等分,那么一定要找一个view作为参考,所以我在底部加了一个bottomLine(距离左边0,距离右边40,距离底部0,高度为1),重要的是,我设置为隐藏。

最终效果

img_c648fc08c79417a7f5f076855d3dfd79.png
实现效果

IB中实现

img_f5cc62a17de6760f14e720d41a76e6fa.png
组成部分

其实,要让三个button三等分,那么一定要找一个view作为参考,所以我在底部加了一个bottomLine(距离左边0,距离右边40,距离底部0,高度为1),重要的是,我设置为隐藏。那么,分别让每个button等于bottomLine的三分之一,那么就等分了。

img_235b3d2a354b1aefe17c7f25382a7e4f.png
三分之一的约束

当然,三分之一的约束只是约束了每一个button的宽度,位置、高度,还要另外针对每一个设置,比如最左边的上架时间(约束:距离左边0,距离顶部0,距离底部0),其它同理之。

最后,三条竖线,位置分别距离左边button为0,顶部、底部留距离,宽度设置为1,设置一个灰色背影就行。


img_f46bc8036bac181b79dcb2e77017fb97.png
三条竖线约束

用代码实现约束

有了上面的思路,用代码实现应该也是一样的,用Masonry来写约束吧,代码就不写了(Swift还在学,不敢教)。

  • 如果有什么疑问,可以在评论区一起讨论;
  • 如果有什么不正确的地方,欢迎指导!


注:本文首发于 iHTCboy's blog,如若转载,请注明来源。

目录
相关文章
|
5天前
|
前端开发
元素的宽度和高度
元素的宽度和高度。
9 3
|
3月前
|
数据可视化
QChart多个图布局使坐标轴对齐的方法
QChart多个图布局使坐标轴对齐的方法
37 0
|
4月前
|
搜索推荐
如何将文章纵向排列转换为横向排列
如何将文章纵向排列转换为横向排列
20 0
|
Android开发
Android shape左边框、上下边框、任意边框
Android shape左边框、上下边框、任意边框
435 0
Android shape左边框、上下边框、任意边框
|
前端开发 容器
排列布局
排列布局
59 0
排列布局
盒子居中效果案例(使用位移方法)
盒子居中效果案例(使用位移方法)
68 0
盒子居中效果案例(使用位移方法)
|
算法 前端开发
居中对齐的几种方法
居中对齐的几种方法
113 0