Dynamic height for UITableViewCell not working correctly

Question

I'm having some height problems with my dynamic UITableViewCell (sew picture below). Some cells have the correct height and some not, and when I drag the tableView some of the cells become correct and some don't.

I'm using this code to get the cell's height to be dynamic and reloading it in viewDidAppear and viewDidLoad.

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = tableView.rowHeight

As mentioned the cells are sometimes correct and sometimes not. Is there another way to do it or am I doing something wrong? I have tried many different solutions, all mentioned here as well as other suggestions both here at StackOverflow and other sites.

I appreciate all help!

Edit!

TableView

extension ChatVC: UITableViewDelegate, UITableViewDataSource {
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return groupMessages.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "groupFeedCell", for: indexPath) as? GroupFeedCell else { return UITableViewCell() }

        let message = groupMessages[indexPath.row]

            DataService.instance.getUsername(forUID: message.senderId, handler: { (name) in
                cell.configureCell(name: name, content: message.content)
            })

        cell.layoutSubviews()
        cell.layoutIfNeeded()

        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

        return UITableViewAutomaticDimension
    }

    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        return 66
    }
}

Cell

@IBOutlet weak var nameLbl: UILabel!
@IBOutlet weak var contentLbl: UILabel!

func configureCell(name: String, content: String) {
    self.nameLbl.text = name //email
    self.contentLbl.text = content
}

I hope you are not providing random data when you're cell is dequeuing — Alizain Prasla, Dec 08 '17 at 14:52
have you implemented estimated height and height for row delegate? — Alizain Prasla, Dec 08 '17 at 14:55
**func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {** and **func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {** — Alizain Prasla, Dec 08 '17 at 14:56
Yes it is set to 66 both at the tableView and tableViewCell in interfacebuilder — Oscar, Dec 08 '17 at 14:58
implement this delegate func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return UITableViewAutomaticDimension } func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat { return UITableViewAutomaticDimension } — Alizain Prasla, Dec 08 '17 at 15:00
tableView.estimatedRowHeight = tableView.rowHeight change to tableView.estimatedRowHeight = [Your NIB or Prototype cell height] — Alizain Prasla, Dec 08 '17 at 15:04
See my answer here, it should help. https://stackoverflow.com/questions/42717173/uitableviewcell-auto-height-based-on-amount-of-uilabel-text/42717313#42717313. you need to make sure constraints cover all sides to contentView, especially nameLbl — Scriptable, Dec 08 '17 at 15:04
@Scriptable I look through your answer and I have done all the steps there. — Oscar, Dec 08 '17 at 15:16
All of the advice given so far should solve the issue. the issue is either within your code or constraints. please post your code for the cell and tableview — Scriptable, Dec 08 '17 at 15:26
estimatedHeightForRowAt should return an value for an estimated height, it allows the tableview to reserve some space. it should not return automatic — Scriptable, Dec 08 '17 at 15:53
Oh yes ofc. Changed that now. Have you seen the constraints? — Oscar, Dec 08 '17 at 15:54
yeah, checking them over now. I think i know what your issue is, but working out how to best explain — Scriptable, Dec 08 '17 at 15:55
provide controller code or tableview delegate and datasource code — Alizain Prasla, Dec 08 '17 at 15:59
you are getting the response in cellForRow. fetch your required data first then reload. — Alizain Prasla, Dec 08 '17 at 16:28

Shehata Gamal · Answer 1 · 2017-12-08T15:31:51.813

For dynamic tableViewCell

1- Setup this 2 lines with an inital value for the row height to help autolayout drawing it (take it from current cell height in the nib file)

tableView.rowHeight = UITableViewAutomaticDimension;
tableView.estimatedRowHeight = number;

2- don't implement this function heightForRowAtIndexPath . or implement it and return this

return UITableViewDynamicHeight;

3- make sure all constraints in the cell nib file or in storyboard are hooked correctly from top to bottom.

4- in cellForRowAtIndexPath before the line retrun cell insert that

[cell layoutSubviews];
[cell layoutIfneeded];

5- Test in simulator some versions like ios 8 it's a bug also in the viewController call

[tableView LayouSubviews];

in viewdidLayoutSubViews function to re relayout again correctly

6- Make lines property of any UILabel that you want to wrap = 0 and hook it's leading and trailing constarints to superView

score 1 · Answer 2 · answered Dec 08 '17 at 16:12

Your are facing this issue because the content of your label comes from an async function.

The cell uses its content to work out its height dynamically. When your async request returns it has already done its work and will not recalculate and resize.

You need to make these requests, cache/store the results and reload the cells as needed. Usually in chat there would only be a couple of users to load usernames for anyway. You could also try pre-loading this data before the chat is displayed.

You can quickly confirm this by creating an array of random usernames and messages (sample data) and adding that to the cell straight away.

score 0 · Answer 3 · answered Dec 10 '17 at 13:23

I guess the problem is asynchronous function. So Should you try

Step 1: Create names array

var names: [String?] = Array<String>.init(repeating: nil, count: groupMessages.count)

Step 2: Replace

 DataService.instance.getUsername(forUID: message.senderId, handler: { (name) in
                cell.configureCell(name: name, content: message.content)
            })

By

 if names[indexPath.row] == nil {
            DataService.instance.getUsername(forUID: message.senderId, handler: { (name) in
                names[indexPath.row] = name

                tableView.reloadRows(at: [indexPath], with: .automatic)
            })
        } else {
            cell.configureCell(name: name, content: message.content)

        }

Dynamic height for UITableViewCell not working correctly

3 Answers3