-1

I have the following four Labels in a custom TableViewCell which currently look like this:

I have this:

enter image description hereenter image description here

The first, third and fourth labels have their width constraints fixed and maximum number of lines set to 1. The second Label fills the horizontal space between labels one and three.

I would like the second Label to wrap to a maximum of 2 lines and be vertically aligned to the top so that the first line of each label are aligned like this:

I want this:

enter image description here

I have made the background colour of each label grey so that the constraints can be seen.

Ryan R
  • 8,342
  • 15
  • 84
  • 111
  • Unless you want to dive deep and do lots of calculations, that have been discussed a lot on SO, use one of single line labels to "measure" the maximum height for the second label and let it limit the number of lines. The third label with upper case text looks good for that, a multiplier of ~2.2 should do the trick. Might also want to set all labels to multiline to have the same insets. – A-Live Nov 04 '15 at 21:01

2 Answers2

1

To top align the UILabels, you can either set the margin top constraint of all UILabels to be constant, or set the top align constraints. To set the top align constraints, select the label and ctrl-drag from the label to another. Select top alignment from the popup.

One thing to keep in mind is that for the second label, set the 4 margin lengths to be around 5pt, but do not constrain its width or height like the others.

Maximum of 2 lines can be configured in the right utilities panel after selecting the second label.

To dynamically change the height of the cell is a little trickier. First you should know if the text is long enough to stretch the label into 2 lines and the height of the label. (See Here) If the text is long enough to take two lines, the method will return a height value that is larger than it would normally. Based on this height change, use the following UITableViewDelegate to dynamically change the height of that UITableViewCell:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

Hope this helps.

Community
  • 1
  • 1
Si Te Feng
  • 135
  • 1
  • 14
1

You can achieve this using self sizing cells. To make that work add those two lines to your UITableview:

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 50

Then in Interface Builder set the following constraints in your Prototype Cell:

Uncheck "Constraint to margins" on all constraints.

Label 1:

  • top: 10
  • left: 10
  • bottom: greaterOrEqual 10
  • width: 60 (or whatever the actual width is)

Label 2:

  • top: 10
  • left: 10
  • bottom: 10

Label 3:

  • top: 10
  • left: 10
  • bottom: greaterOrEqual 10
  • width: 60 (or whatever the actual width is)

Label 4:

  • top: 10
  • left: 10
  • right: 10
  • bottom: greaterOrEqual 10
  • width: 60 (or whatever the actual width is)

If you set the constraints like this, the cell height automatically gets higher when the second label wraps its text into a second line.

enter image description here

enter image description here

joern
  • 27,354
  • 7
  • 90
  • 105