CODEWITHSUNDEEP
iosswiftuitableview
karthikeyan
karthikeyan

Reputation: 3898

Dynamic label with image in UITableViewCell?

We have two(first label dynamic height) labels and one in UITableview and our image size static assume that 120*70

We are setting image bottom constraint to cell superview but when Label content height is more than image height, second label going inside cell automatically.

We are using UITableViewAutomaticDimension

Here we confused to set constraint to labels, How to proportionally set heights to both labels and image.

If we try to bottom constraint to label and fixed height to and width to image, then white space coming at bottom of cell.

My cell design looks like below image:

Cell design Image

Check my output with below constraints

Output:

image

Constraint image:

Image

Upvotes: 1

Views: 1450

Answers (1)

DonMag
DonMag

Reputation: 77486

You can do this easily by setting a bottom constraints of greater-than-or-equal to both the bottom label and the image view.

First, make sure you are using:

    tableView.rowHeight = UITableViewAutomaticDimension
    tableView.estimatedRowHeight = 100

so the cells / rows will auto-size to fit the contents.

For the cell prototype, I have (background colors so we can see the frames):

  • Multi-Line label constrained Top 8 and Leading 8 (from the superview, not using margins)
  • Image View constrained Top 8 and Trailing 0 (from the superview, not using margins), and Width 119 Height 87 (based on your posted image)
  • 1-Line Label constrained Leading and Trailing to Multi-Line label, and Top 4 to Multi-Line label
  • Multi-Line label is also constrained Trailing 8 to the image view

Now the key is the next two constraints...

  • constrain Bottom of 1-Line Label at >= 8 to Bottom of superview
  • constrain Bottom of Image View also at >= 8 to Bottom of superview

enter image description here

Now, the cell height will auto-expand to fit the taller elements:

enter image description here

and, how it looks without the colored backgrounds:

enter image description here

The full project can be found here: https://github.com/DonMag/AnotherExpandingCell

Upvotes: 6

Related Questions