Saturday, October 25, 2008

Table View Multi-Row Edit Mode


If you've played around at all with UITableView's "Edit Mode", you've probably been disappointed that it doesn't support the ability to select and then delete multiple rows in the table, the way that you can do in Apple's Mail application. It was one of the most welcome improvements made in the 2.0 iPhone OS, and I was a bit bummed when I discovered that the ability to do that was not being added to UITableView with the 2.0 release.

Personally, I'd like to see the functionality in more table-based iPhone apps, so I threw together a little sample iPhone project that shows how to do it. You can find the project Right Here.

I'm not going to walk through the entire projects, as most of it is standard application-building, but I wanted to point out the general approach I used. I do not know if this is exactly how Mail does it, and I'm certainly not sure this is the best way to do it, but it does work. The only aspect of the Mail implementation I didn't get is changing the background color of the selected rows in edit mode. I tried it, but was getting some weird behavior where the last-selected row was turning back to white, but when another row was added to the selection, then it would return to the correct color. At some point, I'll dive in and try and figure out what was wrong with that code, but for the time being, this should work pretty well for you and at least give you an idea of how the process can work.

In my controller class, I defined a few constants and macros:

#define kCellImageViewTag 1000
#define kCellLabelTag 1001

#define kLabelIndentedRect CGRectMake(40.0, 12.0, 275.0, 20.0)
#define kLabelRect CGRectMake(15.0, 12.0, 275.0, 20.0)

The first two will be used later to retrieve the correct subviews of the table view cell. The bottom two define the possible positions of the row's text. If we're in edit mode, the text is going to be moved over a little bit (which will be animated). By defining the two rects here, we can shift the text over easily by simply assigning the new value to the label's frame property.

In my controller, I have two mutable arrays. One will hold the display values, the other will be used to hold which rows are selected when we're in edit mode. I also define a BOOL that will identify when we're in edit mode. I don't call it edit mode because I don't want to risk a name conflict or confusion with Apple's code.

NSMutableArray *countries;
NSMutableArray *selectedArray;
BOOL inPseudoEditMode;

I also have two UIImage pointers that contain the checked and unchecked image. This is a little klugey - the unchecked is just a circle, so I probably should have just used CoreGraphics to draw the circle, but this was easier.

UIImage *selectedImage;
UIImage *unselectedImage;

I created a method that will create the selectedArray, populating it with NSNumber objects that hold a NO value for every row. This lets me easily reset the selection after a delete.

- (void)populateSelectedArray
{
NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:[countries count]];
for (int i=0; i < [countries count]; i++)
[array addObject:[NSNumber numberWithBool:NO]];
self.selectedArray = array;
[array release];
}

This method gets called in viewDidLoad, and also every time we delete rows. The viewDidLoad method also loads an array with strings pulled from a text file and loads the two UIImages.

There's an IBAction method to toggle edit mode. This gets called when the user presses the "Delete" button in the Nav Bar. It changes the value of inPsuedoEditMode and also hides or unhides the toolbar at the bottom, which has the "Delete" button that causes selected rows to get deleted.

-(IBAction)togglePseudoEditMode
{
self.inPseudoEditMode = !inPseudoEditMode;
toolbar.hidden = !inPseudoEditMode;

[self.tableView reloadData];
}


Most of the work here is in the tableView:cellForRowAtIndexPath: method. Here is where we have to look at whether we're in edit mode, and if we are in edit mode, look at which rows are selected.


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *EditCellIdentifier = @" editcell";


UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:EditCellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:EditCellIdentifier] autorelease];


UILabel *label = [[UILabel alloc] initWithFrame:kLabelRect];
label.tag = kCellLabelTag;
[cell.contentView addSubview:label];
[label release];

UIImageView *imageView = [[UIImageView alloc] initWithImage:unselectedImage];
imageView.frame = CGRectMake(5.0, 10.0, 23.0, 23.0);
[cell.contentView addSubview:imageView];
imageView.hidden = !inPseudoEditMode;
imageView.tag = kCellImageViewTag;
[imageView release];

}

[UIView beginAnimations:@"cell shift" context:nil];

UILabel *label = (UILabel *)[cell.contentView viewWithTag:kCellLabelTag];
label.text = [countries objectAtIndex:[indexPath row]];
label.frame = (inPseudoEditMode) ? kLabelIndentedRect : kLabelRect;

UIImageView *imageView = (UIImageView *)[cell.contentView viewWithTag:kCellImageViewTag];
NSNumber *selected = [selectedArray objectAtIndex:[indexPath row]];
imageView.image = ([selected boolValue]) ? selectedImage : unselectedImage;
imageView.hidden = !inPseudoEditMode;
[UIView commitAnimations];

return cell;
}

Notice a few things

  • we manually create subviews to the table view cell's content view, and we assign them tags. The tags allow us to retrieve the correct subview when we get dequeued cell instead of creating a new one.

  • We call beginAnimations:forContext: and commitAnimations: around our changes so that the changes get animated for us. That's all we have to do to make turning edit mode on and off animated


When a row is touched, and we are in edit mode, we have to set the corresponding row in the selection array to YES if it's currently NO and vice versa.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[self.tableView deselectRowAtIndexPath:indexPath animated:YES];
if (inPseudoEditMode)
{
BOOL selected = [[selectedArray objectAtIndex:[indexPath row]] boolValue];
[selectedArray replaceObjectAtIndex:[indexPath row] withObject:[NSNumber numberWithBool:!selected]];
[self.tableView reloadData];
}
}

There's one more method that's key to this process, which is another action method that gets called when the Delete button in the toolbar gets pressed. Because this toolbar is only shown when we're in edit mode, we don't have to check that, we just do the delete. Because you can't delete objects from a collection while enumerating over them, this method is a little more complex than you might expect.

-(IBAction)doDelete
{
NSMutableArray *rowsToBeDeleted = [[NSMutableArray alloc] init];
NSMutableArray *indexPaths = [[NSMutableArray alloc] init];
int index = 0;
for (NSNumber *rowSelected in selectedArray)
{
if ([rowSelected boolValue])
{

[rowsToBeDeleted addObject:[countries objectAtIndex:index]];
NSUInteger pathSource[2] = {0, index};
NSIndexPath *path = [NSIndexPath indexPathWithIndexes:pathSource length:2];
[indexPaths addObject:path];
}
index++;
}

for (id value in rowsToBeDeleted)
{
[countries removeObject:value];
}

[self.tableView deleteRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationFade];

[indexPaths release];
[rowsToBeDeleted release];
inPseudoEditMode = NO;
[self populateSelectedArray];
[self.tableView reloadData];
}

Anyway, I hope this is helpful to some people. If you have any questions, put them in the comments, or drop me an e-mail.



12 comments:

Mozketo said...

Just fantastic stuff, thank you.cre

fsonmezay said...

I'm trying to develop an application which we fill the UITableViewCell elements from an xml file and allow application users to select multiple rows at any time. Your "Table View Multi-Row Edit Mode" example works pretty good, but when I receive data from xml file located in a URL (http://www.ferdisonmezay.com/ipod/xml/bim423_old.xml), and displayed the list on the TableView, I encounter a problem, which when i select one of the rows every 10th cell down is also being selected, automatically. I've searched mailing lists and forums, but could not find any solutions.

Thanks and best regards.

Sevgi Yigit

Arjun said...

Thanks for the helpful tutorial! Do you mind if I use some of the code for an iPhone application me and my classmates are building? The application is open source and you can check it out at: http://code.google.com/p/kaching-iphone-application/

dinesh said...

Good tutorial...I want to have a two cell in a row,as in contacts we have “Text message” and “Add to favourites” in a single row how to do that….
Is that Splitting a cell into two?

can anyone help me?

wyoung said...

Love it thanks for posting! I would really love some help on extending this to work with an indexed (sectioned) tableview. I have most of it working including the checkboxes, but the didSelectRowAtIndexPath is throwing me - without the indexed table I can easily determine which row is selected, but with the indexed table, when I select a row and checkbox it (in the didSelectRowAtIndexPath) it's checkboxing the corresponding rows in each section (ex: I check the 2nd row in the table - it checks all the 2nd rows in each section). Yes noob question/issue but any help would be most appreciated. Thanks!

Edwin said...

scrub m65 kamagra attorney lawyer body scrub field jacket lovegra marijuana attorney injury lawyer

h4ns said...
This comment has been removed by a blog administrator.
mohammed rafiq said...

HI,
Am doing an app and have struck at a point based on sqlite database.
At first I have to create two tables on same view.In that tables I have to insert values from sqlite database tables.
In first table I have to get the values from first table.And in second table i have to get the values from second table by comparing with the foreign key.

table1
id name
1 Mohammed
2 Rafiq

table2
id id2 name1
1 1 ABC
2 1 DEF
3 2 ghi




in first table i need values Mohammed,Rafiq.

And when i click on Mohammed i used to get ABC,DEF in second table or if select Rafiq then ghi must display.


I am sending an app see tht and remodule it searching from a week.


and the selected data must be displayed in text fields

Am trying from last week

Thank u

Hire iphone developer said...

Hello,
Today, iPhone 4 apps development is a glorious service that is widely used for the business purpose.Outsourcing companies have talent that can professionally perform your project of game development.
Thanks.


hire iphone developer

rohan said...

someone asked this already, Do you mind if I use some of the code for an iPhone application I am building?

Jeff LaMarche said...

If I post code to my blog, you are free to use it for whatever you want unless I specifically place restrictions on it (which I would only do if required by a third party license)

arun.k said...

If you select indexpath.row 0 object and scroll down to another cell so that 0th cell becomes scrolled out of the screen. select a row now and delete.

Only the cells that are visible to the view will be deleted.