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

Question

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.

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