iPad: Specific/exact 项目在不同分辨率下的位置

Question

对于所有 iPad 分辨率，我想在图像的特定位置放置 UI 个元素。想象一个顶部有不同 icons/buttons 的平面图。每个图标都应该位于一个非常具体的位置（例如正好在厨房、地板……）。根据 background/ground 计划 imageView.background/ground，更改 device/resolution（仅限 iPad）时，图标应保持在正确的位置

查看图像（仅快速示例）：最小的 iPad (9.7") 将是正确的位置。另一幅图像 (12.9") 显示错误的位置。（对于所有 iPad 个尺寸，我只选择了两个示例）

9.7": 12.9":

我找不到解决这个定位问题的方法或想法。

Answer 1

是的，这会很困难，因为在您添加的屏幕截图中，图像看起来适合屏幕大小，这意味着它们的内容被转换以适合框架。在这种情况下，您将不得不计算实际图像大小和帧大小之间的转换比率，并将您的子视图的位置更新为新的比率。

一种替代方法是将图像视图嵌入到滚动视图中，并使其与图像的全尺寸高度和宽度相匹配。在这种情况下，您将始终拥有 1:1 纵横比，而不必重新定位子视图。但是，您必须在滚动视图中滚动才能查看图像。

Answer 2

您可以通过使您的 "bulb" 位置相对于 "floor plan" 图像视图的大小来实现。

例如：

假设您的平面图图像是 1800 x 1500，您的灯泡图像是 96 x 96（我是根据您发布的图像估算的）...
假设左上角灯泡的中心位于 276, 486
保存平面图的 imageView 是 900 x 750（原始大小的一半）

你会设置：

xScale = 900 / 1800 (0.5)
yScale = 750 / 1500 (0.5)

bulb width = 96 * xScale
bulb height = 96 * yScale

bulb center = 276 * xScale, 486 * yScale

下面是一些可以帮助您入门的示例代码：

class FloorPlanViewController: UIViewController {

    @IBOutlet var floorPlanView: UIImageView!

    var bulbs: [UIImageView] = [UIImageView]()

    var centers: [CGPoint] = [
        CGPoint(x: 276, y: 486),
        CGPoint(x: 276, y: 648),
        CGPoint(x: 640, y: 486),
        CGPoint(x: 640, y: 648),
        CGPoint(x: 877, y: 486),
        CGPoint(x: 877, y: 648),
        ]

    override func viewDidLoad() {
        super.viewDidLoad()

        for _ in centers {
            let v = bulbImageView()
            floorPlanView.addSubview(v)
            bulbs.append(v)
        }

    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        if let fpImage = floorPlanView.image {

            let xScale = floorPlanView.frame.width / fpImage.size.width
            let yScale = floorPlanView.frame.height / fpImage.size.height

            for i in 0..<centers.count {

                let thisCenter = centers[i]
                let thisBulb = bulbs[i]

                thisBulb.frame.size.width = 96.0 * xScale
                thisBulb.frame.size.height = 96.0 * yScale

                thisBulb.center = CGPoint(x: thisCenter.x * xScale, y: thisCenter.y * yScale)

            }
        }

    }

    func bulbImageView() -> UIImageView {
        let v = UIImageView()
        if let img = UIImage(named: "bulb96x96") {
            v.image = img
        } else {
            v.backgroundColor = .red
        }
        return v
    }

}

iPad: Specific/exact 项目在不同分辨率下的位置

iPad: Specific/exact position of items for different resolutions

ios

ipad

resolution

ios-autolayout