UITableViewCell Autolayout issues (iOS 11, Xcode 9.2)

0
votes

I am trying to configure a UITableViewCell loaded from a nib file. The cell has two elements - UIImageView on the left and a UILabel on the right.

Custom UITableViewCell

UIImageView has the following constraints:

Height: 100 pt, Width: 100 pt, Leading space to superview = 10pt, Top space to superview = 10 pt and Bottom space to superview = 10 pt (If I don't set this Bottom space constraint then the cells don't display the images properly and they are all mangled)

UILabel has the following constraints:

Leading space from UIImageView = 10pt, Top space to superview = 10pt, Trailing space to superview = 10pt and Bottom space to superview = 10pt

UILabel has the number of lines set to 0, estimated row height for the table is set to 200 pt and the row height is set to UITableViewAutomaticDimension.

I want the UILabel to fit all the lines (and hence its number of lines is set to 0) and the cell to expand dynamically with the label height

However the cell is only expanding to a maximum height of 100 px (Height of UIImageView) and the label contents are truncated.

What am I doing wrong here?

1
iosxcodeuitableviewuiimageviewios-autolayout
Have you tried setting the bottom constraint of the image view to equal or greater than ten? – Douglas
Thanks @Douglas! I set the Bottom Space constraint to >=10 and this let the cell height to grow with label contents. To spruce up the cell I also removed the Top Space constraint for UIImageView and added a Vertical Centering constraint. – cubsnlinux
glad that worked. I learned that trick from a tutorial on Ray Wenderlich’s website. Great place to learn. – Douglas

1 Answers

0
votes

That height makes sense, because you've set the ImageView to a static height and then bound its top and bottom to the content view. This stops the cell from growing any taller.

You'll need to allow the image height to grow or remove the top or bottom constraint so the cell's height isn't limited by the image view.

Try these constraints:

  • Image View Height/Width
  • Image View Leading = Cell Leading
  • Image View Top = Cell Top
    • Or center vertically or whatever you'd like.
    • Basically, just set the Y position for the image view somehow
  • Label Leading = Image View Trailing
  • Label Top = Cell Top
  • Label Bottom = Cell Bottom
  • Label Trailing = Cell Trailing
  • Label Height >= Image View Height
    • To stop the label (and therefore, the cell) from collapsing smaller than the image view