时间戳

首页 > 解决方案 > 图像视图的纵横比在 iPad 和 iPhone 上不一样

ios - 图像视图的纵横比在 iPad 和 iPhone 上不一样

问题描述

我正在尝试制作 Connect Four 游戏，一切正常，除了在 iPad 上与在 iPhone 上时我的板的纵横比不同，我似乎无法找出问题所在。这给我带来了问题，因为我依靠纵横比来计算碎片的位置，因为我将它们放到板上。

我做了一个基本的问题示例，代码如下

override func viewDidLoad() {
    super.viewDidLoad()

    let guide = view.safeAreaLayoutGuide

    let bottomView = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
    bottomView.backgroundColor = .red
    bottomView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bottomView)
    NSLayoutConstraint.activate([
        bottomView.bottomAnchor.constraint(equalTo: guide.bottomAnchor),
        bottomView.leadingAnchor.constraint(equalTo: guide.leadingAnchor),
        bottomView.trailingAnchor.constraint(equalTo: guide.trailingAnchor),
        bottomView.heightAnchor.constraint(equalToConstant: 120)
    ])

    let image = UIImage(named: "Frontground")
    imageView = UIImageView(image: image)
    imageView.translatesAutoresizingMaskIntoConstraints = false

    view.addSubview(imageView)

    NSLayoutConstraint.activate([
        imageView.trailingAnchor.constraint(equalTo: guide.trailingAnchor),
        imageView.leadingAnchor.constraint(equalTo: guide.leadingAnchor),
        imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 329/389),
        imageView.bottomAnchor.constraint(equalTo: bottomView.topAnchor, constant: -32)
    ])
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    let desiredAspectRatio = CGFloat(CGFloat(389)/CGFloat(329))
    let actualAspectRatio = imageView.frame.size.width/imageView.frame.size.height

    print("Desired Aspect Ratio is \(desiredAspectRatio), actual Aspect ratio is \(actualAspectRatio)")
}

我使用的图像宽度为 389，高度为 329，我想在所有设备上保持这种关系。

iPad 上的纵横比并没有那么遥远，但足以让它最终无法精确地安装在孔中。尽管我的宽高比不精确，但在 iPhone 版本上一切正常，可能是因为屏幕较小，问题并不那么明显。

这是我使用的图像的示例。

示例图像

当我在 iPhone 上运行时，我得到：所需的纵横比是 1.182370820668693，实际纵横比是 1.1828571428571428

当我在 iPad 上运行时，我得到：Desired Aspect Ratio is 1.182370820668693, actual Aspect ratio is 1.1824817518248176

无论如何我可以获得我想要的确切纵横比吗？

任何有关此事的帮助将不胜感激。

谢谢，艾伦

标签： iosswiftuiimageviewaspect-ratio

解决方案

请记住，UIKit不能在部分像素上绘制。

在各种设备上使用您的约束，宽度将是整数，但计算出的高度不会......所以自动布局会调整。

在这些设备上，我们得到：

Ratio: 329.0 / 389.0 = 0.8457583547557841

iPad Pro 12.9
actual w: 1024.0 * 0.8457583547557841 = 866.0565552699229 ... but actual h: 866.0

iPad Pro 9.7
actual w:  768.0 * 0.8457583547557841 = 649.5424164524422 ... but actual h: 649.5

iPhone 8
actual w:  375.0 * 0.8457583547557841 = 317.15938303341903 ... but actual h: 317.0

iPhone 11
actual w:  414.0 * 0.8457583547557841 = 350.14395886889463 ... but actual h: 350.0

因此，您在不同尺寸上的实际纵横比将不会完全相同。

要获得像素完美的对齐，您需要考虑到这一点。

另请注意，Points不等于Pixels。在2x屏幕缩放设备上，帧值可以四舍五入到 1/2 点，因此您可能会得到649.5点等高度。

在3x屏幕缩放设备上，帧值可以四舍五入到 1/3 点，因此您可能会得到649.6666667点的高度。

推荐阅读