如何在嵌套视图中使用preservesSuperviewLayoutMargins

Question

我正在尝试通过嵌套视图层次结构使用preservesSuperviewLayoutMargins，但在 UIKit 上遇到了很多问题，并且想知道我做错了什么（或者这是否是一个真正的错误）。

我正在尝试布置一些视图（一些并排，一些相互上方），如下所示：

// Various combinations here will create different visual results (it will either work or won't)

let i1 = ImageView()
//let i1 = LabelView()
let i2 = ImageView()
//let i2 = LabelView()
let i3 = ImageView()
//let i3 = LabelView()

let view = LeftRight(left: i1, right: TopBottom(top: i2, bottom: i3))
//let view = LeftRight(left: TopBottom(top: i2, bottom: i3), right: i1)

通过一些布局，我可以让它工作，如下所示。您可以看到右侧的图像正确缩进了绿色视图，而绿色视图又正确缩进了白色视图。

但与其他人一起我很挣扎：

在应用程序中运行与此类似的代码会导致完全锁定和内存失控。

使用layoutMargins 完成缩进，如下所示：

let masterView = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
masterView.translatesAutoresizingMaskIntoConstraints = false
masterView.layoutMargins = UIEdgeInsets(top: 5.0, left: 5.0, bottom: 5.0, right: 5.0)

let subView = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
subView.translatesAutoresizingMaskIntoConstraints = false
subView.layoutMargins = UIEdgeInsets(top: 5.0, left: 5.0, bottom: 5.0, right: 5.0)

这是来自游乐场的图像布局示例。 The full playground project can be found here 并且可以轻松加载并在 XCode 中运行以了解我的意思。

class ImageView: UIView {

    init() {

        super.init(frame: CGRect(x: 0, y: 0, width: 1000, height: 1000))

        self.preservesSuperviewLayoutMargins = true
        self.layoutMargins = .zero

        let imageView = UIImageView(image: UIImage(named: "jesus"))
        imageView.contentMode = .center

        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.clipsToBounds = true
        self.clipsToBounds = true
        imageView.backgroundColor = UIColor.red

        self.addSubview(imageView)

        imageView.leftAnchor.constraint(equalTo: self.layoutMarginsGuide.leftAnchor).isActive = true
        imageView.rightAnchor.constraint(equalTo: self.layoutMarginsGuide.rightAnchor).isActive = true
        imageView.topAnchor.constraint(equalTo: self.layoutMarginsGuide.topAnchor).isActive = true
        imageView.bottomAnchor.constraint(equalTo: self.layoutMarginsGuide.bottomAnchor).isActive = true
    }
}

Answer 1

好的。发现你的问题。您的主视图和子视图都具有大小为 500x500 的框架和每个边缘 5 个点的 marginLayout。如果你用.zero 的框架实例化那些，那么一切都应该没问题。

更新

在您的 Playground 多花一点时间后，我还将它添加到 ImageView：

private var imageView: UIImageView!
override var intrinsicContentSize: CGSize {
    return imageView?.intrinsicContentSize ?? .zero
}

和标签视图：

private var textLabel: UILabel!
override var intrinsicContentSize: CGSize {
    return textLabel?.intrinsicContentSize ?? .zero
}

现在在 ImageView 和 LabelView 的 init 方法中使用这些实例属性而不是局部变量。这样做之后，似乎所有可能的组合都有效。如果您知道某个特定组合不知道，请告诉我，以便我进行测试。

Answer 2

我相信你忘记了一些必需的东西。

1. 在 ImageView 和 Label 上实现 intrinsicContentSize
2. 在这 2 个 UIView 子类（TopBottom 和 LeftRight）中缺少使两个子视图具有相同宽度和高度的约束
3. 右视图 (LeftRight) 仍未将其 translatesAutoresizingMaskIntoConstraints 属性设置为 false
4. 添加最外层frame视图的constraint for bottom

5. 在frame 视图上致电layoutIfNeeded()

   top.widthAnchor.constraint(equalTo: bottom.widthAnchor).isActive = true top.heightAnchor.constraint(equalTo: bottom.heightAnchor).isActive = true