调整按钮大小和在静态背景图像上的位置
Resizing buttons and position on a static background image
我正在努力让我的按钮高度和位置适应屏幕尺寸的变化，如上图所示。按钮本身将保持清晰，仅作为一种简单的方式来处理触发切换到不同屏幕的点击。我的目标是使图像在不同的屏幕尺寸上延伸时，我希望按钮与 windows 保持相同的高度和宽度以及位置。我知道，如果 windows 具有属性，我可以简单地使按钮具有与它们相同的大小和宽度并完成，但正如我提到的那样，图像是静态的，它必须暂时保持这种状态。我已经尝试为按钮创建约束，但事实证明这很让人头疼，我也不知道堆栈视图是否对我有帮助，我知道这相当复杂，但我可以接受，我只需要一些方向。
更新：为了遵循正确列出的 LGP 说明，我从第 1 步开始。正如我在评论中提到的，我相信这只是比率和约束冲突，因为当我删除一两个时它工作正常，但是我该如何设置约束以使其填满整个屏幕并保持图片的比例？还显示了图像视图的约束冲突，它也没有显示父容器视图的纵横比
使用基于百分比的位置和尺寸。以百分比为基础确定 windows 的位置，并通过将百分比乘以屏幕的宽度和高度来创建 x 和 y 维度的原点。我假设您使用 ScaleToFill 作为 ImageView 的内容模式。
与计算尺寸类似，以百分比为基础确定 ImageView 的宽度和高度，并将百分比值乘以屏幕的总宽度和高度。
例如计算Window一的位置-
假设，window1.x 百分比基础是 25% & 总图像视图宽度是 400（例如），那么 window1.x 像素位置将是-
window1X = (25 * 400) / 100 = 100
假设，window1.y 百分比基础是 25% & 总图像视图高度是 300（例如），那么 window1.y 像素位置将是-
window1Y = (25 * 300) / 100 = 75
假设，宽度 是图像视图宽度的 7%，那么像素宽度将为 -
window1Width = (7 * 400) /100 = 28
假设，高度 是图片浏览高度的 12%，那么以像素为单位的高度将为 -
window1Height = (12 * 300) /100 = 36
window1.frame = CGRectMake (window1X, window1Y, window1Width, window1Height)
其他 windows 的相同方法来计算他们的位置（大小将与 window 1 相同）
此方法适用于所有屏幕分辨率，因为它使用基于百分比的计算 & ScaleToFill 作为图像视图的内容模式。
如果你想在界面生成器中完成它并不难。您应该使用 spacer views 和 proportional sizes 来定位按钮。这样，无论您的背景有多大，所有元素都会随之而来。
1.创建一个与您的图像具有相同比例的容器。 添加一个常规 UIView 并设置一个 Aspect Ratio 约束，乘数为 852:568。这是背景照片的尺寸，852 x 568 像素，但实际值并不重要，只要纵横比相同即可。 （不要忘记在视图控制器中将容器视图绑定到您想要的任何位置。请参阅下面的更新了解如何执行此操作。）
2。将背景图像放入容器中。 将图像视图作为子视图添加到容器中。设置约束以接触容器的所有四个边缘。将 Image 属性 设置为您的图像，并将 Content Mode 设置为 Aspect Fit。
3。添加第一个 spacer 视图。 将常规 UIView 添加到容器视图（见下面最左边的白色视图）并设置约束如下：
height = 1（不重要，图中我用了10）Top space to Superview = 90（不重要）Leading space to Superview = 0Width equal to Superview with multiplier dw:cw <- 这使得它成比例！
dw是左边缘到第一个window/button的距离，cw是容器的宽度。如果您的容器宽度为 375，并且您与第一个按钮的距离为 105，则乘数将为 105:375.
4.添加第二个 space 视图。 这是垂直 spacer，从顶部到第一个按钮。设置与第一个 spacer 类似，除了使 height 与容器高度成比例，并且宽度固定。
5.添加第一个按钮。 将其左边缘和上边缘约束到 spacers，然后使其宽度和高度与容器成比例。
6.添加剩余的 spacers 和按钮。 它们都是一样的。只要记住在哪里使它们成比例。所有按钮都限制在单个垂直 spacer.
最后，您应该隐藏 spacer 个视图。您可以通过选择不同的设备在 Storyboard 中轻松试用它。
我选择在iPhone8 上添加所有内容，但这并不重要。这是我更改为 iPad Pro 12.9" 和 iPhone SE 时的样子。请注意按钮的正确位置。 spacer 移动了一点，因为它们有部分固定的距离，但无论如何它都能正常工作。
更新：这里是如何在视图控制器的视图中约束容器视图以使容器填充整个视图并仍然保持其纵横比。
首先，为 Horizontal 和Vertical。这将允许图像压缩而不是扩展如果它有一个选择。
其次，将以下约束添加到您的容器中：
Align Center X to SuperviewAlign Center Y to SuperviewEqual Width to Superview >= 0Equal Height to Superview >= 0852:568 Ratio to View <- 这个你应该已经有了！
现在容器将始终位于屏幕中心，它总是会 至少 整个屏幕，但也允许它在 X 和 Y 之外填充。
更新 2：如果您想忽略照片的纵横比，并始终用照片填充屏幕，您只需将容器视图的约束添加到其父视图的每一侧。您的容器视图的约束应如下所示。
在第 2 步中，您需要将图像的 Content Mode 设置为 Scale to fill。其余的应该是一样的。
我正在努力让我的按钮高度和位置适应屏幕尺寸的变化，如上图所示。按钮本身将保持清晰，仅作为一种简单的方式来处理触发切换到不同屏幕的点击。我的目标是使图像在不同的屏幕尺寸上延伸时，我希望按钮与 windows 保持相同的高度和宽度以及位置。我知道，如果 windows 具有属性，我可以简单地使按钮具有与它们相同的大小和宽度并完成，但正如我提到的那样，图像是静态的，它必须暂时保持这种状态。我已经尝试为按钮创建约束，但事实证明这很让人头疼，我也不知道堆栈视图是否对我有帮助，我知道这相当复杂，但我可以接受，我只需要一些方向。
更新：为了遵循正确列出的 LGP 说明，我从第 1 步开始。正如我在评论中提到的，我相信这只是比率和约束冲突，因为当我删除一两个时它工作正常，但是我该如何设置约束以使其填满整个屏幕并保持图片的比例？还显示了图像视图的约束冲突，它也没有显示父容器视图的纵横比
使用基于百分比的位置和尺寸。以百分比为基础确定 windows 的位置，并通过将百分比乘以屏幕的宽度和高度来创建 x 和 y 维度的原点。我假设您使用 ScaleToFill 作为 ImageView 的内容模式。
与计算尺寸类似，以百分比为基础确定 ImageView 的宽度和高度，并将百分比值乘以屏幕的总宽度和高度。
例如计算Window一的位置-
假设，window1.x 百分比基础是 25% & 总图像视图宽度是 400（例如），那么 window1.x 像素位置将是-
window1X = (25 * 400) / 100 = 100
假设，window1.y 百分比基础是 25% & 总图像视图高度是 300（例如），那么 window1.y 像素位置将是-
window1Y = (25 * 300) / 100 = 75
假设，宽度 是图像视图宽度的 7%，那么像素宽度将为 -
window1Width = (7 * 400) /100 = 28
假设，高度 是图片浏览高度的 12%，那么以像素为单位的高度将为 -
window1Height = (12 * 300) /100 = 36
window1.frame = CGRectMake (window1X, window1Y, window1Width, window1Height)
其他 windows 的相同方法来计算他们的位置（大小将与 window 1 相同）
此方法适用于所有屏幕分辨率，因为它使用基于百分比的计算 & ScaleToFill 作为图像视图的内容模式。
如果你想在界面生成器中完成它并不难。您应该使用 spacer views 和 proportional sizes 来定位按钮。这样，无论您的背景有多大，所有元素都会随之而来。
1.创建一个与您的图像具有相同比例的容器。 添加一个常规 UIView 并设置一个 Aspect Ratio 约束，乘数为 852:568。这是背景照片的尺寸，852 x 568 像素，但实际值并不重要，只要纵横比相同即可。 （不要忘记在视图控制器中将容器视图绑定到您想要的任何位置。请参阅下面的更新了解如何执行此操作。）
2。将背景图像放入容器中。 将图像视图作为子视图添加到容器中。设置约束以接触容器的所有四个边缘。将 Image 属性 设置为您的图像，并将 Content Mode 设置为 Aspect Fit。
3。添加第一个 spacer 视图。 将常规 UIView 添加到容器视图（见下面最左边的白色视图）并设置约束如下：
height = 1（不重要，图中我用了10）Top space to Superview = 90（不重要）Leading space to Superview = 0Width equal to Superviewwith multiplier dw:cw <- 这使得它成比例！
dw是左边缘到第一个window/button的距离，cw是容器的宽度。如果您的容器宽度为 375，并且您与第一个按钮的距离为 105，则乘数将为 105:375.
4.添加第二个 space 视图。 这是垂直 spacer，从顶部到第一个按钮。设置与第一个 spacer 类似，除了使 height 与容器高度成比例，并且宽度固定。
5.添加第一个按钮。 将其左边缘和上边缘约束到 spacers，然后使其宽度和高度与容器成比例。
6.添加剩余的 spacers 和按钮。 它们都是一样的。只要记住在哪里使它们成比例。所有按钮都限制在单个垂直 spacer.
最后，您应该隐藏 spacer 个视图。您可以通过选择不同的设备在 Storyboard 中轻松试用它。
我选择在iPhone8 上添加所有内容，但这并不重要。这是我更改为 iPad Pro 12.9" 和 iPhone SE 时的样子。请注意按钮的正确位置。 spacer 移动了一点，因为它们有部分固定的距离，但无论如何它都能正常工作。
更新：这里是如何在视图控制器的视图中约束容器视图以使容器填充整个视图并仍然保持其纵横比。
首先，为 Horizontal 和Vertical。这将允许图像压缩而不是扩展如果它有一个选择。
其次，将以下约束添加到您的容器中：
Align Center X to SuperviewAlign Center Y to SuperviewEqual Width to Superview >= 0Equal Height to Superview >= 0852:568 Ratio to View<- 这个你应该已经有了！
现在容器将始终位于屏幕中心，它总是会 至少 整个屏幕，但也允许它在 X 和 Y 之外填充。
更新 2：如果您想忽略照片的纵横比，并始终用照片填充屏幕，您只需将容器视图的约束添加到其父视图的每一侧。您的容器视图的约束应如下所示。
在第 2 步中，您需要将图像的 Content Mode 设置为 Scale to fill。其余的应该是一样的。