UITableView self sizing stackView height Constraints issue

Question

I have a problem Self sizing Cell problem. I want make layout like Feed Content with attached Image like twitter

Profile Image	-	Nickname Label	-	date Label	-	menuBarButton
Vertical - StackView
ㄴ	Content Label
ㄴ	FSPager CollectionView
Horizontal - StackView

Cell height is fine with image or none image cell, but debug console tells the broken Constraints

error is...

"<SnapKit.LayoutConstraint:[email protected]#207 UILabel:0x134433be0.top == UITableViewCellContentView:0x134437b90.top + 10.0>",
"<SnapKit.LayoutConstraint:[email protected]#208 UILabel:0x134433be0.height == 25.0>",
"<SnapKit.LayoutConstraint:[email protected]#236 UIStackView:0x1344370d0.top == UILabel:0x134433be0.bottom + 10.0>",
"<SnapKit.LayoutConstraint:[email protected]#243 UIStackView:0x134437a00.top == UIStackView:0x1344370d0.bottom + 10.0>",
"<SnapKit.LayoutConstraint:[email protected]#245 UIStackView:0x134437a00.bottom == UITableViewCellContentView:0x134437b90.bottom - 10.0>",
"<NSLayoutConstraint:0x2819478e0 'UISV-canvas-connection' UIStackView:0x1344370d0.top == UILabel:0x1344341a0.top   (active)>",
"<NSLayoutConstraint:0x281947930 'UISV-canvas-connection' V:[UILabel:0x1344341a0]-(0)-|   (active, names: '|':UIStackView:0x1344370d0 )>",
"<NSLayoutConstraint:0x2819777a0 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x134437b90.height == 44   (active)>"

and my Code is

    profileImageView.snp.makeConstraints {
      $0.leading.equalToSuperview().offset(10)
      $0.top.equalTo(nicknameLabel)
      $0.size.equalTo(50)
    }
    
    nicknameLabel.setContentHuggingPriority(.defaultHigh, for: .horizontal)
    nicknameLabel.snp.makeConstraints {
      $0.top.equalToSuperview().offset(10)
      $0.height.equalTo(25)
      $0.leading.equalTo(profileImageView.snp.trailing).offset(10)
    }
    
    dateLabel.setContentHuggingPriority(.defaultLow, for: .horizontal)
    dateLabel.snp.makeConstraints {
      $0.centerY.equalTo(nicknameLabel)
      $0.height.equalTo(25)
      $0.leading.equalTo(nicknameLabel.snp.trailing)
    }
    
    menuBarButton.setContentHuggingPriority(.required, for: .horizontal)
    menuBarButton.snp.makeConstraints {
      $0.top.equalTo(nicknameLabel)
      $0.leading.equalTo(dateLabel.snp.trailing).offset(10)
      $0.trailing.equalToSuperview().inset(10)
    }
    
    imagePagerView.snp.makeConstraints {
      $0.size.equalTo(250)
    }
    attachmentView.snp.makeConstraints {
      $0.top.equalTo(nicknameLabel.snp.bottom).offset(10)
      $0.leading.equalTo(nicknameLabel)
      $0.trailing.equalTo(menuBarButton)
    }
    
    footerStackView.snp.makeConstraints {
      $0.top.equalTo(attachmentView.snp.bottom).offset(10)
      $0.leading.equalTo(nicknameLabel)
      $0.bottom.equalToSuperview().inset(10)
    }

and my tableView code is.. `

   lazy var tableView = UITableView().then {
    $0.register(FeedCell.self, forCellReuseIdentifier: FeedCell.identifier)
    $0.refreshControl = refreshControl
    $0.backgroundView = EmptyView(text: "피드가 존재하지 없습니다.")
    $0.backgroundView?.isHidden = true
    $0.backgroundColor = .white
    $0.estimatedRowHeight = 300
    $0.rowHeight = UITableView.automaticDimension
  }

`

I read raywenderlich.com self sizing cell and WTFAutolayout is enter link description here

Answer 1

Assuming your layout looks like you expect it to, this is a common issue with several UI elements - UIStackView being one of them.

Auto-layout is calculating the constraints, based on an expected cell height of 44.0. As it is modifying the elements layout, it throws errors / warnings.

Change this:

footerStackView.snp.makeConstraints {
  $0.top.equalTo(attachmentView.snp.bottom).offset(10)
  $0.leading.equalTo(nicknameLabel)
  $0.bottom.equalToSuperview().inset(10)
}

to this:

footerStackView.snp.makeConstraints {
  $0.top.equalTo(attachmentView.snp.bottom).offset(10)
  $0.leading.equalTo(nicknameLabel)
  $0.bottom.equalToSuperview().inset(10).priority(.required - 1)
}

and the messages should go away.

Answer 2

I changes the FSpagerView datasource's didSet code 1) and FSPagerView's parent Vertical StackView Constraints 2)

1. Add setNeedLayout() Before laytoutIfNeeded()

didSet {
    pageControl.numberOfPages = attachments.count
    if !attachments.isEmpty {
      imagePagerView.isHidden = false
    } else {
      imagePagerView.isHidden = true
    }
    imagePagerView.reloadData()
    setNeedsLayout() // <-- Add This line
    layoutIfNeeded()
}

2. Change FSPagerView's parent Vertical StackView trailing Constraints

trailing.equalTo(imagePagerView)