Question

对于所有iPad分辨率，我想将UI元素放置在图像上的特定位置。想象一个平面图，上面有不同的图标/按钮。每个图标应位于非常特定的位置（例如，正好在厨房，地板等位置）。更改设备/分辨率（仅限iPad）时，根据背景/平面图imageView，图标应停留在正确的位置。

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

9.7“： 12.9“：

我无法解决这种定位问题。

Answer 1

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

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

Answer 2

您可以通过相对于“平面图”图像视图的尺寸设置“灯泡”位置来实现此目的。

例如：

假设您的平面图图像为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：不同分辨率的项目的特定/确切位置

2 个答案: