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

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

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 <- 这使它成比例!
  数据仓库 是从左边缘到第一个窗口/按钮的距离,以及 cw公司 是容器的宽度。如果您的集装箱宽度为375,并且到第一个按钮的距离为105,则乘数将为105:375。

4、添加第二个空间视图。 这是垂直间隔,从顶部到第一个按钮。将其设置为与第一个隔套相似的位置,除了 身高 与容器高度成比例,宽度固定。

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

添加剩余的垫片和按钮。 他们都是一样的。记住在哪里使它们成比例。所有按钮都约束到单个垂直间隔符。

最后,应该隐藏间隔视图。通过选择不同的设备,您可以在情节提要中轻松尝试。

我选择在iPhone 8上添加所有内容,但这并不重要。这是当我换成 iPad Pro 12.9" 和 iPhone SE . 注意按钮的正确位置。间隔棒移动了一点,因为它们有部分固定的距离,但不管怎样,它工作得很好。

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

首先,设置 图像视图的 (您在上述步骤2中添加的) Content Compression Resistance Priority 到 200 对于两者 Horizontal 和 Vertical . 这将允许图像压缩而不是扩展 如果 它有一个选择。

其次,向容器添加以下约束:

• 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:如果要忽略照片的纵横比,并始终用照片填充屏幕,只需将容器视图的约束添加到其superview的每一侧即可。容器视图的约束应如下所示。

在步骤2中,您需要设置图像的 内容模式 到 Scale to fill . 其余部分应相同。

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

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

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

假设是window1。x个 百分比基础为25%&总图像视图宽度比window1宽400(例如)。x像素位置将为-

window1X = (25 * 400) / 100 = 100

假设是window1。y 百分比基础为25%&总图像视图高度比window1高300(例如)。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相同)

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