横向/纵向的布局更改

Question

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

我有这个肖像的当前视图：

目前，这是一个带有标签的垂直堆栈视图。

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

我想要完成的事情基本上不是堆积所有东西，而是希望＆＃34; In Front＆＃34;屏幕左侧的数据，然后在中央屏幕上有＆＃34;您的Laptime＆＃34;。然后在右边有＃34;在你身后＆＃34;。

最好的方法是什么？我来自Android开发，我会为每个方向都有另一个布局，但我在iOS上找不到类似的东西。

Answer 1

您可以根据特征而有所不同。以下是一种完成此操作的方法。希望这一切都有意义，但Autolayout有几种方法可以做到这一点。

步骤1.将视图拖到故事板上，并将引导至顶部布局引导，引导，尾随和底部均为0.稍后我们将需要这个以中心为中心。

步骤2.拖动另一个包含我们所有内容的视图。并将其固定在20个点的边缘，用于顶部，底部，前部和尾部。注意：我们将添加一些更多的约束并在以后更改它，所以请注意。

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

步骤4.选择第二个标签并添加底部10，前导和尾随0.不需要顶部，因为它是在步骤3中添加的。

步骤5.重复底部标签，与步骤4相同，添加3个约束。

步骤6.单击此整个视图，转到顶部菜单，然后选择嵌入StackView。见图

步骤7.在其上方添加UILabel以保持Lap Text并将其固定到顶部20，前导，尾随0和底部，即20的堆栈视图。查看图像

步骤8.现在将堆栈视图固定为前导0，尾随0，底部0或20。

步骤9.使用标签2次复制视图并使用左侧的viewhierchy编辑器将它们拖动到stackview中，这样现在您的stackview有3个视图。它现在应该看起来像图像。

步骤10.现在更改整个视图中的每个标签，使内容拥抱垂直1000.同时将每个标签上的字体更改为所需的字体，并设置为使字体缩小到0.5的系数。有关内容拥抱设置，请参阅图像

步骤11.现在返回到保存UILabel和stackview的原始容器，并在编辑器中将20的所有约束更改为＆gt; = to并添加并拖动到容纳容器的视图中（灰色在图像）并选择垂直中心和水平中心。我在下面附上了显示不同菜单的图像。

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

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

步骤13.现在为Alignment添加另一个变体，您的最终stackview设置应如下所示。

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