SnapKit：如何以编程方式设置 TableView 单元格中项目的布局约束

我是 swift/iOS 开发的初学者。来自 Web 开发，与 DOM/Box 模型相比，布局模型对我来说完全令人困惑。我知道这意味着要头脑清醒，但对于我来说，我似乎无法弄清楚，我希望像这样的基本示例可以帮助说明一些事情，即使我正在使用 DSL像快照包：http://snapkit.io/ http://snapkit.io/

我该如何构建如下布局的约束：

到目前为止，我所得到的（显然是错误的）如下：

label1.snp.makeConstraints { (make) -> Void in
  make.leading.equalTo(Style.MARGIN)
  make.trailing.equalTo(-Style.MARGIN)
  make.centerX.equalTo(self)
  make.top.equalTo(Style.MARGIN)
}

label2.snp.makeConstraints { (make) -> Void in
  make.leading.equalTo(Style.MARGIN)
  make.trailing.equalTo(-Style.MARGIN)
  make.centerX.equalTo(self)
  make.top.equalTo(label1.snp.bottom)
}

exampleImage.snp.makeConstraints { (make) -> Void in
  make.leading.equalTo(0)
  make.trailing.equalTo(0)
  make.top.equalTo(label2.snp.bottom).offset(Style.MARGIN)
  make.bottom.equalTo(0)
}

where Style.MARGIN只是一个常量设置为20

我觉得我只需要看到这样的示例就可以了解布局的流动和构建方式，并且也许可以摆脱像网站一样的构建方式。我认为在最基本的层面上，对我来说最困惑的事情是理解如何将不同动态高度的对象放置在前一个对象的下方，并使 tableViewCell 也相应地调整大小。

从 iOS 9 开始，可以使用 UIStackViews 构建许多像这样的简单布局，UIStackViews 是管理子视图及其布局约束的容器视图，因此您不必这样做（就像怀旧评论家一样）。

除了概念简单之外，UIStackViews 对它们还有很多好处。它们性能良好，易于使用，并且可以轻松隐藏/显示视图，而无需手动操作和更新大量约束。

在本例中，您有两个 UILabels 和一个 UIImageView，它们以一定的间距堆叠在一起。如果我要实现这个布局，我会将两个标签组合在一个 UIStackView 中，将其添加到带有一些插图的 UIView 中，然后将该视图与 UIImageView 一起添加到另一个 UIStackView 中，如下所示：

UIStackView (1)

界面视图 (2)

UIStackView (3)

用户界面标签 (4)

用户界面标签 (5)

UI图像视图 (6)

并在代码中：

let containerStackView = UIStackView() // (1)
containerStackView.axis = .vertical

let greenLabel = UILabel() // (4)
greenLabel.text = "Hello,"

let blueLabel = UILabel() // (5)
blueLabel.text = "World!"

let textStackView = UIStackView() // (3)
textStackView.axis = .vertical
textStackView.spacing = 10
textStackView.addArrangedSubview(greenLabel)
textStackView.addArrangedSubview(blueLabel)

let textContainerView = UIView() // (2)
textContainerView.addSubview(textStackView)
textStackView.snp.makeConstraints { make in
    make.edges.equalToSuperview().inset(20)
}

let imageView = UIImageView(image: UIImage(named: "my-image") // (6)
containerStackView.addArrangedSubview(textContainerView)
containerStackView.addArrangedSubview(imageView)

然后您需要将容器堆栈视图限制为 UITableViewCell 的内容视图：

contentView.addSubview(containerStackView)
containerStackView.snp.makeConstraints { make in
    make.edges.equalToSuperview()
}

我就是这样做的。当然，您自己管理约束的方法同样有效，并且可以按如下方式完成：

contentView.addSubview(label1)
label1.snp.makeConstraints { make in
    make.leading.equalToSuperview().offset(20)
    make.trailing.equalToSuperview().offset(-20)
    make.top.equalToSuperview().offset(20)
}

contentView.addSubview(label2)
label2.snp.makeConstraints { make in
    make.leading.equalToSuperview().offset(20)
    make.trailing.equalToSuperview().offset(-20)
    make.top.equalTo(label1.snp.bottom).offset(10)
}

contentView.addSubview(exampleImage)
exampleImage.snp.makeConstraints { make in
    make.leading.trailing.bottom.equalToSuperview()
    make.top.equalTo(label2.snp.bottom).offset(20)
}

请注意，我是在文本编辑器中编写的，因此可能存在一些拼写错误，但总体思路应该成立。