SnapKit:如何以编程方式设置TableViewCell中项目的布局约束 [英] SnapKit: How to set layout constraints for items in a TableViewCell programatically

问题描述

我是swift/iOS开发人员的初学者.来自Web开发人员的布局模型与DOM/Box模型相比完全让我感到困惑.我知道这意味着要全神贯注，但是对于我的一生，我似乎无法弄清楚，我希望像这样的基本示例可以帮助说明一些事情，即使我正在使用DSL时也是如此.像snapkit: http://snapkit.io/

I'm a beginner at swift/iOS dev. Coming from web dev, the layout model is completely confusing to me compared to the DOM/Box model. I know it means just getting one's head around everything, but for the life of me I just can't seem to figure it out, I was hoping a basic example like so might help illustrate a few things, even as I am using a DSL like snapkit: http://snapkit.io/

我该如何为如下所示的布局建立约束:

How could I go about building the constraints for a layout like the following:

到目前为止，我所知道的-显然-错误的是以下内容:

What I have so far, which is -clearly- wrong is the following:

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)
}

其中Style.MARGIN只是设置为20

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

I feel like I just need to see an example like this to understand how the layout flows and is built, and perhaps get away from building it like one would with a website. I think on a most basic level, the most confusing thing to me is to understand how objects of varying dynamic heights can just be placed beneath the previous one, and have the tableViewCell also resize accordingly.

推荐答案

自iOS 9起，可以使用UIStackViews构建许多像这样的简单布局，UIStackViews是管理子视图及其布局约束的容器视图，因此您不必必须(像怀旧评论家一样).

Since iOS 9, a lot of simple layouts like this one can be build using UIStackViews, which are container views managing subviews and their layout constraints so you don't have to (like the nostalgia critic).

除了概念上简单之外，UIStackViews还给他们带来了很多好处.它们性能良好，易于使用，并且易于隐藏/显示视图，而无需手动操作和更新很多约束.

UIStackViews have a lot of benefits to them, other than being simple in concept. They perform well, are easy to use and make it easy to hide / show views without manipulating and updating a lot of constraints manually.

在这种情况下，您有两个UILabel和一个UIImageView以一定的间距堆叠在一起.如果要实现此布局，则可以将两个标签组合在一个UIStackView中，将其添加到具有一些插图的UIView中，然后将该视图与UIImageView一起添加到另一个UIStackView中，如下所示:

In this case you have two UILabels and a UIImageView stacked on top of each other with some spacing. If I were to implement this layout, I would group the two labels together in a UIStackView, add it to a UIView with some insets, and add that view to another UIStackView along with the UIImageView like this:

UIStackView(1)

UIStackView (1)

UIView(2)

UIView (2)

UIStackView(3)

UIStackView (3)

UILabel(4)

UILabel (4)

UILabel(5)

UILabel (5)

UIImageView(6)

UIImageView (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的内容视图:

And then you need to constrain the container stack view to the content view of your UITableViewCell:

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

这就是我要做的.当然，您自己管理约束的方法同样有效，并且可以按照以下步骤进行:

This is how I would do it. Of course, your approach with managing the constraints yourself is equally valid and would be done as follows:

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)
}

请注意，我是在文本编辑器中编写的，因此可能会有一些错别字，但总体思路应该成立.

Please note, I wrote this in a text editor so there might be some typos, but the general idea should hold.

这篇关于SnapKit:如何以编程方式设置TableViewCell中项目的布局约束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！