CODEWITHSUNDEEP
iosswiftuitableviewautolayoutinterface-builder
Nicolas Miari
Nicolas Miari

Reputation: 16246

UITableViewCell Can Not Constrain Label to Right Edge

I have subclassed UITableViewCell (with a xib), and I have noticed that when I use autolayout/constraints, the labels that I place in Interface Builder do not show correctly at runtime.

First, I put three labels aligned left, center, and right with respect to the cell's content view.

When I run my app, The left-most label is on the left, the center label is on the right, and the right-most label is nowhere to be seen.

I logged the frame of the cell's content view at my -tableView:cellForRowAtIndexPath: (inside the UIViewController subclass that hosts the table view), and I get this value:

(0.0, 0.0, 600.0, 43.5)

The width is reported to be 600, but I assume this is the generic, 'any device' storyboard size (even though, weirdly, the cell comes from a separated xib with only the cell view, not a storyboard or the xib of a view controller), and it will be sized accordingly by the table view after being passed to it (AS a side note, notice the height being 43.5, not 44!).

I have tried several things, and found out the following:

  1. If I set constraints on my label against the leading (left), top and bottom edges of the cell, it displays appropriately.
  2. If I place the label at the right-most edge of the cell in Interface Builder, without any constraints, it shows where I placed it (but of course, on rotation to landscape, it will stay put a fixed distance from the left edge instead of sticking to the right edge).
  3. If I place the label anywhere, and add a constraint to the trailing (right) edge of the container, it is displayed or not depending on how much distance the constraint specifies. That is, the constraint seems to be stuck to the cell's original right edge of +600. If I place it near the left-most edge, but drag the constrain towards the trailing edge, it will appear somewhere on the right.

I tried logging the label's frame from within the cell's code, like this:

override func layoutSubviews()
{
    super.layoutSubviews()

    // (...label should be at the right position now?)

    println("Label frame: \(rightLabel.frame)") 
}

On Interface Builder, the label is 41 x 21 and is positioned at (271, 11). The log above is called twice for one row, and gives:

Label frame: (271.0, 11.0, 41.0, 21.0)
Label frame: (544.0, 11.0, 41.0, 21.0)

If, instead, I remove the trailing constraint and replace it by a leading constraint to the left edge of the content view, and leave the label on the same position in Interface Builder, the above logs give:

Label frame: (271.0, 11.0, 41.0, 21.0)
Label frame: (278.0, 11.0, 41.0, 21.0)

So, What is going on with trailing constraints on table view cells? How do I align a label to the right edge??

EDIT: I added the following line to the cell's layoutSubviews() method:

println("Own frame: \(self.frame)")

And I get this output:

Label frame: (271.0, 11.0, 41.0, 21.0)
Own frame: (0.0, 0.0, 600.0, 44.0)
Label frame: (544.0, 11.0, 41.0, 21.0)
Own frame: (0.0, 0.0, 600.0, 44.0)

So, the cell stays at 600 points wide, even after being put into the table view!

EDIT 2: So, I found the problem and obviously it was somewhere else: The table itself is stuck at 600 points wide, because I did not constrain it to the view controller's view edges in Interface Builder.

Silly me!

Once I pinned the table view's four edges to those of its parent view, the problem corrected itself.

First time using table views in Interface Builder...

Upvotes: 1

Views: 3088

Answers (2)

Dharmesh Kheni
Dharmesh Kheni

Reputation: 71854

First of all remove all constraint from that three label then follow this step and add constraint one by one as mentioned below.

  1. For Left Label select your label go to pin menu the add this 5 constraint for it.:

enter image description here

  1. For center label add this two constraint so it will always appear at center:

enter image description here

  1. For right label add this 5 constraint :

enter image description here

And the result will be for all screen:

enter image description here

HERE is the sample project.

Upvotes: 2

Kishore Suthar
Kishore Suthar

Reputation: 2983

Apply this constraint to your label

Constraint for left label 1. Leading to superview 2. Top to superview 3. Fix hight and width

Constraint for center label 1. horizontal to superview 2. Top to superview 3. Fix hight and width

Constraint for right label 1. Trailing to superview 2. Top to superview 3. Fix hight and width

Upvotes: 1

Related Questions