CODEWITHSUNDEEP
iosxcodeuitableview
code-8
code-8

Reputation: 58672

Display a responsive image and label in a table for iOS

I'm new to iOS I'm not 100% sure how constraints works yet.

I have a table with 3 profiles.

enter image description here

As you can see Andrew show as an...

This is my current constraint settings

enter image description here

How do I display the name in full ?

Upvotes: 0

Views: 185

Answers (2)

MadProgrammer
MadProgrammer

Reputation: 347244

The UILabel has the capabilities to calculate it's own height and width, so you don't tend to want to constrain it, instead, you can define the bounds of its sizable area, so it doesn't expand beyond the bounds of the viewable area (optionally)

Layout

When laying out UITableViewCells with auto layout, you intention is to provide constraints that reach from the top of the cell to the bottom. This provides the auto layout with the ability to dynamically size the cell based on it's content.

In this example, I've constrained the UIImageView to the top and bottom margins (with a constant of 0), but, I've also constrained the width of the UIImageView to 50 and added an aspect ratio of 1:1. This has the effect of making the cell 66 points high, as the auto layout won't try and resize the image, but instead, will resize the cell to match.

The image view's leading edge is also constraint to the leading margin

The label has is vertically centred to the image view and has a horizontal spacing constraint of 8. Optionally, you can also constrain the trailing edge of the label to the trailing margin. If you also set the UILabel's lines properties to 0, this will provide a level of automatic line wrapping.

This basically defines the x/y position of both the UIImageView and UILabel and in the case of the UIImageView it's width and height as well, allowing auto layout the ability to calculate the size of the cell (at least in this case, the desired height - assuming you've set the UITableView up to use estimatedRowHeights)

You might find Self-sizing Table View Cells and interesting read

*nb: This is just one way to accomplish the result and assumes the label will never be higher then the UIImageView

Upvotes: 1

Shehata Gamal
Shehata Gamal

Reputation: 100523

To display it in full remove any width constraint you gave to it , as it's content is by default intrinsic , to make it wrap if it's width will exceed screen width

img - 10 - lbl - 10   // set .lines =  0 && remove height constraint

Upvotes: 1

Related Questions