如何使用AutoLayout缩放视图的高度和相对于屏幕大小的视图位置

Question

使用Autolayout保持视图相对位置和缩放到每个屏幕大小的最佳方法是什么？例如，4s和iPad Pro之间存在巨大差异。我应该使用什么类型的约束和思考过程？

缩放的视图可能各自具有不同的高度并占据不同比例的屏幕。我知道有很多方法可以解决这个问题，但最好的方法是什么。

答案可以附上图片，以便我可以清楚地了解这个过程吗？

非常感谢你，

Answer 1

这是一个非常深入的问题，但要将视图缩放到父级的大小，然后需要使用

等宽度约束

等高度限制

宽高比约束

我经常使用这些。这是一个简单的例子

假设我们想将屏幕划分为3个视图。所有宽度都与主控制器视图相同，我们希望顶部占据40％，第二个视图占30％，底部占20％。我们可以对superview使用相等的高度约束，并编辑和调整乘数0.2 = 20％。

要设置一个相等的高度约束，请从故事板中的视图拖动到父视图然后放开（您也可以在包含左侧Ex.Picture的视图层次结构中执行此操作）。

您将看到此菜单。

选择“等高”和“重复”以获得相等的宽度。在这个例子中宽度很好，因为我希望它是主视图的宽度，但我们需要改变高度的乘数，或者每个视图将是主视图的高度。

在尺寸检查器中找到约束，并找到与superview相同高度的约束（下图）。双击或单击编辑并调出上图中的菜单。在这种情况下，我将乘数设置为0.3，即父项的30％。现在继续为设置所需百分比的所有视图执行此操作。

其他控制拖动到下方父级的示例：

我将所有观点固定在一起。意见之间的顶部和底部约束是0。我希望了解这些类型的约束，这不是问题。

示例针脚菜单的图片。您可以将这些更改为0或其他任何内容，并快速为任何视图添加顶部，底部，前导和尾随

您也可以水平和垂直使用中心，也可以使用乘数来保持父视图的相对位置。

现在，要将子视图添加到这些视图并按比例缩放。该过程以相同的方式工作。看看我最后的3个大视图，我在我刚刚添加的顶视图中添加了一个较小的视图占据了我们屏幕的大部分。我希望这个新视图就像设计中的化身。

我将它放在顶视图中，我控制在小视图内拖动而不留下它以获得添加宽高比的选项（注意我在执行此步骤90x90之前在尺寸检查器中设置宽度和高度相等）

放开你会看到这个菜单。此约束意味着视图将始终为方形。它只需要知道它的宽度或高度，并将为另一个解决。注意：确保视图是在故事板中控制拖动之前所需的比率。见下图。

现在我使用pin菜单为持有此头像小视图的视图添加了一个前10的约束和15的左边。 Autolayout仍然很疯狂，但我所要做的就是添加一个宽度或高度，因为纵横比约束将解决我们没有提供的问题。我控制从小视图拖动到它的父级（小视图之外的任何地方）。我选择平等的高度。我在右侧的尺寸检查器中找到它，并将乘数从1更改为0.4。现在Autolayout再次感到高兴，因为小视图知道应该有多宽和高，因为我们给它一个相等的高度约束，并且它知道应该保持正方形它解决它的宽度。

旁注： 如果我不想使用固定的顶部，底部，尾部，前导，您可以调整乘数，使其垂直和水平对齐，使其与相等的宽度相同，并保持相对位置。

我更新了视图，我可以继续添加视图。以下是预览中的结果。