iOS 自动布局：如何在 Xcode 故事板中为 iPad 横向和 iPad 纵向设计不同的布局？

Posted 2023-02-19

【中文标题】iOS 自动布局：如何在 Xcode 故事板中为 iPad 横向和 iPad 纵向设计不同的布局？

【英文标题】：iOS auto layout: how to design different layouts for iPad landscape and iPad portrait in Xcode storyboard?

【发布时间】：2015-07-21 22:45:34

【问题描述】：

我是 ios 中大小类和自动布局的新手。我正在通过一个小型应用程序进行相同的练习。以下是我试图通过自动布局和尺寸等级实现的目标。下面分别是 iPad 纵向和 iPad 横向的具体截图。

iPad Portrait:: 这里有 3 个子视图，即灰色视图、绿色视图、粉红色视图。

灰色视图-超级视图的 3/4 高度，超级视图的 2/3 宽度 绿色视图 - 超级视图的 3/4 高度，超级视图的 1/3 宽度 粉红色视图 - 超级视图的 1/4 高度，与超级视图相同的宽度

iPad 横向:: 与 iPad 纵向相同的 3 个子视图，但位置略有不同。

灰色视图-与超级视图相同的高度，超级视图的 2/4 宽度 绿色视图 - 与超级视图相同的高度，超级视图的 1/4 宽度 粉红色视图 - 与超级视图相同的高度，超级视图的 1/4 宽度

只要有两个子视图，我就可以使用自动布局进行管理。但是，我无法实现上述目标。另外，我想在 iPad 纵向和横向上有不同的布局设计。

【问题讨论】：

我不知道为什么这被否决了。这里的问题非常具体。如何使用尺寸等级区分 iPad 纵向和横向？而且我没有找到关于堆栈溢出的任何好的答案。

您找到解决方案了吗？我也有同样的问题，而且只有从认为自己太好而无法帮助任何人的精英人士那里得到同样的答案。

【参考方案1】：

还可以查看新的自适应界面构建器：来自 WWDC2014 https://developer.apple.com/videos/wwdc/2014/ 的“界面构建器的新功能”，了解为不同的屏幕尺寸（大、小、默认）设计不同的 UI。

编辑： 让我们从在 ViewController 中创建单个 uiView 开始： uiview in uiviewcontroller

然后选择您的 UIView 并单击右下角的约束编辑器（类似“领带战斗机”的图标）。 editing constraints

选择上下约束为0（取消“约束到边距”）：constrains

Control+从你的视图拖到背景视图并选择相等的宽度：equal widths

选择您的视图，然后在面板的右侧选择尺寸检查器。你有所有约束的列表。选择 Equal width to:Superview 并单击编辑。选择乘数，例如1/2：proportional constrain.

添加额外的两个视图并使用约束：将空间添加到最近的邻居和其他人以获得您想要的。

重要步骤：点击界面生成器底部的 w any h any 并选择常规宽度|任意高度。[w any h any 首先，您创建了一般约束。现在，您将为所谓的 size-class（代表屏幕大小的类，具体取决于设备的型号和方向）创建更具体的约束。您可以像我之前的描述一样创建不同的约束集。

祝你好运。

【讨论】：

是的，因为 iPad 的横向和纵向都有固定的宽度和高度。据我所知，您只能在使用 UITraitCollection 的代码中区分它们，see this