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

Posted 2023-03-15

【中文标题】在静态背景图像上调整按钮大小和位置

【英文标题】：Resizing buttons and position on a static background image

【发布时间】：2018-03-18 21:44:01

【问题描述】：

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

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

【问题讨论】：

***.com/questions/30088595/… 几年前我看到有人问过类似的问题，该应用程序将保持纵向模式，虽然我不确定帧数学是什么，如果这有助于我解释不胜感激。

【参考方案1】：

如果你想在界面生成器中完成它并不太难。您应该使用 spacer views 和 proportional sizes 来定位按钮。这样，无论您的背景有多大，所有元素都会跟随。

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

这使它成比例！

dw

是从左边缘到第一个边缘的距离窗口/按钮，

cw

是容器的宽度。如果您的容器宽度为 375，并且您与第一个按钮的距离为 105，则乘数将为 105:375。

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

5.添加第一个按钮。 将其左边缘和上边缘约束到间隔，然后使其宽度和高度与容器成比例。

6.添加剩余的垫片和按钮。它们都是一样的。只要记住在哪里使它们成比例。所有按钮都限制在单个垂直间隔上。

最后，您应该隐藏间隔视图。您可以通过选择不同的设备轻松地在 Storyboard 中进行尝试。

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

---

更新：这里是如何在视图控制器的视图中约束容器视图，以使容器填充整个视图并保持其纵横比。

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

其次，将以下约束添加到您的容器：

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 你应该已经拥有了！

现在容器将始终在屏幕上居中，它将始终填充至少整个屏幕，但也允许它填充超出 X 和 Y。

---

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

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

【讨论】：

这是一个非常好的答案，我认为它会有所帮助，但请原谅我有一些问题，我会按顺序提问。对于第一部分，您如何获得包含 UIView 的视图控制器，其纵横比将乘数设置为照片的尺寸？我会在我的最后分享一张照片，但视图控制器确实与 UIView 具有相同的比例。 '将容器绑定到视图中的任何内容是否意味着添加适当的约束？如果这些是基本问题，我深表歉意。

不确定我是否理解您的第一个问题，但视图控制器通常（或更准确地说，它的 view）会填满屏幕，因此屏幕的大小也是如此。您希望图像在屏幕上的布局如何？你的第二个问题，是的！如果您告诉我您希望图像在不同屏幕尺寸上的布局如何，如果需要，我会尽力提供帮助。

抱歉，我的第一个问题不清楚。在您将容器视图添加到视图控制器并添加纵横比约束之后的第一张图像中，看起来屏幕尺寸已更改为适合纵横比。但是当我尝试按照说明进行操作时，设置了约束，但是由于宽高比太大，图像离开了屏幕。我应该提到我上面的图像只是一个例子，我不能这么说实际的，因为它是给我工作的公司的。图像将为其内容模式设置一个方面填充。

那么您希望图像如何在屏幕上布局？我对容器视图的定位只是一个示例，因为我不太清楚你会喜欢它。

哦，我明白了，我希望图像填满整个屏幕。这将是用户登录时看到的第一个屏幕。

【参考方案2】：

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

同样用于计算尺寸，根据百分比确定 ImageView 的宽度和高度，并将百分比值乘以屏幕的总宽度和高度。

例如计算Window one的位置-

假设 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)

其他窗口的计算方法相同（大小与窗口1相同）

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

【讨论】：

感谢您的建议，我没想到会这样看。这种方法也会考虑到图像何时改变大小，例如 iPad 9.7 英寸？另外，我在内容模式下使用 Aspect Fill 的方法有何变化？我只想更好地了解这一切。

我还应该提到我是在界面生成器中而不是在代码中这样做