Adding a custom image to a UITableView delete button

Apple makes it difficult if not imposible to customize elements such as a UITableView’s delete button. Well today I found a way to by pass all the limitations and add a custom image to a delete button. Now I first want to warn you, this is not an official way of doing this, we will be adding a UIImageView over the delete button’s subview. So that being said, lets get started!

The first thing we need to do is set up a UITableView.

In your viewcontroller.m viewdidload method add the following code:

UITableView *table = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStylePlain];
[table setDataSource:self];
[table setDelegate:self];
[self.view addSubview:table];
[table setEditing:TRUE animated:TRUE];
[table release];

Now add the table view delegate methods to your viewcontroller.m:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
	return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

 return 5;
}

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

  	UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:[NSString stringWithFormat:@"Cell %i",indexPath.section]];

	if (cell == nil) {

		cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:[NSString stringWithFormat:@"Cell %i",indexPath.section]] autorelease];

		}

		cell.textLabel.text = @"txt";

		return cell;
}

	- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

	[tableView deselectRowAtIndexPath:indexPath animated:YES];
}

And voila! You should now have a tableview that automatically enters edit mode on launch. But we still have those ugly default delete buttons.

So now lets start customizing!  First, we are going to need a UITableViewCell subclass, to add one go to File > New File then select ”Objective-C Class” after that go down to the drop-down menu and select “UITableViewCell” now choose a name for the class and click “Finish”.

Now that we have our custom cell class, we need to point the tableview to the class. First you need to import the class in the viewcontroller.h.

Second we need to replace these lines in the cellForRowAtIndex method:

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:[NSString stringWithFormat:@"Cell %i",indexPath.section]];

if (cell == nil) {

　　cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:[NSString stringWithFormat:@"Cell %i",indexPath.section]] autorelease];

}

with:

className *cell = (className *)[tableView dequeueReusableCellWithIdentifier:[NSString stringWithFormat:@"Cell %i",indexPath.section]];

	if (cell == nil) {

		cell = [[[className alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:[NSString stringWithFormat:@"Cell %i",indexPath.section]] autorelease];

}

We are now pointing the tableview to the custom class.

Now for that last but not least step:

In your custom cell class add the following method:

- (void)willTransitionToState:(UITableViewCellStateMask)state{
　　[super willTransitionToState:state];
　　if ((state & UITableViewCellStateShowingDeleteConfirmationMask) == UITableViewCellStateShowingDeleteConfirmationMask) {
	for (UIView *subview in self.subviews) {
	　　if ([NSStringFromClass([subview class]) isEqualToString:@"UITableViewCellDeleteConfirmationControl"]) {             
		UIImageView *deleteBtn = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 64, 33)];
		[deleteBtn setImage:[UIImage imageNamed:@"delete.png"]];
		[[subview.subviews objectAtIndex:0] addSubview:deleteBtn];
		[deleteBtn release];
	　　}
	}
  　} 
}

“delete.png” is the name of the custom image, make sure the image is 64 x 33 pixels. This is the result: