Setting up different layouts for one cell, depending on its content

Question

In an UITableViewCell, I have an UIView container, which contains a UIImageView on top and an UILabel on the bottom. When the UILabel does not contain text, I want to remove the UILabel and resize the UImageView to the bottom of my UIView container.

In my TableViewCell, I have this:

        let x = imageViewPostPreview.bottomAnchor.constraint(equalTo: viewPreviewOverlay.topAnchor, constant: 0)

        if postText == "" {
            x.isActive = true
            imageViewPostPreview.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner, .layerMaxXMaxYCorner, .layerMinXMaxYCorner]
            self.layoutSubviews()
            self.layoutIfNeeded()

        } else if postText != "" {
            x.isActive = false
            imageViewPostPreview.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner]
            self.layoutSubviews()
            self.layoutIfNeeded()
            }
        }

This piece of code works on when the initial UITableViewCell is loaded, but when I scroll my UITableView, the cell loses the initial layout.

How do I setup the layout correctly, so the layout is kept on scroll?

Edit:

Initial cell, which is correct:

After scrolling, incorrect layout:

Please share your code for cellForRowAt. And don’t use pictures of screenshots. Very difficult to read. — koen, May 27 '20 at 02:52

Jawad Ali · Answer 1 · 2020-05-26T19:56:02.087

0

Add this to prepareToReuse method

 override func prepareForReuse() {
    super.prepareForReuse()


  let x = imageViewPostPreview.bottomAnchor.constraint(equalTo: viewPreviewOverlay.topAnchor, constant: 0)

    if postText.isEmpty {
      x.isActive = true
      imageViewPostPreview.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner, .layerMaxXMaxYCorner, .layerMinXMaxYCorner]


  } else  {
      x.isActive = false
      imageViewPostPreview.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner]

      }

   self.layoutIfNeeded()
  }

Note: Dont call layoutSubview directly ... always try to call layoutifNeeded or setNeeedsLayout

edited May 26 '20 at 19:56

answered May 26 '20 at 19:35

Jawad Ali

13,556
3
32
49

hi jawadAli, I have the same effect.. it has still the incorrect layout :( – JohnDole May 26 '20 at 19:43
can you share demo project to test ? – Jawad Ali May 26 '20 at 19:55

score 0 · Answer 2 · answered May 26 '20 at 20:06

A way you can have the cell calculate its size automatically, is to have constraints set inside the cell view for all directions on vertical axis. So, in your case the image view will have top, leading and trailing set to superview, and bottom to the label. The label will have leading and bottom to superview, and the top will be to the image view you set. It's important to set for vertical axis, since for table view we need it to calculate the height. This way the table view will know what to expect and can set height automatically.

After that you set tableView.rowHeight = UITableView.automaticDimension. Or you can also set in the delegate method.

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return UITableView.automaticDimension }

After all this is in place, you will only need to give the right values to the cell subviews(in this case set image and text). You can do this inside cell for row function. A sample code will look something like this.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "identifier", for: indexPath)
    let model = self.models[indexPath.row]
    cell.imageViewPostPreview.image = model.image ?? nil
    cell.postText.text = model.text ?? nil
    return cell
    }

This should work without any further need to calculate constraints and calling layouts to update. Hope this helps! You can also check this question.

Setting up different layouts for one cell, depending on its content

2 Answers2