iOS: 如何根据应用方向有不同的布局?
iOS: how to have a different layout depending on app orientation?
我使用 UIKit
并希望根据应用程序的方向有一个完全不同的界面。我实际上在一个视图上有 4 个按钮,这是我想要显示它们的方式:
我知道我可以尝试使用 trait 变体,设置两个不同的约束并为常规高度安装一个,另一个为紧凑高度安装,但我不知道在那种情况下如何进行这种不同的布局。
感谢您的帮助
我的想法是将按钮 1+2 和 3+4 分组到 StackView 中。为不同方向的 StackView 设置不同的轴。
查看
确定 - step-by-step...
向您的视图控制器添加 4 个按钮:
在堆栈视图中嵌入按钮 1 和 2,并在堆栈视图中嵌入按钮 3 和 4:
为每个堆栈视图提供这些设置:
现在,将两个堆栈视图嵌入到另一个“外部”堆栈视图中:
相同的堆栈视图设置:
并将此“外部”堆栈视图前导/尾随/底部限制在 40 点。
接下来,select 按钮 1 和 2 堆栈视图,并在“属性检查器”窗格中单击 Axis
左侧的 +
并将 Width
更改为Any
和 Height
到 Compact
:
单击添加变体,它将如下所示:
将 hC: Vertical
更改为 hC: Horizontal
:
对 3 和 4 堆栈视图执行相同的操作。
现在当您旋转设备时,它看起来像这样:
将约束和堆栈视图 Spacing
从 40 调整到您想要的值。
无需代码 - 一切都由 auto-layout!
处理
我使用 UIKit
并希望根据应用程序的方向有一个完全不同的界面。我实际上在一个视图上有 4 个按钮,这是我想要显示它们的方式:
我知道我可以尝试使用 trait 变体,设置两个不同的约束并为常规高度安装一个,另一个为紧凑高度安装,但我不知道在那种情况下如何进行这种不同的布局。
感谢您的帮助
我的想法是将按钮 1+2 和 3+4 分组到 StackView 中。为不同方向的 StackView 设置不同的轴。
查看
确定 - step-by-step...
向您的视图控制器添加 4 个按钮:
在堆栈视图中嵌入按钮 1 和 2,并在堆栈视图中嵌入按钮 3 和 4:
为每个堆栈视图提供这些设置:
现在,将两个堆栈视图嵌入到另一个“外部”堆栈视图中:
相同的堆栈视图设置:
并将此“外部”堆栈视图前导/尾随/底部限制在 40 点。
接下来,select 按钮 1 和 2 堆栈视图,并在“属性检查器”窗格中单击 Axis
左侧的 +
并将 Width
更改为Any
和 Height
到 Compact
:
单击添加变体,它将如下所示:
将 hC: Vertical
更改为 hC: Horizontal
:
对 3 和 4 堆栈视图执行相同的操作。
现在当您旋转设备时,它看起来像这样:
将约束和堆栈视图 Spacing
从 40 调整到您想要的值。
无需代码 - 一切都由 auto-layout!
处理