添加的子视图位置稍微偏离 - 我怎样才能把它放回原位？

Question

更新：已解决！虽然 pianoNoteDisplayed 和 piano_background 的 contentMode 确实相同，但显然对于添加的子视图而言并非如此。我只是将行 subview.contentMode = superview.contentMode 添加到 vdmzz 建议的函数中，现在在所有 4 种屏幕尺寸上一切看起来都正确。

有两个图像视图：一个名为 "piano_background" 的视图包含背景图像（钢琴键盘），另一个将用于显示突出显示的音符。第二个受限于第一个：

（宽度约束可能是不必要的，因为前导和尾随约束已经设置，对吧？）

为了显示多个突出显示的键，我以编程方式将子视图添加到 piano_note 视图并激活 NSLayoutConstraints 以使其就位（否则它会显示出不合适的位置），如下所示：

pianoNoteDisplayed.image = nil

if !notesAlreadyAttempted.contains(currentUserAnswer) {

   let wrongNoteImageName = "large_\(currentUserAnswer)_wrong"
   let wrongNoteImage = UIImage(named: wrongNoteImageName)
   let wrongNoteImageView = UIImageView(image: wrongNoteImage!)

   wrongNoteImageView.translatesAutoresizingMaskIntoConstraints = false
   pianoNoteDisplayed.addSubview(wrongNoteImageView)

   NSLayoutConstraint.activate([
       wrongNoteImageView.widthAnchor.constraint(equalToConstant: pianoNoteDisplayed!.frame.width),
       wrongNoteImageView.heightAnchor.constraint(equalToConstant: pianoNoteDisplayed!.frame.height)
   ])

   }

   notesAlreadyAttempted.append(currentUserAnswer)
}

问题是子视图显示略有偏差，我似乎无法弄清楚原因：

（如您所见，高光看起来在垂直方向上略有压缩。顶部正确着陆，但底部没有达到大约 5px 的足够远）

我尝试过以多种方式居中和约束子视图，使用堆栈上大约 5 个不同答案的建议，以及我发现的其他几篇文章。我使用的图像（钢琴背景和覆盖的音符突出显示子视图）大小相同。我尝试在界面生成器中添加更多或更少的约束，并且我尝试将子视图添加到原始 piano_background 视图而不是第二个 pianoNoteDisplayed 视图 - 结果相同。顺便说一句，使用 pianoNoteDisplayed 视图本身来显示突出显示的音符效果很好：

这些是使用通常的 .image 方法显示的：

pianoNoteDisplayed.image = UIImage(named: "large_\(currentCorrectAnswer)_right")

对于如何进一步解决问题有什么建议吗？

Answer 1

首先，据我了解，pianoNoteDisplayed 不需要是 UIImageView。其次，如果您将 piano_background 和 pianoNoteDisplayed 按顶部、前导、尾部和底部边缘对齐，一个将恰好在另一个之上。或者您可以将它们设置为相等的高度、宽度和中心位置。当前约束集的问题是 piano_background 的 Y 位置由安全区域确定，因此可能会推迟 pianoNoteDisplayed 的 Y 位置。

尝试使用这个函数：

func addSameSize(subview: UIView, onTopOf superview: UIView) {
    superview.addSubview(subview)

    subview.translatesAutoresizingMaskIntoConstraints = false

    subview.centerXAnchor.constraint(equalTo: superview.centerXAnchor).isActive = true
    subview.centerYAnchor.constraint(equalTo: superview.centerYAnchor).isActive = true
    subview.widthAnchor.constraint(equalTo: superview.widthAnchor).isActive = true
    subview.heightAnchor.constraint(equalTo: superview.heightAnchor).isActive = true

    subview.contentMode = superview.contentMode
}

例如

addSameSize(subview: wrongNoteImageView, onTopOf: pianoNoteDisplayed)

它将添加您的图像视图，使其与 pianoNoteDisplayed 视图

的顶部完全对齐

添加的子视图位置稍微偏离 - 我怎样才能把它放回原位？

Added subview is positioned slightly off - how can I get it back into place?

xcode

constraints

autolayout

nslayoutconstraint

swift