如何在不同尺寸iOS设备上计算叠加UIImageView的相对位置

嗨，这个需求我之前做项目的时候碰到过！不用AutoLayout的话，核心是不能直接基于屏幕或背景UIImageView的frame来定位子视图——因为aspect fit模式下，背景图会保持自身比例居中显示，大概率不会填满整个容器（背景UIImageView），上下或左右会有留白。我们得基于背景图的实际显示区域来计算子视图的相对位置，才能在所有设备上还原一致的视觉效果。

下面是具体的实现步骤，用Swift举例：

1. 先算出背景图在容器内的实际显示Frame #

首先要写一个工具方法，根据背景UIImageView的尺寸和图片本身的尺寸，计算出aspect fit模式下图片实际显示的位置和大小：

func getImageDisplayFrame(in containerView: UIImageView) -> CGRect {
    guard let image = containerView.image else { return .zero }
    
    let imageSize = image.size
    let containerSize = containerView.bounds.size
    
    // 计算缩放比例：取宽、高方向缩放比例中较小的那个，确保图片完全显示在容器内
    let scaleFactor = min(containerSize.width / imageSize.width, containerSize.height / imageSize.height)
    
    // 缩放后的图片尺寸
    let scaledImageWidth = imageSize.width * scaleFactor
    let scaledImageHeight = imageSize.height * scaleFactor
    
    // 计算居中显示的偏移量
    let offsetX = (containerSize.width - scaledImageWidth) / 2
    let offsetY = (containerSize.height - scaledImageHeight) / 2
    
    return CGRect(x: offsetX, y: offsetY, width: scaledImageWidth, height: scaledImageHeight)
}

2. 确定设计稿中的相对比例 #

你需要从设计稿里拿到两个关键数据：

• 背景图的原始尺寸（比如设计稿用的背景图是1080×1920，或者直接用图片本身的像素尺寸）
• 子UIImageView的参考位置（比如它的左上角相对于背景图左上角的坐标，假设是(designX, designY)）

然后计算这个位置相对于背景图尺寸的比例：

// 示例：设计稿背景图尺寸
let designImageSize = CGSize(width: 1080, height: 1920)
// 示例：设计稿子视图左上角坐标
let designSubViewOrigin = CGPoint(x: 300, y: 600)

// 计算相对比例
let xRatio = designSubViewOrigin.x / designImageSize.width
let yRatio = designSubViewOrigin.y / designImageSize.height

如果子视图的大小也需要适配，同样可以用比例计算（比如设计稿子视图宽100，那么实际宽度就是scaledImageWidth * (100 / designImageSize.width)）

3. 计算子视图在当前设备上的实际位置 #

结合第一步得到的背景图实际显示Frame，和第二步的比例，就能算出子视图的准确位置：

// 获取背景图实际显示区域
let imageDisplayFrame = getImageDisplayFrame(in: backgroundImageView)

// 计算子视图的实际原点坐标
let actualSubViewX = imageDisplayFrame.origin.x + imageDisplayFrame.width * xRatio
let actualSubViewY = imageDisplayFrame.origin.y + imageDisplayFrame.height * yRatio

// 设置子视图的Frame（这里假设子视图大小已经按比例适配好了，或者固定大小）
subImageView.frame = CGRect(x: actualSubViewX, y: actualSubViewY, 
                            width: subImageView.bounds.width, height: subImageView.bounds.height)

4. 适配动态场景 #

别忘了在背景UIImageView的Frame发生变化时（比如设备旋转、横竖屏切换、父视图布局更新），重新计算子视图的位置。你可以把计算逻辑放在viewDidLayoutSubviews方法里：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    // 在这里重新计算并设置子视图位置
    updateSubViewPosition()
}

func updateSubViewPosition() {
    // 把上面的计算逻辑放在这里
}

额外注意点 #

• 优先用背景图的原始像素尺寸作为设计参考，而不是某个设备的屏幕尺寸，这样能避免因设计稿设备比例和图片比例不一致导致的误差。
• 如果子视图是基于背景图的某个特征点定位（比如背景图里的按钮中心），那直接用该特征点在背景图中的相对比例计算即可，逻辑和上面一致。

内容的提问来源于stack exchange，提问作者user2029250