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];