并排排列3个UIButton(等宽)
如何安排3 UIButtons并排。我正在使用自动布局。 我的要求是:
1.无论装置如何,它们的宽度应该相等
2.从视图的开始到结束垂直占据
我尝试了不同的方法,但是我没有做到。 是否可以通过接口生成器
有两种方法可以做到这一点。
方式1: 使用button的等宽约束
select所有3个button并添加等宽
方式2: 使用堆栈视图
第1步:添加3个button。
步骤2:select所有的button,一旦select,点击故事板canvas右下方的“自动布局”工具栏中的“ 堆叠”button 。 见下面的图像。
或者,您可以embedded 编辑器 – >embedded – > StackView
第3步:添加约束到StackView 。 如下所示。
第4步:select堆栈视图,一旦select转到属性检查器 。 更改分配以填充相同 :
完成了!
select3个button并给出这个约束
- leading - trailing - bottom - Height - equal width
你可以检查一些相同宽度的参考文件到3个标签,以及设置两个相同宽度的button并排
设置约束如下:
- select所有button并设置等宽限制,该限制将保持所有button的宽度相同。
- select所有button并设置底部边距,这将保持所有形状因子在屏幕底部的所有button。
- 用superview分别设置第一个和最后一个button的左边距和右边距。
- select中间的button,并设置左边距和右边距约束。
可以通过界面生成器。 这是你做的
-
单击“对象库”button,从Storyboard创build一个UIViewController。
-
现在select并拖动三个button并将它们添加到您的视图控制器。 一定要通过这里添加button。 拖放视图控制器的视图。 确保将button放置在视图控制器的底部。
-
你的三个button被添加后,它应该看起来像这样
-
现在来了有趣的部分。 现在你需要做的是将约束添加到你的button,使他们始终保持在底部和等宽。 为了简单,让我把这三个button称为左,中,右button。 要将button保持在button上,请select中央button,然后按下键盘上的“控制”,然后将button拖到“视图”中。 select约束
垂直间距到底部布局指南
并保持一个常数= 0。现在为其他两个button,你这样做。 只需按下CONTROL并拖动到中央button。 select约束
底部
并保持这个约束为0。这确保了所有的button停留在底部。
尽可能为所有三个button添加高度约束。
最后,这是你必须具备的限制条件。
中心button约束
左button约束
正确的button约束
-
现在你需要做的是控制+拖动你的中心button的宽度约束到你的ViewController.swift文件,改变宽度的常量为
widthConstraint.constant = UIScreen.mainScreen()。bounds.width / 3
就是这样。