iOS 7 UITableView default separator gets weird after reordering

Question

I have a problem with the default separator on UITableView in iOS 7.

When used as default the first and last separators have no insets, others are a bit inset. The original situation can be seen below:

Everything is ok. The first and last separators spread through the entire width of the table while the others are a bit smaller. Now I have the table view set to editing and I allow the user to reorder cells. And when the user does so the separators get messed up and do not appear correctly. The situation can be seen on the images below:

Do I really need to reload the data in order to fix this issue or is it an iOS 7 bug or am I doing something wrong?

How to fix this?

EDIT
Added some info about my implementation. I return NO on - (BOOL)tableView:(UITableView *)tableView shouldIndentWhileEditingRowAtIndexPath:(NSIndexPath *)indexPath and UITableViewCellEditingStyleNone on - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath. My - (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath is:

- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

    if (!cell)
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];

    cell.shouldIndentWhileEditing = NO;
    cell.textLabel.font = [UIFont someFont];

    UIColor *color = [UIColor randomColor];
    cell.textLabel.text = @"Some text";

    CGRect rect = CGRectMake(0, 0, 15, 15);

    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    [color set];
    CGContextFillEllipseInRect(ctx, rect);

    cell.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return cell;
}

and

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
{
    if (sourceIndexPath.row == destinationIndexPath.row) return;

    NSString *tmp = [itemOrder objectAtIndex:sourceIndexPath.row];
    [itemOrder removeObjectAtIndex:sourceIndexPath.row];
    [itemOrder insertObject:tmp atIndex:destinationIndexPath.row];
    didReorder = YES;
}

Answer 1

This seems to be a problem in the iOS SDK. One way to solve it would be to manually apply the correct separator insets to all cells. However, I personally prefer to let the system do that.

If you reload a cell after reordering, the correct separator insets will be applied by the system. Therefore, you should simply make sure to reload the relevant cells after reordering.

Fix for user reorderings

There's a private method tableView:didEndReorderingRowAtIndexPath: that's called on your table view's delegate after the reordering (animation) has ended. In this method you should reload the cells:

- (void)tableView:(UITableView *)tableView didEndReorderingRowAtIndexPath:(NSIndexPath *)indexPath
{
    [self.tableView reloadSections:[NSIndexSet indexSetWithIndex:indexPath.section]
                  withRowAnimation:UITableViewRowAnimationNone];
}

This fix only works if rows are only moved within a section (and not between sections).

(It would be more efficient to only reload the moved cell and the cell at the old location using the method reloadRowsAtIndexPaths:withRowAnimation:. However, you'd have to store the old location before the cell is moved. which would be more complex to implement. For small sections/simple cells reloading the whole section might be a little bit easier.)

Fix for programmatic moves

Unfortunately, the private delegate method used in the previous fix is only called after reorderings by the user, and not after programmatically moving a row (using moveRowAtIndexPath:toIndexPath:). Therefore, we'll have to use another fix for that.

Since table views internally use CALayer animations, we can use a CATransaction to get to know when the animation has ended. (You do need to add QuartzCore.framework to your project for this.) My fix looks like this:

UITableView+NicelyMoves.h

#import <UIKit/UIKit.h>

@interface UITableView (NicelyMoves)

- (void)nicelyMoveRowAtIndexPath:(NSIndexPath *)indexPath
                     toIndexPath:(NSIndexPath *)newIndexPath;

@end

UITableView+NicelyMoves.m

#import <QuartzCore/QuartzCore.h>
#import "UITableView+NicelyMoves.h"

@implementation UITableView (NicelyMoves)

- (void)nicelyMoveRowAtIndexPath:(NSIndexPath *)indexPath
                     toIndexPath:(NSIndexPath *)newIndexPath
{
    [CATransaction begin];

    [CATransaction setCompletionBlock:^{
        // This is executed after the animations have finished
        [self reloadRowsAtIndexPaths:@[indexPath, newIndexPath]
                    withRowAnimation:UITableViewRowAnimationNone];
    }];

    [self moveRowAtIndexPath:indexPath toIndexPath:newIndexPath];

    [CATransaction commit];
}

@end

Usage

Now, instead of using moveRowAtIndexPath:toIndexPath:, you should use the custom method nicelyMoveRowAtIndexPath:toIndexPath:. For example, you could do this:

#import "UITableView+NicelyMoves.h"

@implementation YourTableViewController

- (void)moveTheRow
{
    // Move row 0 to 2 in section 0
    NSIndexPath *from = [NSIndexPath indexPathForRow:0 inSection:0];
    NSIndexPath *to = [NSIndexPath indexPathForRow:2 inSection:0];
    [self.tableView nicelyMoveRowAtIndexPath:from toIndexPath:to];
}

@end

Answer 2

Please try forcing inset size or setting them to zero in the viewDidLoad to ensure tableView respects them.

This is going to set your tableView separator insets to 30.

- (void)viewDidLoad {
    [super viewDidLoad];
    if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {
        [self.tableView setSeparatorInset:UIEdgeInsetsMake(0, 30, 0, 0)];
    }
}

You can also set separator insets only on specific cells as:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MyCellId"];

    if (indexPath.section == 0 && indexPath.row == 0) {
       [cell setSeparatorInset:UIEdgeInsetsMake(0, 30, 0, 0)];
    } else {
       [cell setSeparatorInset:UIEdgeInsetsZero];
    }
    return cell;
}