UITableView needs to look like Contacts with edit in place fields - ios

Question

I have a UITableView which I want to work in a similar way to the Contacts app in that there's an edit button which when clicked transforms the cells into edit cells.
At the moment they are set up using the cell style 'left detail' and I have overridden the setEditing method ready for implementation but I don't know how to transform the cells.
Some other answers on here included "Monitor when the table view's editing property changes (when the Edit button is pressed). Then add code to your delegate methods to compose, draw and indent cells in a different way, when the table view is in editing mode." which is exactly what I want but don't know how to do.
- (void)setEditing:(BOOL)flag animated:(BOOL)animated
{
[super setEditing:flag animated:NO];
if (flag == YES){
// Change views to edit mode.
self.textField = [[UITextField alloc] initWithFrame:[_titleLabel frame]];
[self.textField setText:_titleLabel.text];
[self.view addSubview:self.textField];
}
else {
// Save the changes if needed and change the views to noneditable.
[_titleLabel setText:self.textField.text];
[self.textField removeFromSuperview];
}
}
In my method I have code taken from another question which works.. sort of (it makes a new editable text field on the fly in the wrong place and doesn't hide the label).
The apple guidelines aren't specific enough for me to understand how to develop the views.

Answer 1

In a nutshell, the way this works is you set an edit flag on the entire UITableView and then you implement a couple of methods (canEditRowAtIndexPath,commitEditingStyle) declared in the UITableViewDataSource protocol that determine which cells are being edited.
So first you need to put the UITableVIew into edit mode. You want to do that in the handler for your toolbar button:
[self.tableView setIsEditing:YES animated:NO];
Then, the tableview will call canEditRowAtIndexPath to determine if the row can be edited :
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
Finally, when the user is done editing, this method gets called:
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
http://developer.apple.com/library/ios/#documentation/uikit/reference/UITableViewDataSource_Protocol/Reference/Reference.html
There is another example here:
http://www.behindtechlines.com/2012/06/02/enabling-configuring-uitableview-edit-mode/

Answer 2

I have a workaround.
If I create a custom row and make it look the same as the 'left detail' style, but using a textview on the right instead of a label, I can change the 'seteditable' and 'setenabled' fields of the views so that on edit they allow editing. I have hacked the font color so it changes when edit is clicked so the user can see that it is now editable.
This seems very messy - so I'm still looking for the best way to do this.
- (void)setEditing:(BOOL)flag animated:(BOOL)animated
{
[super setEditing:flag animated:NO];
if (flag == YES){
[self.tableView setEditing:YES animated:NO];
[self.sampleLabel setEnabled:YES];
[self.sampleLabel setTextColor:[UIColor blackColor]];
}
else {
[self.sampleLabel setEnabled:NO];
[self.sampleLabel setTextColor:[UIColor darkGrayColor]];
}
}
- (void)configureView
{
self.titleLabel.text = [[self.detailItem valueForKey:#"title"] description];
self.ticketNumberLabel.text = [[self.detailItem valueForKey:#"reference"] description];
self.detailsLabel .text = [[self.detailItem valueForKey:#"details"] description];
self.sampleLabel.text = [[self.detailItem valueForKey:#"reference"] description];
// initially set labels to not be editable
[self.detailsLabel setEditable:NO];
[self.sampleLabel setEnabled:NO];
}
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
// Return NO if you do not want the specified item to be editable.
// item can't be deleted now
return NO;
}