1

I am making filling a UITableView with custom cells of dynamic heights. I am using the methodology as described here.

For the purposes of simplicity, say my cell contains 2 UILabels as shown below. enter image description here

The purple UILabel will remain the same height for all cells in the UITableView. In this case, the purple UILabel is taller than the green UILabel. I would like the constraint between the bottom of the purple UILabel and the bottom of the contentView to be 8.

However, there is a second scenario that is possible as shown below. enter image description here

In this case, the purple UILabel is still the same size as the first case (even though it looks smaller, but since the overall cell height is larger, relatively, it looks smaller), however the green UILabel is much larger. In this case, I would like the constraint between the bottom of the green UILabel and the bottom of the contentView to be 8.

Now my dilemma is that I can set either one or the other (I am using storyboard). But I cannot think of a way to make both possible at the same time. My guess is that you would need to adjust constraints programmatically during runtime depending on the size of the green UILabel.

Any thoughts?

I am using XCode 6.1.1 in Swift.

Thank you.

Community
  • 1
  • 1
coldbuffet
  • 2,465
  • 5
  • 22
  • 24

1 Answers1

1

If the purple label is always the same height, then you should just set the height constraint of the element, rather than setting its bottom constraint to superview as 8.

For the green element, perhaps you could select both that element and the contentview and set them as having equal heights from the "add new constraint" pane at the bottom of the storyboard window. Then, select that constraint and edit its multiplier value in the attributes inspector to some value less than 1. That would make the element's height always be some percentage of the parent view's height. You could tweak that around until it gets you close to the desired 8px from the view below it.

ptsimpso
  • 230
  • 4
  • 10
  • Thanks for the comment and you make a good point, I should set the height constraint of the purple label. However, using your method for the green label, if the green label is very short (perhaps just one line), since the height of the contentView is constrained to the height of the green label, part of the purple label will be cut off. I guess what I am essentially looking for is this kind of logic: The contentView should be 8px below the green label EXCEPT when the green label is shorter than the purple label. In this case, the contentView should be 8px below the purple label. – coldbuffet Feb 03 '15 at 04:04
  • 1
    Try setting the contentView's bottom to greenView to be 8, but set that constraint's priority to 990 in the attributes inspector. Then add another constraint that sets the contentView's bottom to the purpleView also as 8, but then go into the attribute inspector and change it's relation from "Equal" to "Greater than or equal", leaving that priority as 1000. Now, if the contentView's height would ever become less than 8px below the purple view, it will break the priority 990 constraint. – ptsimpso Feb 03 '15 at 04:22
  • Thank you! That worked beautifully, I did not know constraint relations could be changed. I am very glad I did not have to programmatically manage constraints. Marked as the correct answer. – coldbuffet Feb 03 '15 at 04:31