UILabel inside UITableViewCell `sizeToFit` not working inside cell with AutoLayout

Question

I've been trying to resolve this issue for almost a day. So the dot should align with the UILabel next to it. The thing is, the second label will sometimes become 2 lines when fill with the right content. The dot has to be align with the first line of the UILabel, whether it has 1 or two lines.

I tried to call sizeToFit() at runtime when the cell is updated. Seems no effect. I read Vertically align text to top within a UILabel thread.

I simulate if sizeToFit() (Editor -> Size to fit content) get called successfully, the height of the row will not shrink.

Each row consist of UIView, inside this view there are the dot and the UILabel. The dot is UIView as well. The row with single line UILabel has height constant 20. The one with possibly 2 lines UILabel I set to <= 26.

The dot has to be align with the first line of the UILabel, whether it has 1 or two lines. This works well on smaller screen.

Can anybody help?

@dahiya_boy it has to be align with the first line of the UILabel, whether it has 1 or two lines — Seto, Dec 21 '17 at 07:37
@mayursinhzala that's my current method. I set to 4. It works for two lines. — Seto, Dec 21 '17 at 07:54
@SetoElkahfi Check my answer, still some issue or further requiremnt then ask. — dahiya_boy, Dec 21 '17 at 08:06

dahiya_boy · Accepted Answer · 2017-12-21T08:12:07.853

1. UIViewController Hierarchy

2. Constraints

View Main Content BG
- top, bottom, leading, trailing = 0 wrt superview.
lbl1
- top = 10 , trailling = 10 wrt superview
dot1
- leading = 10 top = lbl1.top , horizontal space wrt to lbl1 = 10, and height = 10 width = 10
lbl2
- Verticle space wrt lbl1 = 10 , leading & trailling = lbl1.leading & lbl1.leading
dot2
- leading = dot1.leading , top = lbl2.top , height = 10 width = 10
lbl3
- Verticle space wrt lbl2 = 10 , leading & trailling = lbl2.leading & lbl2.leading and bottom = 10 wrt superview
dot1
- leading = dot2.leading , top = lbl3.top , height = 10 width = 10

Dont forget to keep no of lines = 0 of every label. and bind the tableview delegate & datasource wrt VC.

3. Now your storyboard design looks like this

4. Now In VC

Dummy array

var arrList : [[String : String]] = [["lbl1": "Do any additional setup after loading the view, typically from a nib.",
                                          "lbl2": "Do any additional.",
                                          "lbl3": "that can be recreated"],
                                         ["lbl1": "Do any additional .",
                                          "lbl2": "Do any additional setup after loading the view, typically from a nib.",
                                          "lbl3": "that can be recreated"],
                                         ["lbl1": "Do any additional . Do any additional setup after loading the view, typically from a nib.",
                                          "lbl2": "Do any additional setup after loading the view, typically from a nib.",
                                          "lbl3": "that can be recreated Do any additional setup after loading the view, typically from a nib. Do any additional setup after loading the view, typically from a nib."]]

TableView delegates & datasource

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

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

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


public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{
    let cell = tableView.dequeueReusableCell(withIdentifier: "TblCell") as! TblCell

    let dict = arrList[indexPath.row]

    cell.lbl1.text = dict["lbl1"]
    cell.lbl2.text = dict["lbl2"]
    cell.lbl3.text = dict["lbl3"]

    return cell
}

5. Final Output

Edit

If you do set top of dots with constant = 5 wr with their respec labels then output is below.

I accept your answer. I was too focused on the current views component and afraid to refactor. Note to myself. Thanks. +1 — Seto, Dec 22 '17 at 02:08

score 0 · Answer 2 · answered Dec 21 '17 at 07:52

Set number of lines 0 to UILable and remove its height Constraint. So it will grow accordingly content in it.
Give proper leading, top, trailing , bottom constraints to UILable. Set UITableViewRow height property to UITableViewAutomaticDimesion tableview.rowHeight = UITableViewAutomaticDimesion tableView.estimatedRowHeight = 44
Set constant width and height constraint to dot view and set its leading constraint to cell view and horizontal spacing to label. And align it to the top of UILabel.

Using above way there is no any need to set property like sizeToFit etc. It will solve ur problem.

You was facing issue as you setting height constraint to UILable. If you remove it from your current code , it will solve your problem.

I didn't set height constrain for UILabel. It's its parent view. — Seto, Dec 21 '17 at 07:57

M.Shahzad Qamar · Answer 3 · 2017-12-21T08:11:42.960

0

For the time being if you did not find any solution you can try to copy that char ■ and past it in start of your label string .That temporary solution work for your.

You can change color and fond using Attributed option.

edited Dec 21 '17 at 08:11

answered Dec 21 '17 at 07:54

M.Shahzad Qamar

114
10

It will work, but the dots will not in the same column if one of the UILabel has two lines. Thanks. – Seto Dec 21 '17 at 07:55
You can use NSMutableAttributedString for change color and font size of first char. – M.Shahzad Qamar Dec 21 '17 at 08:03

UILabel inside UITableViewCell `sizeToFit` not working inside cell with AutoLayout

3 Answers3

Linked