how prevent cell width from expanding when done editing in UITableView

Question

If you notice in the iPad contacts app when you tap on the "+" edit icon to add a new address, the cell does not expand to the left when the icon disappears (see 1st screen capture below). I am trying to do something similar but am having no luck (see 2nd screen capture below). I tried using the solution suggested here but didn't work.

For the record I am not trying to replicate the actual contacts app or integrate with contacts. We're working on something unrelated and my designer just wants to follow this pattern so doing some POC work to see what I can do.

EDIT - Another question, to verify my thinking, is that in the contacts app here what's happening is when the "+" icon is tapped, this cell is set to not editing any more, these text fields are added to the cell, the label changed, and then reloadData is called, right?

EDIT - Thanks for the suggestion Tim, I'm almost there! I had actually worked out 1/2 of it but then was running into the issue that the "+" icon was not animating out, just abruptly disappearing. So I added the reloadRows... call to commitEditingStyle but now the entire cell disappears. Here is my code:

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    UITableViewCellEditingStyle editingStyle = UITableViewCellEditingStyleNone;
    if (self.showEditingIcon) {
        editingStyle = UITableViewCellEditingStyleInsert;
        self.showEditingIcon = NO;
    }
    return editingStyle;
}

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    //    tableView.editing = NO;
    //    tableView.editing = YES;
    [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
}

You can see from my commented-out lines what I had originally, which was working but as I said, was not animating - the "+" button was just abruptly disappearing. If I tried to call [tableView setEditing:NO animated:YES] it would not work. When I tried to put these calls within a UIView animation block it did not look good - could see cell temporarily shift to left and back. However now with the reload call the cell disappears completely. At the moment I'm not making any changes to my cell (for example I'm not adding text fields, etc...) because I just want to make the "+" button animating out without making the cell expand the left work on the first iteration.

Any help greatly appreciated. Thanks.

enter image description here

Timothy Moose · Accepted Answer · 2013-08-26T15:04:51.167

2

The trick is to always be in editing mode such that the cell indention remains constant. When the cell is loaded, you decide what state it is in and return the appropriate editing style, either the "insert" style or "none":

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
    BOOL shouldShowInsertButton = ...;//check internal state for cell
    return shouldShowInsertButton ? UITableViewCellEditingStyleInsert : UITableViewCellEditingStyleNone;
}

Then when the edit button is tapped, you update your internal state and reload the cell:

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    ...;//update internal state for cell
    [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
}

EDIT

Here's a working sample project.

edited Aug 26 '13 at 15:04

answered Aug 26 '13 at 14:51

Timothy Moose

9,895
3
33
44

This is fantastic - I'm almost there, but I'm running into something strange. When I use the code below now my entire cell just disappears. Oops, going to edit and include what I'm talking about in my original post. – fogwolf Aug 26 '13 at 15:04
Great thank you so much! Checking it out now. In the meantime added an edit to my original posting. – fogwolf Aug 26 '13 at 15:11
Should add I am using static cells with a storyboard so am not implementing cellForRowAtIndexPath. Is that what's causing the problem? For what I want to do with changing the contents of the cell (adding text fields, making it bigger, etc.. as in the Contacts app) I'm guessing I'm going to have to change my approach? – fogwolf Aug 26 '13 at 15:14
I did reproduce your disappearing cell problem with a static table. I never use static tables, so I'm not an expert. But I did play around with it a bit and came to the conclusion that reloading rows isn't supported. So I think you need to switch over to dynamic cells. – Timothy Moose Aug 26 '13 at 15:33
Yeah, with some Googling I'm coming to the same conclusion. Thanks so much for all the work on helping me with this! By the way, do you think as far as how the cell changes in the contacts app that's what they're doing - changing the contents and heightForRowAtIndexPath when committing the editing? – fogwolf Aug 26 '13 at 15:38
You're welcome. Yes, I think that's exactly what they're doing. But possibly switching between different custom cell prototypes since the layout is different. At least, that's how I'd likely do it. – Timothy Moose Aug 26 '13 at 16:11

how prevent cell width from expanding when done editing in UITableView

1 Answers1