Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

407
Views
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:

diagram

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.

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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.

over 4 years ago · Santiago Trujillo Report

0

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.

  1. X position: We want it to be horizontally centered
  2. Y position: 20 from its super view's top
  3. 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
  4. 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:

  1. X position: We want it to be horizontally centered
  2. Y position: 10 from the bottom of label1
  3. 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
  4. 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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!