设备方向更改时的自动布局约束问题
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人像:
和风景:
我在自动布局方面遇到问题。 我想要两个按钮,如屏幕截图所示。我希望它们也能在横向模式下正确显示。
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人像:
和风景: