限制没有为所有屏幕设备正确调整大小

时间:2017-01-04 08:54:22

标签: ios uibutton autolayout constraints

我正在尝试对这些水平按钮进行约束。我希望按钮大小的比例相同,并且图标的宽度和高度相等。

enter image description here

我知道如何做到这一点,以便这些按钮根据屏幕大小正确调整大小?谢谢!

4 个答案:

答案 0 :(得分:1)

制作包含图标和文字的UIView组。让我们调用这个容器视图

将所有n 容器视图放在故事板中,如您所希望的那样。现在:

  • 向左侧容器视图向超级视图添加前导和下限约束。
  • 现在到第二个容器视图添加一个前导空格0(或任何你想要的)。按住+将第二个按钮拖动到第一个按钮。按住shift并选择等宽等高对齐底部

现在将与第二个容器视图相同的约束应用于所有n - 1 容器视图。 n是您要添加的容器视图的数量。现在到最后一个(第n个)容器视图添加一个额外的约束,它将成为 superView 的尾随空格。现在你所有的容器视图应该具有相等的宽度,这将取决于屏幕的宽度!

如果您希望所有容器视图具有特定的高度或宽高比。只需将 height 宽高比约束添加到第一个 容器视图,所有后续视图都会相应更新。

如果您希望高度取决于屏幕尺寸而保持特定的宽高比,那么您必须让第一个容器视图相等使用0.15等特定乘数的整个视图的高度。

您还必须为每个UIView

中的图标和标签添加适当的约束

修改:您可以更轻松地将图标作为图片添加到UIButton,并像往常一样将文字添加到UIButtonUIButton与您发布的屏幕截图非常相似。然后只应用我上面提到的约束。

答案 1 :(得分:0)

将宽度和高度设置为SuperView的比例。设置是否为一个按钮和其余按钮使高度和宽度等于您根据超视图高度和大小定义高度和宽度的第一个按钮。使用此SO Post查看如何将高度和宽度设置为超级视图的比率。

希望这有帮助。

答案 2 :(得分:0)

这很简单,因为您的所有按钮都是单向的,因此您可以使用StackView。 只需简单首先将相等的高度和相等的宽度应用于所有按钮

Equal hight and Equal width

现在选择所有按钮并将它们添加到stackview

Stackview

它将位于右侧底部。 (使用约束图标)

现在简单应用添加缺失约束。它将自己完成工作,并提供更好的结果。 (但请注意,在View Controller Section中的所有视图中应用它)

Missing Constraint

现在Bingo尝试这个尺寸会显示相同。

iPhone 7 plus iPhone 7

iPhone SE

这也适用于模拟器。

答案 3 :(得分:0)

解决方案非常简单。

见下图(5个按钮)

Autolayout 5 buttons

  • 第一个(蓝色)按钮固定在superview的左下角
  • 其他4个按钮(红色,黑色,绿色,粉红色)均与第一个(蓝色)按钮顶部对齐
  • 每个按钮使用与前一个按钮的水平间距(常量为0)。所以红色按钮的水平间距为0,蓝色为0,水平间距为红色,等等
  • 最后(粉红色)按钮也固定在超级视图的右侧
  • 最后,所有其他4个按钮被设置为与第一个(蓝色)按钮具有相同的宽度

就是这样!

至于你的图标,你只需要将它们设置为具有相同的宽度和宽度。高度为您拥有的第一个图标