设备方向更改时的自动布局约束问题

Autolayout constraint issue when device orientation gets changed

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

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

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

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

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

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

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

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

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

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

现在就是这样的两个按钮

4) 添加 bottom space 约束到新添加视图的按钮 1 5) 使用新添加的视图

向按钮 2 添加顶部 space 约束

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

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

1) 按钮应该水平居中对齐。 Select 一键

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

Select一键

3) 按钮在两个方向(横向和纵向)上应该与父视图的中心垂直距离相等 Select 一键 让我们居中

然后修改常量

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

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

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

此时你需要设置:

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

这是我的最终结果:

iPhone 6人像:

和风景: