Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

400
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda