并排排列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并排

设置约束如下:

  1. select所有button并设置等宽限制,该限制将保持所有button的宽度相同。
  2. select所有button并设置底部边距,这将保持所有形状因子在屏幕底部的所有button。
  3. 用superview分别设置第一个和最后一个button的左边距和右边距。
  4. select中间的button,并设置左边距和右边距约束。

可以通过界面生成器。 这是你做的

  1. 单击“对象库”button,从Storyboard创build一个UIViewController。 看到里面有方形的蓝色圆圈就是对象库

  2. 现在select并拖动三个button并将它们添加到您的视图控制器。 一定要通过这里添加button。 拖放视图控制器的视图。 确保将button放置在视图控制器的底部。

  3. 你的三个button被添加后,它应该看起来像这样

  4. 现在来了有趣的部分。 现在你需要做的是将约束添加到你的button,使他们始终保持在底部和等宽。 为了简单,让我把这三个button称为左,中,右button。 要将button保持在button上,请select中央button,然后按下键盘上的“控制”,然后将button拖到“视图”中。 select约束

垂直间距到底部布局指南

并保持一个常数= 0。现在为其他两个button,你这样做。 只需按下CONTROL并拖动到中央button。 select约束

底部

并保持这个约束为0。这确保了所有的button停留在底部。

尽可能为所有三个button添加高度约束。

最后,这是你必须具备的限制条件。

中心button约束

中心按钮约束

左button约束

左按钮约束

正确的button约束

正确的按钮约束

  1. 现在你需要做的是控制+拖动你的中心button的宽度约束到你的ViewController.swift文件,改变宽度的常量为

    widthConstraint.constant = UIScreen.mainScreen()。bounds.width / 3

就是这样。