Reloading custom UITableViewCell after reordering cells

Question

I have UITableView which uses custom UITableViewCells. The cells can have one of three types of background images (set in each cell's .backgroundView.image property): top, middle, or bottom. The top and bottom images are for the first and last cells, and have rounded corners (much like a grouped UITableView's cells). All other "middle" cells within the UITableView have a rectangular middle background image.

My problem is that when reordering the cells in the UITableView's Edit mode the cells do not refresh with a different background image depending on their new location. For example, if I move the first cell into the middle of the table it still retains its original "top" background image (with rounded corners) and the new cell which appears at the top of the table view still has its original "middle" background image, which all looks a bit odd.

I can get around this by doing a reloadData on the table view, but this has the problem of not giving a nice graceful animation of the changes. I noticed that when reordering a standard grouped UITableView as soon as a cell is moved / dragged the background image on the relevant cells change (even before the moved cell has been dropped into its new location) which looks very nice. I would like to achieve the same thing.

To this end, I have implemented tableView:targetIndexPathForMoveFromRowAtIndexPath:toProposedIndexPath which is called every time a row is dragged around in the table view. Within this I have tried various methods of setting the backgroundView.image including just directly setting the image and then also explicitly telling it to redraw the cell and/or image using setNeedsLayout and setNeedsDisplay but nothing seems to make the cell redraw. I have NSLog'ged the results of these changes and they appear to be committing to the cell, as the correct values appear in the NSLog, but the cell just does not seem to be updating on screen.

If anyone could point out what I am doing wrong, or suggest a better way of achieving a working outcome, I would be very much appreciative. Thanks!

EDIT: the following code was pulled from the bounty and formatted so it can be more easily digested:

UIImage *rowBackground;
UIImage *selectionBackground;
NSInteger sectionRows = [_tableView numberOfRowsInSection:[indexPath section]];
NSInteger row = [indexPath row];
if (row == 0 && row == sectionRows - 1)
{
    rowBackground = [UIImage imageNamed:@"field_title_bkg.png"];
    selectionBackground = [UIImage imageNamed:@"field_title_bkg.png"];
}
else if (row == 0)
{
    rowBackground = [UIImage imageNamed:@"table_row_top_bkg.png"];
    selectionBackground = [UIImage imageNamed:@"table_row_top_bkg.png"];
}
else if (row == sectionRows - 1)
{
    rowBackground = [UIImage imageNamed:@"table_bottom_row_bkg.png"];
    selectionBackground = [UIImage imageNamed:@"table_bottom_row_bkg.png"];
}
else
{
    rowBackground = [UIImage imageNamed:@"table_row_bkg.png"];
    selectionBackground = [UIImage imageNamed:@"table_row_bkg.png"];
}
UIImageView *rowBackGroundImageView = [[UIImageView alloc] initWithImage:rowBackground];
UIImageView *rowBackGroundSelectionImageView = [[UIImageView alloc] initWithImage:selectionBackground];
if (row != sectionRows - 1)
{
    UIImageView *sep = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cell_separator.png"]];
    [sep setFrame:CGRectMake(20, 56, 280, 1)];
    [rowBackGroundImageView addSubview:sep];
}
[cell setBackgroundView:rowBackGroundImageView];
[rowBackGroundImageView release];

Answer 1

Write below code in your project and it should work as per expectations.

- (NSIndexPath *)tableView:(UITableView *)tableView
targetIndexPathForMoveFromRowAtIndexPath:(NSIndexPath *)sourceIndexPath
      toProposedIndexPath:(NSIndexPath *)proposedDestinationIndexPath
{
    NSInteger sectionRows = [tableView numberOfRowsInSection:[sourceIndexPath section]];

    UITableViewCell *sourceCell = [tableView cellForRowAtIndexPath:sourceIndexPath];
    UITableViewCell *destCell = [tableView cellForRowAtIndexPath:proposedDestinationIndexPath];

    if(sourceIndexPath.row == 0 && proposedDestinationIndexPath.row == 1)
    {
        ((UIImageView *)destCell.backgroundView).image = [UIImage imageNamed:@"table_row_top_bkg.png"];

        if(proposedDestinationIndexPath.row == sectionRows - 1)
            ((UIImageView *)sourceCell.backgroundView).image = [UIImage imageNamed:@"table_bottom_row_bkg.png"];
        else
            ((UIImageView *)sourceCell.backgroundView).image = [UIImage imageNamed:@"table_row_bkg.png"];
    }

    else if(sourceIndexPath.row == sectionRows - 1 && proposedDestinationIndexPath.row == sectionRows - 2)
    {
        ((UIImageView *)destCell.backgroundView).image = [UIImage imageNamed:@"table_bottom_row_bkg.png"];

        if(proposedDestinationIndexPath.row == 0)
            ((UIImageView *)sourceCell.backgroundView).image = [UIImage imageNamed:@"table_row_top_bkg.png"];
        else
            ((UIImageView *)sourceCell.backgroundView).image = [UIImage imageNamed:@"table_row_bkg.png"];
    }

    else if(proposedDestinationIndexPath.row == 0)
    {
        ((UIImageView *)sourceCell.backgroundView).image = [UIImage imageNamed:@"table_row_top_bkg.png"];

        destCell = [tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:proposedDestinationIndexPath.section]];
        if(sectionRows == 2)
            ((UIImageView *)destCell.backgroundView).image = [UIImage imageNamed:@"table_bottom_row_bkg.png"];
        else
            ((UIImageView *)destCell.backgroundView).image = [UIImage imageNamed:@"table_row_bkg.png"];
    }

    else if(proposedDestinationIndexPath.row == sectionRows - 1)
    {
        ((UIImageView *)sourceCell.backgroundView).image = [UIImage imageNamed:@"table_bottom_row_bkg.png"];

        destCell = [tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:sectionRows - 1 inSection:proposedDestinationIndexPath.section]];
        if(sectionRows == 2)
            ((UIImageView *)destCell.backgroundView).image = [UIImage imageNamed:@"table_row_top_bkg.png"];
        else
            ((UIImageView *)destCell.backgroundView).image = [UIImage imageNamed:@"table_row_bkg.png"];
    }

    return proposedDestinationIndexPath;
}

Answer 2

If you just want to reload a few cells rather the entire table you can use:

reloadRowsAtIndexPaths:withRowAnimation:

available as an instance method of UITableView.

Answer 3

Try this:

[tableView beginUpdates];
[tableView endUpdates];