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

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

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

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

我在条件3方面有问题。我希望UI在两个方向上的所有大小的设备上都是统一的。

是否可以使用自动布局来实现此目的,或者我需要更新方向更改的约束?

我当时正在考虑在Superview的中心添加另一个视图,并对该视图应用以下约束以实现所需的用户界面

1)添加另一个尺寸透明的视图(视图的宽度为1)

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

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

现在像这样的两个按钮

4)使用新添加的视图向按钮1添加底部空间约束
5)使用新添加的视图向按钮2添加顶部空间约束

这样在所有方向和所有尺寸的设备上都将保持相同。

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

最佳答案

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

因此,请重置所有约束。选择两个按钮并将它们嵌入视图中:

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

此时,您需要设置:

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


  • 这是我的最终结果:

    iPhone 6肖像:

    和景观:

    08-15 19:34
    查看更多