2

在此处输入图像描述

我在自动布局中遇到问题。我想要两个按钮,如屏幕截图所示。我希望它们也能在横向模式下正确显示。

1) 按钮应水平居中对齐。

2) 按钮的宽度和高度应该相等。

3) 按钮在两个方向(横向和纵向)上应与超级视图的中心垂直距离相等

我对条件 3 有疑问。我希望 UI 在所有尺寸的设备上在两个方向上都是统一的。

是否可以使用自动布局来实现这一点,或者我需要更新方向变化的约束?

我正在考虑在超级视图的中心添加另一个视图,并对该视图应用以下约束以实现所需的 UI

1)添加另一个大小的透明视图(superview的宽度,1)

2) 为新添加的视图添加水平和垂直居中对齐约束。

3) 为新添加的视图添加所有必需的约束,如宽度、高度和 x 位置。

现在只有这样的两个按钮

4) 将底部空间约束添加到具有新添加视图的按钮 1 5) 将顶部空间约束添加到具有新添加视图的按钮 2

这样这在所有方向和所有设备尺寸上都将保持不变。

这种方法不好,因为我们需要添加额外的视图。请建议是否有人有更好的方法/想法

4

2 回答 2

2

我认为最好的实用解决方案是将按钮嵌入视图中。

所以重置你所有的约束。选择您的两个按钮并将它们嵌入到视图中:

之后,将此视图设置为始终居中对齐:

此时需要设置:

  • 按钮的高度和宽度
  • 按钮之间的距离
  • 视图的高度和宽度:
    • 高度 =(按钮的高度 + 按钮之间的距离)
    • 宽度 = 按钮的宽度
  • 为按钮设置顶部和底部约束,以便它们可以适合查看;例如顶部按钮:

这是我的最终结果:

iPhone 6 肖像:

和风景:

于 2015-05-29T09:50:41.410 回答
1

1) 按钮应水平居中对齐。选择一个按钮

2) 按钮的宽度和高度应该相等。

选择一个按钮

3) 按钮在两个方向(横向和纵向)上与超级视图中心的垂直距离应该相等 选择一个按钮让在中心

然后修改常量

于 2015-05-29T09:41:20.930 回答