CODEWITHSUNDEEP
iosswiftautolayoutuilabel
Seto
Seto

Reputation: 1686

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

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.

enter image description here

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.

enter image description here

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.

enter image description here

Can anybody help?

Upvotes: 0

Views: 1152

Answers (3)

dahiya_boy
dahiya_boy

Reputation: 9503

1. UIViewController Hierarchy

enter image description here

2. Constraints

  1. View Main Content BG

    • top, bottom, leading, trailing = 0 wrt superview.

  2. lbl1

    • top = 10 , trailling = 10 wrt superview

  3. dot1

    • leading = 10 top = lbl1.top , horizontal space wrt to lbl1 = 10, and height = 10 width = 10

  4. lbl2

    • Verticle space wrt lbl1 = 10 , leading & trailling = lbl1.leading & lbl1.leading

  5. dot2

    • leading = dot1.leading , top = lbl2.top , height = 10 width = 10

  6. lbl3

    • Verticle space wrt lbl2 = 10 , leading & trailling = lbl2.leading & lbl2.leading and bottom = 10 wrt superview

  7. 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

enter image description here

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

enter image description here

Edit

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

enter image description here

Upvotes: 2

M.Shahzad Qamar
M.Shahzad Qamar

Reputation: 114

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.

Add dot in start of lable

You can change color and fond using Attributed option. Text Attributed

Upvotes: 0

Hemant Sabale
Hemant Sabale

Reputation: 327

  1. Set number of lines 0 to UILable and remove its height Constraint. So it will grow accordingly content in it.

  2. Give proper leading, top, trailing , bottom constraints to UILable. Set UITableViewRow height property to UITableViewAutomaticDimesion tableview.rowHeight = UITableViewAutomaticDimesion tableView.estimatedRowHeight = 44

  3. 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.

Upvotes: 0

Related Questions