Add cell to bottom of UITableView in iOS

Question

I am using xcode 4.2 with storyboard to create an iphone app.

When I press the edit button in the top right corner I would like to have the options to delete the existing rows and see the extra cell (with the green '+' icon) at the top which would allow me to add a new cell.

I have an array which is being populated in the viewDidLoad method using CoreData

I have enabled the settings button

self.navigationItem.rightBarButtonItem = self.editButtonItem;

And implemented the method

- (void)tableView:(UITableView *)tableView commitEditingStyle:   
          (UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:
                   (NSIndexPath *)indexPath
{
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        // removing a cell from my array and db here... 
    }   
    else if (editingStyle == UITableViewCellEditingStyleInsert) {
        // adding a cell to my array and db here...
    }   
}

I realise I need to add the cell at some point which I can then edit but it isn't clear to me where and I am unable to find a explanation on the internet.

Solution 1

Ok, the basic idea is that when the edit button is clicked we'll show the delete controls next to each row and add a new row with the add control so that users can click it in order to add an entry right? First, since you have the edit button setup already let's instruct our table that in editing mode we should show an extra row. We do that in our tableView:numberOfRowsInSection:

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.editing ? a_recs.count + 1 : a_recs.count;
}

a_recs here is the array I've setup to store our records so you'll have to switch that out with your own array. Next up we tell our tableView:cellForRowAtIndexPath: what to do with the extra row:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *CellIdentifier = @"Cell";
    BOOL b_addCell = (indexPath.row == a_recs.count);
    if (b_addCell) // set identifier for add row
        CellIdentifier = @"AddCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        if (!b_addCell) {
            cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        }
    }

    if (b_addCell)
        cell.textLabel.text = @"Add ...";
    else
        cell.textLabel.text = [a_recs objectAtIndex:indexPath.row];

    return cell;
}

We also want to instruct our table that for that add row we want the add icon:

-(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row == a_recs.count) 
        return UITableViewCellEditingStyleInsert;
    else
        return UITableViewCellEditingStyleDelete;
}

Butter. Now the super secret kung fu sauce that holds it all together with chopsticks:

-(void)setEditing:(BOOL)editing animated:(BOOL)animated {
    [super setEditing:editing animated:animated];
    [self.tableView setEditing:editing animated:animated];
    if(editing) {
        [self.tableView beginUpdates];
        [self.tableView insertRowsAtIndexPaths:[NSArray arrayWithObject:[NSIndexPath indexPathForRow:a_recs.count inSection:0]] withRowAnimation:UITableViewRowAnimationLeft];
        [self.tableView endUpdates];        
    } else {
        [self.tableView beginUpdates];
        [self.tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:[NSIndexPath indexPathForRow:a_recs.count inSection:0]] withRowAnimation:UITableViewRowAnimationLeft];
        [self.tableView endUpdates];
        // place here anything else to do when the done button is clicked

    }
}

Good luck and bon appetit!

Solution 2

This tutorial is worth a read and should help you. It shows how to setup an 'Add new row' UITableView row at the bottom of a UITableView, but you should be able to make this appear at the top of your UITableView within your implementation of:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

e.g.

if(self.editing && indexPath.row == 1)
{
    cell.text = @"Insert new row";
    ...

Hope this helps!

Comments

[Ryan]

When using this method, I notice that the insert row that we're adding and removing, shows the blue select icon on the right hand side for a brief moment when removing it. It has to do with taking the table out of editing mode before removing the row. I tried moving the beginUpdates call up above the tableView setEditing call, but then the blue icon appear when the row is added, instead of removed. Any ideas how to avoid that blue select icon?

[ragamufin]

It sounds like accessoryType is being set somewhere or cached in the tableView queue. Try setting it explicitly to UITableViewCellAccessoryNone when you are adding a cell.