CODEWITHSUNDEEP
iosuitableviewuilabelautolayout
Ranjit
Ranjit

Reputation: 4646

Autolayout UILabel in UITableViewCell

I am working with autoLayout and new to it,

I have a UITableView Cell as below, UITableViewCell height is dynamic, so it has varying height based on the text.

enter image description here

enter image description here

I have two labels A and B, which can have variable length text, but the width is fixed, and my UITableViewCell has dynamic height, so how can I keep them at center right and maintain equal distance from top and bottom of the cell, as seen in the above two images.

Upvotes: 0

Views: 915

Answers (2)

iHulk
iHulk

Reputation: 4919

To put the both labels in centre, you must put them in one view and then set that view in centre. so lets start and create a view say a labelContainer. as shown below enter image description here

Set the constrains as shown in picture except the Fixed height, so final constrains will be as fixe trailing space to super view, fixed width and align vertical centre to super view.

Now create two label as you want inside the labelContainer view as shown below picture. enter image description here Now your label will have constrains as labelA- fixed width, fixed top and trailing space to container view and fixed bottom space to label B. and for labelB- fixed width, fixed bottom and trailing space to container view and fixed top space to label A

now your all constrains will look like as.

enter image description here

Hope this will work. But do not forget to set the label as sizeToFitContent and number of lines as 0

Upvotes: 1

Matic Oblak
Matic Oblak

Reputation: 16794

In your case what is best is to create another view on which the two labels are added as the subviews. The constraints are a bit hard to setup and mistakes are easy to be made so read carefully.

  1. Create a view which will hold both of the labels. Let us call it content. You set the constraints to superview to be at the right most position and center vertically. Next set the width of the content view which seems to be fixed in your case.
  2. Create the two labels and put them on the content view. Let us call them top (the top label) and bottom (the bottom label). Set their left and right constraints to their super view (content) and set the vertical offset between them to 0 (or whatever you want actually).
  3. Now the funny part: Set the top top constraint to content top and then double-click the constraint and reverse so that the first item is content and the second is top. Do the same for bottom except pin to bottom: Set the bottom constraint of bottom to superview and then reverse the objects on the constraint so that the content is first and then bottom.

This procedure can also be done for horizontal alignment. The key is to tell the superview to be pinned to their subviews rather then the subviews pinned to their superview. So basically what happens here is the superview size will depend on the labels size. After that you may simply pin the superview to the center and it works. Just be careful on the order of objects in constraints.

Upvotes: 0

Related Questions