如何使用Autolayout按照显示的屏幕获得结果

Question

伙计们，我正在为我的客户开发一个约会应用程序，我面临着只为iPhone设备实现一个UI布局的问题。请指导我。我已多次尝试并花了很多时间大约3-4个小时，但没有成功。请帮助我，我也分享我想要实现的布局。

注意：如果有人没有找到或没有得到我的问题，请告诉我。我会向您提供更多信息，谢谢。 先谢谢

Answer 1

关键是设置比例约束。

首先添加UIView来保存4个元素 - 背景，男人，女人和心脏。

为背景添加UIImage，并将边缘固定到视图的边缘 - 这是最简单的部分。

为Man ...

添加UIImage

• 将纵横比设置为1：1以使其保持正方形（在这种情况下，为圆形）。
• 将“高度”约束设置为等于“包含”视图的高度，但是将乘数设置为小于1以使其相对于视图。在这种情况下，0.6非常接近。
• 为“水平和垂直居中”设置约束...然后设置“乘数”以使图像保持在中心的左上方。横向为0.64，垂直工作为0.9非常好。

为女人添加UIImage ...

• 将“高度”和“宽度”约束设置为等于“人物”图像。
• 设置“水平居中”和“垂直居中”的约束...然后设置“乘数”以使图像保持正确且位于中心下方。 1.4水平，1.2垂直工作相当不错。

为心脏添加UIImage ...

• 将纵横比设置为1：1（或任何能为您的心脏图像提供适当比例的颜色）。
• 将“高度”约束设置为等于“包含”视图的高度，但是将乘数设置为小于1以使其相对于视图。在这种情况下，0.15非常接近。
• 设置水平和垂直居中的约束...然后需要稍微调整o注意垂直1.05适合我。

现在，您只需要为“包含”视图设置适当的约束，并且所有元素都将缩放并在其中定位。

当你完成所有工作后，它应该（希望）看起来像这样：

我将项目放在GitHub回购中供您查看：https://github.com/DonMag/AnotherLayoutExample