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

Question

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

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

答案可否附上图片，让我清楚了解过程？

非常感谢，

Answer 1

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

等宽约束

等高约束

纵横比约束

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

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

要设置相等的高度约束，从视图拖动到情节提要中的父视图并放手（您也可以在左侧的视图层次结构中执行此操作 Ex.Picture 包括在内）。

您将看到此菜单。

选择等高和等宽重复。在这个例子中宽度很好，因为我希望它是主视图的宽度，但我们需要改变高度的乘数，否则每个视图都将是主视图的高度。

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

控件拖动到父级的其他示例如下：

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

图钉菜单的示例图片。您可以将这些更改为 0 或其他任何值，然后快速添加任何视图的顶部、底部、前导和尾随

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

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

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

放开你，你会看到这个菜单。此约束意味着视图将始终是方形的。它只需要知道它的宽度或高度，就可以解决另一个问题。注意：在控制故事板拖动之前，请确保视图是您想要的比例。请看下一张图片。

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

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

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