【问题标题】:iOS: how to have a different layout depending on app orientation?iOS:如何根据应用方向设置不同的布局?
【发布时间】:2022-02-04 23:19:15
【问题描述】:

我使用UIKit,并希望根据应用程序的方向有一个完全不同的界面。我实际上在一个视图上有 4 个按钮,这是我想要显示它们的方式:

我知道我可以玩转特征变化,设置两个不同的约束并安装一个用于常规高度和另一个用于紧凑高度,但我不知道在这种情况下如何进行这种不同的布局。

感谢您的帮助

【问题讨论】:

  • 您是在 Storyboard / Interface Builder 中设计布局...还是通过代码?
  • @DonMag 我正在使用界面生成器

标签: ios uikit orientation uistackview


【解决方案1】:

好的 - 一步一步...

向视图控制器添加 4 个按钮:

在堆栈视图中嵌入按钮 1 和 2,在堆栈视图中嵌入按钮 3 和 4:

为每个堆栈视图提供以下设置:

现在,将两个堆栈视图嵌入另一个“外部”堆栈视图:

相同的堆栈视图设置:

并将这个“外部”堆栈视图的前导/尾随/底部限制在 40 点。

接下来,选择 Buttons 1 & 2 stack view,并在 Attributes Inspector 窗格中单击 Axis 左侧的 + 并将 Width 更改为 Any 并将 Height 更改为 Compact:

点击添加变体,它会如下所示:

将hC: Vertical 更改为hC: Horizontal:

对 3 和 4 堆栈视图执行相同的操作。

现在,当您旋转设备时,它会如下所示:

将约束和堆栈视图 Spacing 从 40 调整为所需的值。

无需代码 - 一切都由自动布局处理!

【讨论】:

  • 这很聪明,我没有想到在这样的超级堆栈视图中嵌入两个垂直堆栈视图。谢谢!
【解决方案2】:

我的想法是将按钮 1+2 和 3+4 分组到 StackView 中。为 StackView 设置不同方向的不同轴。

查看Using auto layout to orientate stack views vertically in portrait and horizontally in landscape

【讨论】:

    猜你喜欢
    • 2015-01-28
    • 2014-03-04
    • 1970-01-01
    • 1970-01-01
    • 2014-07-30
    • 2022-11-22
    • 1970-01-01
    • 1970-01-01
    • 2018-04-15
    相关资源
    最近更新 更多