ios - 横向/纵向的布局更改

Question

我有 1 个 Storyboard，我在 Swift 3 中的 Xcode 8 上使用带有大小类的自动布局。

我有这个当前的肖像 View :

目前，这是 1 个带有标签的垂直堆栈 View 。

在横向模式下，左侧/右侧有很多空间浪费，而且由于屏幕尺寸，我目前正在隐藏数据:

我想要完成的基本上不是将所有东西都堆叠起来，我想要屏幕左侧的“In Front”数据，然后在中央屏幕上有“Your Laptime”。然后右边有“在你身后”。

实现此目标的最佳方法是什么？我来自 Android 开发，在那里我只会为每个方向设置另一个布局，但我在 iOS 上找不到任何类似的东西。

Answer 1

您可以因特征而异。这是一种方法的长篇演练。希望这一切都有意义，但自动布局有几种方法可以做到这一点。

第 1 步。将一个 View 拖到 Storyboard 上，并将顶部布局引导、前导、尾随和底部固定在 0 处。稍后我们将需要它来使所有内容居中。

第 2 步。拖动另一个 View 来保存我们所有的内容。并将其固定到顶部、底部、前导和尾部的边缘，例如 20 个点。注意:我们将添加更多约束并在稍后更改它，所以请注意。

第 3 步。将另一个 View 拖到屏幕上并向其添加 3 个 uilabel。单击顶部标签并在图像中添加约束。

第 4 步。向下选择第二个标签并添加 bottom-10，前导和尾随 0。不需要 top，因为它是在第 3 步中添加的。

第 5 步。对底部标签重复与第 4 步相同的操作，添加 3 个约束。

第 6 步。单击整个 View 并转到顶部菜单并选择“嵌入 StackView”。见图像

第 7 步。在其上方添加一个 UILabel 以保存圈文本并将其固定到顶部 20，前导，尾随 0，底部是 20 处的堆栈 View 。参见图片

第 8 步。现在将堆栈 View 固定到前导 0、尾随 0、底部 0 或 20。

第 9 步。将带有标签的 View 复制 2 次，然后使用左侧的 View 层次编辑器将它们拖到堆栈 View 中，这样现在您的堆栈 View 就有 3 个 View 了。它现在应该看起来像图像。

第 10 步。现在更改整个 View 中的每个标签，使其垂直内容拥抱 1000。同时将每个标签上的字体更改为所需的字体，并设置字体可以缩小到 0.5 倍。有关内容拥抱设置，请参见图像。

第 11 步。现在返回到包含 UILabel 和堆栈 View 的原始容器，并在编辑器中将 20 的所有约束更改为 >= ，然后添加并拖动到包含容器的 View (图像中为灰色) ) 并选择垂直居中和水平居中。我将显示不同菜单的组合图像附在下面。

第 12 步。 添加堆栈 View 的变体和正确的设置。单击轴旁边的加号并添加它。

[![TraitAxis][9]][9]

第 13 步。现在为 Alignment 添加另一个变体，您的最终堆栈 View 设置应如下所示。

返回将如下所示。如果您已经设置了所需的字体并允许它们缩放。我删除了一些额外的标签以匹配您的图像，这样做时我不得不将剩余的底部标签固定到标签容器中。您可能必须为 Plus 设备添加另一个对齐变体，但这只是像最后一步那样添加变体。您可能还必须解决标签上的一些较低优先级，但我认为单击并说“确定”即可完成。只要按照它告诉你的去做。我希望这有帮助。您还可以嵌套堆栈 View ，这样布局可能会更容易。就像我说的那样，可能有更多方法可以实现这一点，但这应该会让您走上正确的道路。