如何在这些 UIImageViews 之间保持图像的位置和大小不变？

Question

如你所见，我有这个霓虹磁带的场景。在界面构建器中，我创建了 3 个 UIImageView，一个用于卡带背景，2 个用于左右主轴。这个想法是这些主轴根据状态（倒带，ffw或播放）向后或向前旋转。如果我只在 iPhone 8 上运行它，我可以做到这一点。但是，当我决定要在 iPhone 11 Pro 上运行它时，会发生以下情况：

无论我尝试编造何种奇怪的约束组合，我都无法让心轴在设备上遵循其正确的位置/尺寸。我将不得不花一些时间查找和阅读有关自动布局野兽的指南，但在爬上那座山之前，我将不胜感激！

编辑：

这是我目前所拥有的程序化版本，更具描述性：

override func viewDidLoad() {
    super.viewDidLoad()

    // Code to position/size cassette
    let cassette = UIImageView(image: UIImage(named: "cassette"))
    cassette.translatesAutoresizingMaskIntoConstraints = false
    cassette.contentMode = .scaleAspectFit
    view.addSubview(cassette)

    view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: cassette.bottomAnchor, constant: 44).isActive = true
    view.safeAreaLayoutGuide.trailingAnchor.constraint(equalTo: cassette.trailingAnchor, constant: 20).isActive = true
    cassette.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20).isActive = true
    cassette.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 44).isActive = true

    // Code to position/size spindles
    let spindleLeft = UIImageView(image: UIImage(named: "spindle"))
    spindleLeft.translatesAutoresizingMaskIntoConstraints = false
    spindleLeft.widthAnchor.constraint(equalToConstant: 74).isActive = true
    spindleLeft.heightAnchor.constraint(equalToConstant: 74).isActive = true
    cassette.addSubview(spindleLeft)

    spindleLeft.centerXAnchor.constraint(equalTo: cassette.centerXAnchor, constant: -130.0).isActive = true
    spindleLeft.centerYAnchor.constraint(equalTo: cassette.centerYAnchor, constant: -14.0).isActive = true

}

以下是 2 项资产：

我目前正试图弄清楚是否有某种方法可以使用设备的 aspectRatio 以及我应该使用什么 UIImageView 内容模式（Aspect Fit、Aspect Fill）。也许我已经挖掘得太深了，有一个更简单的方法来处理这个我没有看到......

Answer 1

单纯的自动布局并不能做到这一点。如果它是原始图像的一部分，您必须测量主轴的位置，然后根据图像视图的实际大小以及通过其内容模式放置图像的位置以数学方式将主轴放置在那里。

让我们为一个主轴（左主轴）执行此操作。您发布的卡带图像为 4824x2230。我们仔细检查发现，如果以全尺寸显示卡带图像，则主轴中心应在（1294,1000）左右，一侧应为500像素左右。

这与说我们希望主轴图像占据一个方框（相对于原始磁带图像）为 (1045,750,500,500) 的正方形。

好的，但这只是图像。我们必须相对于描绘它的图像视图来定位主轴。

所以现在我将在图像视图中显示卡带，该图像视图通过自动布局调整为更小的尺寸。 （我可以在viewDidLayoutSubviews 中发现它的什么大小，它在自动布局完成其工作后运行。）并让这个图像视图具有Aspect Fit 的内容模式。图像将被调整大小，并且它的位置可能不在图像视图的原点。

因此，您必须解决的问题（在代码中）是：现在调整图像大小和重新定位后，相对于 图像视图 的主轴框架在哪里？然后，您只需将主轴图像视图放在那里。

这是来自viewDidLayoutSubviews的代码； cassette 是磁带图像视图，spindle 是主轴图像视图：

    let cassettebounds = cassette.bounds
    let cw = cassettebounds.width
    let ch = cassettebounds.height
    let w = 4824 as CGFloat
    let h = 2230 as CGFloat
    var scale = cw/w
    var imw = cw
    var imh = h*scale
    var imx = 0 as CGFloat
    var imy = (ch-imh)/2
    if imh > ch { // we got it backwards
        scale = ch/h
        imh = ch
        imw = w*scale
        imy = 0 as CGFloat
        imx = (cw-imw)/2
    }
    cassette.addSubview(spindle)
    spindle.frame.size.width = 500*scale
    spindle.frame.size.height = 500*scale
    spindle.frame.origin.x = imx + (1045*scale)
    spindle.frame.origin.y = imy + (750*scale)

这是 6s 和 11 Pro 的结果：

如果我自己这么说的话，看起来太棒了。右边的纺锤作为练习留给读者。

Answer 2

感谢@matt 的出色回答。当需要的是一种更基本的方法时，我肯定将过多的权力归于自动布局。我已将他的答案标记为正确，并将提供我的新代码，该代码可以工作并支持各种尺寸的屏幕：

override func viewDidLoad() {
    super.viewDidLoad()

    // Code to position/size cassette
    cassette = UIImageView(image: UIImage(named: "cassette"))
    cassette.translatesAutoresizingMaskIntoConstraints = false
    cassette.isUserInteractionEnabled = true
    cassette.contentMode = .scaleAspectFit
    view.addSubview(cassette)

    view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: cassette.bottomAnchor, constant: 44).isActive = true
    view.safeAreaLayoutGuide.trailingAnchor.constraint(equalTo: cassette.trailingAnchor, constant: 20).isActive = true
    cassette.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20).isActive = true
    cassette.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 44).isActive = true
}

override func viewDidLayoutSubviews() {
    spindleLeft = addSpindle(to: cassette, posX: 505, posY: 350)
    spindleRight = addSpindle(to: cassette, posX: 1610, posY: 350)
}

func addSpindle(to cassette: UIImageView, posX: CGFloat, posY: CGFloat) -> UIImageView {
    let cassetteBounds = cassette.bounds
    let cassetteWidth = cassetteBounds.width
    let cassetteHeight = cassetteBounds.height

    let cassetteImageWidth =  cassette.image!.size.width
    let cassetteImageHeight = cassette.image!.size.height

    var scale = cassetteWidth / cassetteImageWidth

    var spindleWidth = cassetteWidth
    var spindleHeight = cassetteImageHeight*scale
    var spindleX = 0 as CGFloat
    var spindleY = (cassetteHeight - spindleHeight)/2

    if spindleHeight > cassetteHeight {
        scale = cassetteHeight / cassetteImageHeight
        spindleHeight = cassetteHeight
        spindleWidth = cassetteImageWidth*scale
        spindleY = 0 as CGFloat
        spindleX = (cassetteWidth - spindleWidth)/2
    }

    let spindle = UIImageView(image: UIImage(named: "spindle"))
    cassette.addSubview(spindle)

    spindle.frame.origin.x = spindleX + (posX*scale)
    spindle.frame.origin.y = spindleY + (posY*scale)
    spindle.frame.size.width = spindle.image!.size.width*scale //299.0
    spindle.frame.size.height = spindle.image!.size.height*scale //299.0

    return spindle
}