SnapKit: How to set layout constraints for items in a TableViewCell programatically

问题

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

where Style.MARGIN is just a constant set to 20

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.

回答1:

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 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.

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)

UIView (2)

UIStackView (3)

UILabel (4)

UILabel (5)

UIImageView (6)

And in code:

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)

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.

回答2:

Here is a list of things that you must specify, either directly or indirectly, when you add constraints:

The X position
The Y position
The Width
The Height

Thinking about each of those things when you do constraints can make this very straightforward.

First, label1.

X position: We want it to be horizontally centered
Y position: 20 from its super view's top
Width: some number such that its left is 20 from the super view's left, and its right is 20 away from the super view's right, this also implies the X position
Height: You haven't specified this in your screenshot. I will assume you want its height to be 1/3 of the super view

This translates to the following the constraints:

make.topMargin.equalTo(20)
make.leftMargin.equalTo(20)
make.rightMargin.equalTo(-20)
make.height.equalToSuperview().dividedBy(3)

Now for label2:

X position: We want it to be horizontally centered
Y position: 10 from the bottom of label1
Width: some number such that its left is 20 from the super view's left, and its right is 20 away from the super view's right, this also implies its X position
Height: some number such that it is 20 away from the bottom of the super view

This translates to:

make.top.equalTo(label1.snp.bottom).offset(10)
make.leftMargin.equalTo(20)
make.rightMargin.equalTo(-20)
make.bottomMargin.equalTo(-20)

You could also use a UIStackView to achieve this.

For how to make the table view resize its cell heights according to content, see this.

来源：https://stackoverflow.com/questions/54851792/snapkit-how-to-set-layout-constraints-for-items-in-a-tableviewcell-programatica

标签

ios

swift

xcode

autolayout