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

我正在努力使我的按钮高度和位置适应屏幕大小的变化，如上图所示。按钮本身将保持清晰，仅作为一种简单的方式来处理触发不同屏幕序列的点击。我的目标是使图像在不同的屏幕尺寸上延伸，我希望按钮与窗口保持相同的高度、宽度和位置。我知道，如果窗口有属性，我可以简单地使按钮具有与它们相同的大小和宽度，然后就可以完成了，但正如我所提到的，图像是静态的，必须暂时保持这种状态。我尝试过为按钮创建约束，但这只是一个令人头痛的问题，我不知道堆栈视图是否也能帮助我，我知道这相当复杂，但我同意，我只需要一些指导

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

---

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

与计算大小类似，以百分比为基础确定ImageView的宽度和高度，并将百分比值乘以屏幕的总宽度和高度

例如，要计算窗口1的位置-

假设window1.x的百分比为25%，总图像视图宽度为400（例如），而window1.x的像素位置为-

window1X = (25 * 400) / 100 = 100

window1Y = (25 * 300) / 100 = 75

假设window1.y的百分比为25%，总图像视图高度为300（例如），而window1.y的像素位置为-

window1X = (25 * 400) / 100 = 100

window1Y = (25 * 300) / 100 = 75

假设宽度为图像视图宽度的7%，而不是像素宽度-

window1Width = (7 * 400) /100 = 28

window1Height = (12 * 300) /100 = 36

window1.frame = CGRectMake (window1X, window1Y, window1Width, window1Height)

假设高度为图像视图高度的12%，而不是像素高度-

window1Width = (7 * 400) /100 = 28

window1Height = (12 * 300) /100 = 36

window1.frame = CGRectMake (window1X, window1Y, window1Width, window1Height)

其他窗口采用相同方法计算其位置（大小与窗口1相同）

---

此方法适用于所有屏幕分辨率，因为它使用基于百分比的计算和缩放填充作为图像视图的内容模式。

如果要在interface builder中执行此操作，并不太难。应该使用间隔视图和比例尺寸来定位按钮。这样，无论你的背景有多大，所有的元素都会跟随

1。创建一个与图像具有相同比例的容器。添加一个常规的

ui视图

，并设置一个

纵横比

约束，其乘数为

852:568

。这是背景照片的尺寸，852 x 568像素，但实际值并不重要，只要纵横比相同。（不要忘了将容器视图绑定到视图控制器中所需的位置。请参阅下面的更新以了解如何执行此操作。）

2。将背景图像放置在容器中。将图像视图作为子视图添加到容器中。设置约束以接触容器的所有四条边。为图像设置

Image

属性，并将

Content Mode

设置为

Aspect Fit

3。添加第一个间隔视图。将常规的

ui视图

添加到容器视图（请参见下面最左侧的白色视图），并按如下方式设置约束：

• height=1

  （不重要，我在图中使用了10）

• 到Superview的顶部空间=90

  （不重要）

• 超级视图的前导空间=0

---

• 宽度等于Superview

  带乘数dw:cw谢谢你的建议，我没想到会这样看。这种方法也能解释图像大小的变化，比如iPad 9.7英寸？另外，如果我在内容模式中使用方面填充，这种方法会发生什么变化？我只想更好地了解这一切。我还应该提到，我是在interface builder中完成这项工作的，而不是在代码中。我看到几年前有人问过类似的问题，应用程序将保持纵向模式，虽然我不确定帧数学是什么，如果这对我有帮助的话，我将非常感谢你的解释。这是一个非常好的回答，我认为这会很有帮助，但是请原谅我，我有一些问题要问。对于第一部分，您是如何获得包含UIView的视图控制器的，UIView的纵横比将乘数设置为照片的尺寸的？我想分享一张它在我这边看起来的照片，但是视图控制器的视图比例是一样的。“将容器绑定到视图中所需的方式”是否也意味着添加适当的约束？如果这些是基本问题，我很抱歉。我不确定我是否正确理解了您的第一个问题，但是视图控制器（或者更准确地说，它的视图）通常会填满屏幕，屏幕的大小也是如此。您希望图像如何在屏幕上显示？你的第二个问题，是的！如果你告诉我你想如何在不同的屏幕大小的图像布局，我会尽力帮助如果需要的话。对不起，我不清楚我的第一个问题。在将容器视图添加到