UITableViewCell content overlaps delete button when in editing mode in iOS7

Question

I am creating a UITableView with custom UITableViewCells. iOS 7's new delete button is causing some problems with the layout of my cell.

If I use the "Edit" button, which makes the red circles appear I get the problem, but if I swipe a single cell it looks perfect.

This is when the Edit button is used:

[self.tableView setEditing:!self.tableView.editing animated:YES];

This is when I swipe a single cell:

As you can se my labels overlaps the delete button in the first example. Why does it do this and how can I fix it?

Answer 1

try using the accessoryView and editingAccessoryView properties of your UITableViewCell, instead of adding the view yourself.

If you want the same indicator displayed in both editing and none-editing mode, try setting both view properties to point at the same view in your uiTableViewCell like:

self.accessoryView = self.imgPushEnabled;
self.editingAccessoryView = self.imgPushEnabled;

There seems to be a glitch in the table editing animation in IOS7, giving an overlap of the delete button and the accessoryView when switching back to non-editing state. This seems to happen when the accesoryView is specified and the editingAccessoryView is nil.

A workaround for this glitch, seems to be specifying an invisible editingAccessoryView like:

self.editingAccessoryView =[[UIView alloc] init];
self.editingAccessoryView.backgroundColor = [UIColor clearColor];

Answer 2

The problem is that in edit mode the cell's contentView changes in size. So either you have to override layoutSubviews in your cell and support the different frame sizes

- (void) layoutSubviews
{
    [super layoutSubviews];
    CGRect contentFrame = self.contentView.frame;
    // adjust to the contentView frame
    ...
}

or you take the bait and switch to autolayout.

First I thought setting contentView.clipsToBounds to YES could be an ugly workaround but that does not seem to work.