UIStackView and multi-line labels in a UITableViewCell

Question

I want to have a custom UITableViewCell with a number of vertically stacked UILabels all of which can contain text that wraps multiple lines. With the new UIStackView in iOS9 and the cell self-sizing mechanism I thought this would be straightforward, but I can't get it to work. I am using Xcode 7beta3.

Table view with labels not wrapping

I created a simple test app. This is the setup in IB:

IB setup with prototype cell

The UIStackView is vertical with UIStackViewDistribution.Fill and UIStackViewAlignment.Fill but I have basically tried all the combinations without success.

The UILabels have numberOfLines = 0 and lineBreakMode = .ByWordWrapping.

The code:

class Cell: UITableViewCell {

    @IBOutlet var label1: UILabel!
    @IBOutlet var label2: UILabel!
}

class MasterViewController: UITableViewController {

    struct Data {
        let label1: String
        let label2: String
    }

    var objects = [Data]()

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.estimatedRowHeight = 60

        createData()
    }

    private func createData() {

        for ii in 0 ..< 20 {

            let data = Data(label1: "\(ii): hello world this is a longer string that should wrap without going weird", label2: "label2 has lots of writing as well and so should wrap onto multiple lines")
            objects.append(data)
        }
    }

    // MARK: - Table View

    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

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

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! Cell
        let data = objects[indexPath.row]

        cell.label1?.text = data.label1
        cell.label2?.text = data.label2

        return cell
    }
}

I wonder if there is a bug in the beta, because sometimes one of the labels wraps while the other doesn't.

For example I tried nesting the UIStackView in another UIStackView as follows:

Nested UIStackView in IB

I made no code changes at all. Now one label wraps while the other does not:

One label wrapping only

Any help would be greatly appreciated!

score 2 · Accepted Answer · answered Jul 17 '15 at 12:31

2

The problem is at the time of cell initialisation the width of the cell will be 600 by default so it will calculate the height of the row based on 600 width. This is because cell is created in the storyboard with size classes.

i think it will be a bug in the beta version and as a solution of this take your cell in xib and then use . It will work fine.

answered Jul 17 '15 at 12:31

Mihawk

581
4
12

Yes, that fixed it. Thank you so much. I am still having trouble in my real project as opposed to this test project, but that must be something else and I am still investigating. – AndrewC Jul 18 '15 at 13:58
After a lot more investigation it seems the size of the `UITableViewCell` in the NIB is used to self-size. The cell is never made smaller than in the NIB, but is made bigger to allow for the wrapping of the labels. However, the wrapping is calculated based on the size in the NIB, not the size of the table view. So some cells appear too high, I assume to accommodate wrapping, even though the labels do not actually need to wrap in the table view. Any ideas? – AndrewC Jul 21 '15 at 08:49
"take your cell in xib and then use . It will work fine." -> I don't get what this means. – JCutting8 May 08 '22 at 20:21

UIStackView and multi-line labels in a UITableViewCell

1 Answers1

Linked