UITableViewCell constraints not updated till I scroll tableview - ios

Question

Following is my code to update view height inside tableview cell
override func layoutSubviews() {
super.layoutSubviews()
layout()
}
fileprivate func layout() {
rootFlexContainer.frame.size.width = frame.width - 20
rootFlexContainer.flex.layout(mode: .adjustHeight)
if(rootFlexContainer.frame.height != 0) {
tagsHeight.constant = rootFlexContainer.frame.height
}
}
although this is not reflected till I scroll i.e is cell is recreated. How to update constraint inside TableViewCell of a view?
here is entire tableviewcell code
import UIKit
import FlexLayout
import SDWebImage
class StoreListTableViewCell: UITableViewCell {
#IBOutlet weak var menuLbl: UILabel!
#IBOutlet weak var menuView: UIView!
#IBOutlet weak var cellBgview: UIView!
#IBOutlet weak var storeImg: UIImageView!
#IBOutlet weak var storeLocation: UILabel!
#IBOutlet weak var storeTitle: UILabel!
#IBOutlet weak var cellContainer: UIView!
#IBOutlet weak var stackView: UIStackView!
#IBOutlet weak var tagsHeight: NSLayoutConstraint!
var storeImgStr = ""
var storeTitleStr = ""
var storeLocationStr = ""
var score : Double = 0.0
var tagsStr = ""
var isMenuAvailble = 0
var retailerTags: [String]?
var cashbackString = ""
fileprivate let rootFlexContainer = UIView()
#IBOutlet weak var tagsView: UIView!
#IBOutlet weak var ratingBtn: UIButton!
override func awakeFromNib() {
super.awakeFromNib()
self.layoutIfNeeded()
cellBgview.clipsToBounds = true
cellBgview.layer.cornerRadius = 5
cellContainer.layer.shadowColor = UIColor.lightGray.cgColor
cellContainer.layer.shadowOpacity = 0.5
cellContainer.layer.shadowRadius = 5.0
cellContainer.layer.shadowOffset = CGSize(width: 0, height: 2)
cellContainer.backgroundColor = UIColor.clear
cellContainer.layer.cornerRadius = 5.0
cellContainer.layer.borderColor = UIColor.white.cgColor
cellContainer.layer.borderWidth = 0.5
ratingBtn.layer.borderWidth = 1
ratingBtn.layer.cornerRadius = 5
tagsView.addSubview(rootFlexContainer)
//cellContainer.layer.shadowPath = UIBezierPath(rect: cellBgview.bounds).cgPath
}
func setSetupStoreUI() {
if isMenuAvailble == 1 {
menuView.isHidden = false
menuView.layer.cornerRadius = 10
} else {
menuView.isHidden = true
}
storeTitle.text = storeTitleStr
// storeTitle.sizeToFit()
storeLocation.text = storeLocationStr
//storeLocation.sizeToFit()
//.filter{ $0.name != " " }
//storeImg.sd_imageIndicator = SDWebImageActivityIndicator.gray
storeImg.backgroundColor = UIColor.hexStringToUIColor(hex: AppStrings.placeHolderColor)
if let url = URL(string: storeImgStr.encoded), !(storeImgStr.isEmpty) {
self.storeImg.sd_setImage(with: url)
}
menuLbl.text = AppLocalString.PREORDER_TEXT.localized()
menuLbl.font = FontStyle.ProximaNovaBold(size: 12)
storeTitle.font = FontStyle.ProximaNovaSemibold(size: 14)
storeLocation.font = FontStyle.ProximaNovaRegular(size: 12)
storeLocation.textColor = .gray
// ratingBtn.isHidden = (score == 0)
ratingBtn.setTitle(score == 0 ? "-" : String(format: "%.1f", score), for: .normal)
ratingBtn.backgroundColor = UIColor.hexStringToUIColor(hex: Utility.getRatingColor(rating: score))
ratingBtn.layer.borderColor = UIColor.hexStringToUIColor(hex: Utility.getRatingColor(rating: score)).cgColor
rootFlexContainer.subviews.forEach({ $0.removeFromSuperview() })
//tagsView.willRemoveSubview(rootFlexContainer)
//rootFlexContainer.frame = tagsView.frame
//tagsView.addSubview(rootFlexContainer)
rootFlexContainer.flex.direction(.row).wrap(.wrap).alignSelf(.auto).justifyContent(.start).paddingRight(2).define { (flex) in
for i in 0..<((retailerTags?.count ?? 0) > 3 ? 3 : (retailerTags?.count ?? 0)) {
let nameLabel = UIButton()
nameLabel.isUserInteractionEnabled = false
nameLabel.setTitle((retailerTags?[i] ?? "").trim(), for: .normal)
nameLabel.setTitleColor(.black, for: .normal)
nameLabel.titleLabel?.font = FontStyle.ProximaNovaRegular(size: 11)
nameLabel.contentEdgeInsets = UIEdgeInsets(top: 1.5, left: 4, bottom: 1.5, right:4)
nameLabel.layer.borderColor = UIColor.hexStringToUIColor(hex: AppStrings.grayBorderColor).cgColor
nameLabel.layer.cornerRadius = 8
nameLabel.layer.borderWidth = 1.0
nameLabel.sizeToFit()
flex.addItem(nameLabel).margin(2)
}
if cashbackString != "" {
let cashbackLabel = UIButton()
cashbackLabel.backgroundColor = UIColor.hexStringToUIColor(hex: AppStrings.orangeCashbackColor)
cashbackLabel.isUserInteractionEnabled = false
cashbackLabel.setTitle(cashbackString, for: .normal)
cashbackLabel.setTitleColor(.black, for: .normal)
cashbackLabel.titleLabel?.font = FontStyle.ProximaNovaRegular(size: 10)
cashbackLabel.contentEdgeInsets = UIEdgeInsets(top: 1.5, left: 5, bottom: 1.5, right: 5)
cashbackLabel.layer.cornerRadius = 5
cashbackLabel.layer.borderWidth = 0
cashbackLabel.sizeToFit()
flex.addItem(cashbackLabel).margin(2)
}
}
rootFlexContainer.flex.layout()
if retailerTags?.count ?? 0 == 0 {
tagsView.isHidden = true
} else {
tagsView.isHidden = false
}
}
override func layoutSubviews() {
super.layoutSubviews()
layout()
}
fileprivate func layout() {
rootFlexContainer.frame.size.width = frame.width - 20
rootFlexContainer.flex.layout(mode: .adjustHeight)
if(rootFlexContainer.frame.height != 0) {
tagsHeight.constant = rootFlexContainer.frame.height
}
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
Following is view hierarchy from stroryboard

Answer 1

A few observations -
1. Unnecessary layoutIfNeeded() call inside awakeFromNib()
override func awakeFromNib() {
super.awakeFromNib()
/*
self.layoutIfNeeded() // Not Necessary, Remove it.
*/
// No other changes to current implementation
}
2. Following should not be necessary, remove it.
/* Not necessary, Remove it.
override func layoutSubviews() {
super.layoutSubviews()
layout()
}
fileprivate func layout() {
rootFlexContainer.frame.size.width = frame.width - 20
rootFlexContainer.flex.layout(mode: .adjustHeight)
if(rootFlexContainer.frame.height != 0) {
tagsHeight.constant = rootFlexContainer.frame.height
}
}
*/
3. In the method, where you populate all the details, make following changes
func setSetupStoreUI() {
// No changes to current implementation
/* Remove this, we will update later
rootFlexContainer.flex.layout()
*/
if retailerTags?.count ?? 0 == 0 {
tagsView.isHidden = true
} else {
tagsView.isHidden = false
}
// Copied as is from `layout()`
rootFlexContainer.frame.size.width = frame.width - 20
rootFlexContainer.flex.layout(mode: .adjustHeight)
if (rootFlexContainer.frame.height != 0) {
tagsHeight.constant = rootFlexContainer.frame.height
}
// do a manual layout (on contentView, NOT self)
self.contentView.layoutIfNeeded()
}

Answer 2

You have to tell the table view controller that your cell height has changed.
Most common methods are protocol/delegate pattern or (swift preferred) closures.
For example...
In your cell class:
class MyTableViewCell: UITableViewCell {
// "callback" closure
var cellHeightChanged: (()->())?
// whatever happens that you need to change the cell height
func heightChanged() -> Void {
tagsHeight.constant = rootFlexContainer.frame.height
cellHeightChanged?()
}
}
Then, in your controller, in cellForRowAt:
cell.cellHeightChanged = {
tableView.performBatchUpdates(nil, completion: nil)
}