UITableViewCellAccessoryCheckmark and AutoLayout constraints

20
votes

I have custom UITableViewCell and manage selection of my cells. When the cell is selected and the checkmark is presented, the cell Content View width shrinks and my labels with trailing constraints move to the left. How can I effectively avoid the content move?

I did not want to set the constraints to leading as I have flexible tableview width and they are right aligned. When I want to update label's constraints in code via its IBOutlets I went into trouble as I return multiple subclasses of UITableViewCell in cellForRow: and I got unrecognized selector error in didSelectRowAtIndexPath: when trying to set constraints in code. Any elegant solution? Thanks.

enter image description here

enter image description here

3
iosobjective-cuitableviewautolayout

3 Answers

29
votes

I had a similar (actually, the exact) problem, where the checkmark would push everything to the left.

- EDIT:

A few hours after my original answer, I realized it's a really simple issue.

This push to the left is a constraint pushing the contentView of the cell. So?

Connect the constraint from the item on the right (like the i button), to the cell itself, not its contentView.

Constraint to cell view

- Original answer (the actual answer is on top, this is for the record):

I just realized there's a very simple solution. I had a button that was pushed left when checkmark was on and I had to keep a constraint to keep it in place (so that 'uncheck' won't move the button to the right). It was hard-coded 'width' from the right and overall just bad practice. Never mind that I could not 'get' that checkmark 'width' to do this dynamically.

Solution?

Hold a constraint from the left.

That's it. I have a label too, so in my case: Constraint from the button left to the label (so they won't overlap) and from the button-left to left content-view. Basically, whatever moves on the right does not really 'reaches' the left side (rather have everything 'sitting' on the right).

Cell with constraints to left

11
votes

This behavior is by design.

The simplest way to get the behavior you want is to set an empty accessory view on every cell which will move all the content to the left the same distance as the checkmark.

2
votes

How about putting the checkmark in there all the time, and just playing with the alpha / transparency?

    if checked
    {
        cell.accessoryType = .checkmark
        cell.tintColor = cell.tintColor.withAlphaComponent(1)
    }
    else
    {
        cell.accessoryType = .checkmark
        cell.tintColor = cell.tintColor.withAlphaComponent(0)
    }