如何使用自动版式按照显示的屏幕实现结果
How to use Autolayout to achieve result as per shown screen
我正在开发一个应用程序，但我遇到了一个问题，即只为 iPhone 设备实现一个 UI 布局。这是我想要实现的布局：
我想实现重叠视图，布局在从 5s 到 7plus 的每个设备上都应该相同。
关键是设置比例约束。
首先添加一个 UIView 来容纳 4 个元素 - 背景、男人、女人和心。
为背景添加 UIImage，并将边缘固定到视图的边缘 - 这是简单的部分。
为男士添加一个 UIImage...
- 将纵横比设置为 1:1 以使其保持正方形（好吧，在本例中为圆形）。
- 将高度约束设置为等于 "containing" 视图的高度，然后将乘数设置为小于 1 以使其相对于视图。在这种情况下，0.6 非常接近。
- 为水平和垂直居中设置约束...然后设置倍增器以保持图像在中心左侧和上方。水平 0.64，垂直 0.9 效果很好。
为女性添加 UIImage...
- 将高度和宽度约束设置为与人图像相同。
- 为水平和垂直居中设置约束...然后设置倍增器以保持图像位于中心下方。水平 1.4 和垂直 1.2 工作得很好。
为心脏添加一个UIImage...
- 将宽高比设置为 1:1（或任何能为您的心脏图像提供合适比例的值）。
- 将高度约束设置为等于 "containing" 视图的高度，然后将乘数设置为小于 1 以使其相对于视图。在这种情况下，0.15 非常接近。
- 设置水平居中和垂直居中的约束...然后需要稍微调整一下，注意 Vertical 1.05 对我有用。
现在，您只需为 "containing" 视图设置适当的约束，所有元素都会在其中缩放和定位。
完成后，它应该（希望）看起来像这样：
我把这个项目放在 GitHub 回购中供你查看：https://github.com/DonMag/AnotherLayoutExample
我正在开发一个应用程序，但我遇到了一个问题，即只为 iPhone 设备实现一个 UI 布局。这是我想要实现的布局：
我想实现重叠视图，布局在从 5s 到 7plus 的每个设备上都应该相同。
关键是设置比例约束。
首先添加一个 UIView 来容纳 4 个元素 - 背景、男人、女人和心。
为背景添加 UIImage，并将边缘固定到视图的边缘 - 这是简单的部分。
为男士添加一个 UIImage...
- 将纵横比设置为 1:1 以使其保持正方形（好吧，在本例中为圆形）。
- 将高度约束设置为等于 "containing" 视图的高度，然后将乘数设置为小于 1 以使其相对于视图。在这种情况下，0.6 非常接近。
- 为水平和垂直居中设置约束...然后设置倍增器以保持图像在中心左侧和上方。水平 0.64，垂直 0.9 效果很好。
为女性添加 UIImage...
- 将高度和宽度约束设置为与人图像相同。
- 为水平和垂直居中设置约束...然后设置倍增器以保持图像位于中心下方。水平 1.4 和垂直 1.2 工作得很好。
为心脏添加一个UIImage...
- 将宽高比设置为 1:1（或任何能为您的心脏图像提供合适比例的值）。
- 将高度约束设置为等于 "containing" 视图的高度，然后将乘数设置为小于 1 以使其相对于视图。在这种情况下，0.15 非常接近。
- 设置水平居中和垂直居中的约束...然后需要稍微调整一下，注意 Vertical 1.05 对我有用。
现在，您只需为 "containing" 视图设置适当的约束，所有元素都会在其中缩放和定位。
完成后，它应该（希望）看起来像这样：
我把这个项目放在 GitHub 回购中供你查看：https://github.com/DonMag/AnotherLayoutExample