调整静态背景图像上的按钮和位置

Question

我正在努力让我的按钮高度和位置适应屏幕尺寸变化，如上图所示。按钮本身将保持清晰，仅用作处理触发不同屏幕的分段的简单方法。我的目标是使图像延伸到不同的屏幕尺寸，我希望按钮与窗口保持相同的高度和宽度和位置。我知道如果窗口有属性，我可以简单地让按钮具有相同的大小和宽度，并且完成，但正如我所提到的，图像是静态的，它必须暂时保持这种状态。我已经尝试为按钮创建约束，这只是一个令人头疼的问题，我不知道堆栈视图是否会帮助我，我知道这是相当复杂的，但我很好，我只是需要某个方向。

更新：为了按照正确列出的LGP说明，我从步骤1开始。正如我在评论中提到的，我认为这只是比率和约束冲突，因为当我删除一两个它工作正常，但然后我如何设置约束，使其填满整个屏幕并保持图片的比例？还显示了图像视图的约束冲突，它也没有显示父容器视图的宽高比  

Answer 1

如果你想在界面构建器中这样做，那就不难了。您应该使用 spacer views 和比例尺寸来定位按钮。这样，无论你的背景大小如何，所有元素都将随之而来。

<强> 1。创建一个与图像具有相同比例的容器。添加常规UIView并设置Aspect Ratio约束，其乘数为852:568。这是背景照片的尺寸，852 x 568像素，但实际值并不重要，只要宽高比相同即可。 （不要忘记在视图控制器中将容器视图绑定到您想要的位置。请参阅下面的更新，了解如何执行此操作。）

<强> 2。将背景图像放在容器中。将图像视图作为子项添加到容器中。设置约束以触摸容器的所有四个边。将Image属性设置为您的图片，并将Content Mode设置为Aspect Fit。

第3。添加第一个间隔视图。将常规UIView添加到容器视图（请参阅下面最左侧的白色视图）并按如下所示设置约束：

• height = 1（不重要，我在图片中使用了10张）
• Top space to Superview = 90（不重要）
• Leading space to Superview = 0
• Width equal to Superview乘数 dw：cw ＆lt; - 这使它成比例！
  dw 是距离从左边到第一个窗口/按钮， cw 是容器的宽度。如果您的容器宽375，与第一个按钮的距离为105，则乘数为105：375。

<强> 4。添加第二个空间视图。这是垂直间隔符，从顶部到第一个按钮。设置类似于第一个垫片，除了使高度与容器高度成比例，并且宽度固定。

<强> 5。添加第一个按钮。将其左边和上边缘限制在间隔物上，然后使其宽度和高度与容器成比例。

<强> 6。添加剩余的垫片和按钮。它们都是一样的。只记得在哪里使它们成比例。所有按钮都是单个垂直间隔的约束。

最后，你应该隐藏间隔视图。您可以通过选择不同的设备在故事板中轻松尝试。

我选择在iPhone 8上添加所有内容，但这并不重要。这是我更改为iPad Pro 12.9"和iPhone SE时的样子。请注意按钮的正确定位方式。间隔物移动了一点，因为它们具有部分固定的距离，但无论如何它都可以正常工作。

更新：以下是如何在视图控制器的视图中约束容器视图，以使容器填满整个视图并仍保持其宽高比。

首先，为Content Compression Resistance Priority和{200设置图片视图（您在上面的步骤2中添加的那个）Horizontal到Vertical {1}}。这将允许图像压缩而不是扩展如果它有选择。

其次，向容器添加以下约束：

• Align Center X to Superview
• Align Center Y to Superview
• Equal Width to Superview >= 0
• Equal Height to Superview >= 0
• 852:568 Ratio to View＆lt; - 这应该已经有了！

现在容器将始终以屏幕为中心，它将始终至少填充整个屏幕，但也允许它在X和Y之间填充。

更新2：如果您想忽略照片的宽高比，并且始终用照片填充屏幕，您只需将容器视图的约束添加到其超视图的每一侧。容器视图的约束应该如下所示。

在第2步中，您需要将图片Content Mode设置为Scale to fill。其余的应该是一样的。

Answer 2

使用基于百分比的职位和规模。以百分比为基础确定窗口的位置，并通过将百分比乘以屏幕的宽度和高度来创建x和y维度的原点。我假设你使用 ScaleToFill 作为ImageView的内容模式。

类似于计算尺寸，以百分比为基础识别ImageView的宽度和高度，并将百分比值与屏幕的总宽度和高度相乘。

例如，要计算Window one的位置 -

假设，window1.x 以百分比为基础是25％＆amp;总图像视图宽度为400（例如），而window1.x像素位置将为 -

window1X = (25 * 400) / 100 = 100

假设，window1.y 以百分比为基础是25％＆amp;总图像视图高度为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)

其他窗口的相同方法，计算它们的位置（大小将与窗口1相同）

此方法适用于所有屏幕分辨率，因为它使用基于百分比的计算＆amp; ScaleToFill 作为图片视图的内容模式。