TableViewCells with two labels with auto layout, not showing all the lines when within a UIViewController

Question

I have a UITableViewCell with two UILabels, Using Storyboard and Autolayout. The problem is that the second label is displaying only two lines of text, even if there are more lines to show.

Edit: The issue happens when the controller is a UIViewController rather than a TableViewController, it works as expected within a TableViewController

I have set the numberoflines property to 0 In autolayout, I have pinned both the labels from all four sides.

But it didn’t help and only one line was displayed.

When I used heightForRowAtIndexPath along with systemLayoutSizeFittingSize to get the height of the row, thing improved marginally and two lines were displayed.

I tested on both 8.2 and 8.4

I have gone tried the solutions outlined in this stack overflow Multiple UILabels inside a self sizing UITableViewCell

I have tried the steps outline in this tutorial: http://www.raywenderlich.com/73602/dynamic-table-view-cell-height-auto-layout

The code is here:https://www.dropbox.com/sh/jp8ki0uxvfuf6ng/AABZlzzLnw9dMoamNbNkI_6Ba?dl=0

Answer 1

I was able to get this done like this:

Create leading, top and trailing constraints for your top label Create leading, bottom and trailing constraints for your bottom label

Create a vertical constraint between the two labels

Make sure your trailing constraint is set to use most of the width of the cell

Set the number of lines for the UILabel to 0

In your code:

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

var textData = ["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod nisl neque, et eleifend felis dictum in. Nullam semper diam nec leo malesuada, non ultrices eros bibendum. Phasellus laoreet eros quis enim condimentum, nec pharetra augue ultrices. Nunc quis convallis magna. Fusce fringilla diam nunc, in consequat urna accumsan nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras in diam nec dolor tristique efficitur sed eu est.", "Maecenas ipsum nunc, ultricies non faucibus vitae, eleifend sit amet felis. Donec non dignissim sapien. Etiam vitae dapibus dolor. Duis nec diam sed augue aliquam vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vulputate gravida tellus. Sed porttitor lacus ac venenatis fringilla. Pellentesque in sapien felis. Vestibulum pharetra fermentum arcu in sollicitudin. Phasellus convallis sit amet felis in rhoncus. Fusce consectetur tempus varius. Aliquam a fermentum dui. Curabitur vestibulum varius purus. Duis feugiat ligula a ligula imperdiet porta.","Quisque sagittis elementum odio vitae convallis. Nam dignissim pellentesque leo quis feugiat. Suspendisse a nisi et metus posuere dignissim sollicitudin nec lorem. Cras nec porta urna, sit amet bibendum dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas enim dui, pellentesque in pulvinar non, faucibus sodales nibh. Mauris non condimentum ipsum.","Sed volutpat lectus id nibh scelerisque, ac mollis lectus cursus. Integer orci neque, euismod et dolor quis, condimentum pulvinar arcu. Etiam finibus nibh at dapibus fringilla. Proin viverra lobortis tempor. Vivamus luctus sem sed purus elementum, et tempor erat mollis. Duis cursus massa in mi imperdiet, condimentum semper est fringilla. Mauris a elit hendrerit, finibus felis sit amet, placerat nulla. Integer convallis massa vitae magna fermentum, id auctor neque varius. Aliquam vestibulum a lacus eu efficitur. Donec condimentum nunc eu ante vehicula aliquet. Vestibulum congue magna ut ultricies tempus. Phasellus porttitor at nisi sed tincidunt.","Curabitur lobortis non augue quis lacinia. In fermentum porta eleifend. Pellentesque eu ligula sit amet neque mollis varius vitae lacinia purus. Phasellus ut gravida elit. Maecenas id sem luctus, iaculis massa eget, condimentum mi. Vestibulum venenatis iaculis dignissim. Curabitur erat dui, eleifend ac turpis sit amet, viverra imperdiet metus. Integer eleifend a velit id bibendum."]

@IBOutlet weak var tableView: UITableView!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    tableView.estimatedRowHeight = 60 // The # from storyboard in the size inspector
    tableView.rowHeight = UITableViewAutomaticDimension
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

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

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

    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! CTableViewCell

    cell.topLabel.text = ""
    cell.bottomLabel.text = ""

    cell.topLabel.text = "Cell Title"
    cell.bottomLabel.text = textData[indexPath.row]

    cell.bottomLabel.sizeToFit()

    return cell

}

}

And you'll get this:

Answer 2

You actually have 2 unknown heights: the height of the UILabel and the height of the UITableViewCell.

I guess the problem is: the height of the UITableViewCell depends on the height of the UILabel, but the height of the UILabel also depends on the height of the UITableViewCell...

In your code, you are trying to configure the cell (in heightForRowAtIndexPath) and calculate the cell height. BUT your UILabel height is still not the height you wanted.

I will calculate the height of the UILabel alone (in heightForRowAtIndexPath) to eliminate one unknown and determine the desired height for the UITableViewCell (height of first UILabel + spaces + height of second UILabel). Once that is done, the height of the second UILabel will be auto-adjusted in cellForRowAtIndexPath since the cell height is already known.

Hope this helps.

See bold text for the edit.