How to increase the size of particular UITableViewCell?

Question

Above is my UITableView. I want when pressing the right(Down arrow) button then my particular UITableViewCell looks like the below image.

But problem is that when I pressing the right(Down arrow) button I am getting a warning like below.

2020-09-18 12:00:15.107030+0530 ET WIFI[1789:44926] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x600002c21950 UIView:0x7fa558d3b040.height == 200 (active)>", "<NSLayoutConstraint:0x600002c21c20 V:[UIView:0x7fa558d3b040]-(5)-| (active, names: '|':UITableViewCellContentView:0x7fa558d386c0 )>", "<NSLayoutConstraint:0x600002c21c70 V:|-(5)-[UIView:0x7fa558d3b040] (active, names: '|':UITableViewCellContentView:0x7fa558d386c0 )>", "<NSLayoutConstraint:0x600002c22030 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x7fa558d386c0.height == 115 (active)>" )

Will attempt to recover by breaking constraint <NSLayoutConstraint:0x600002c21950 UIView:0x7fa558d3b040.height == 200 (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. Below is my UITableViewCell class.

class RoomTableViewCell: UITableViewCell {

@IBOutlet weak var roomIcon: UIImageView!
@IBOutlet weak var roomNameLabel: UILabel!
@IBOutlet weak var toggleButton: UIButton!

@IBOutlet var viewHeight: NSLayoutConstraint!

var viewController:HomeViewController?

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

func initializeViewController(myViewController:HomeViewController) {
    self.viewController = myViewController
}

@IBAction func toggleButtonPressed(_ sender: UIButton) {
    if toggleButton.image(for: .normal) == UIImage(named: "ArrowDownImage") {
        toggleButton.setImage(UIImage(named: "ArrowUpImage"), for: .normal)
        self.viewHeight.constant = 100
        self.viewController?.roomTableView.reloadData()
    } else {
        toggleButton.setImage(UIImage(named: "ArrowDownImage"), for: .normal)
        self.viewHeight.constant = 200
        self.viewController?.roomTableView.reloadData()
    }
}

}

Now it's working fine, but problem is that when I press the right button then I am getting above warning message in the console. Can you please help me to solve this?

Answer 1

Unfortunately there are a few possibilities.

1. You internally have constraint issues in your cell. I assume this is a storyboard and there is a constraint that is bound to viewHeight and set to 100. Try setting it to 200 and see if you get an error inside the storyboard. If you do, fix it here. If you don't then move on.

2. You do not use automatic row heights. Check that either in storyboard they are set to automatic or in your code. If in your code you implement height for row method or even set row height on table view then you must fix this in code (Changing it in storyboard is not enough).

3. The problem is in priorities. This is very common actually. At one of the steps your system may not resolve constraints so it starts complaining. It usually resolves them later but it is annoying to see these warnings. In cells it is usually fixable simply by lowering constraint priority in storyboard. For instance I am sure you can drop this viewHeight priority from 1000 to 900 without breaking any logic. I in most cases actually reduce the priority of constraint that is pinned to bottom of cell.

Not related directly to the question but please use weak on your view controller or you will have retain cycle and memory leak. Should simply be:

weak var viewController: HomeViewController? 

Also when resizing cells we usually do not call a reload on table view. It is enough to just invalidate it which is done by simply calling

self.viewHeight.constant = 200
self.viewController?.roomTableView?.beginUpdates()
self.viewController?.roomTableView?.endUpdates()

Answer 2

You need to increase the height of the tableView Cell as u increase the height of the view

struct TableData {
    var height: CGFloat?
    var color: UIColor?
}

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var tableView: UITableView!
    var tableData = [TableData]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0...10{
            self.tableData.append(TableData(height: 50, color: .red))
        }
        self.tableView.reloadData()
        // Do any additional setup after loading the view.
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return self.tableData[indexPath.row].height ?? 0
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.tableData.count
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if self.tableData[indexPath.row].height == 100 {
            self.tableData[indexPath.row].color = .red
            self.tableData[indexPath.row].height = 50
            self.tableView.reloadRows(at: [indexPath], with: .automatic)
        }
        else {
            self.tableData[indexPath.row].color = .red
            self.tableData[indexPath.row].height = 100
            self.tableView.reloadRows(at: [indexPath], with: .automatic)
        }
        
    }
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")
        cell!.backgroundColor = self.tableData[indexPath.row].color
        return cell!
    }

}

didselect part will come in ur button click part