Howto – iPhone’s Mail App Delete Button

Okay, admittedly I have been doing a terrible job at running a developer’s blog. I am really going to try and start giving back to the community. This is my first attempt at sharing code and tricks that I have developed for various projects.

Today I will be showing everyone how to make a delete button like we see in Mail App.

maildelete

First off you will need two resources one for the background one for the icon. 

redbutton trashicon

You then simply create a button. 

/*Set your button size*/
deleteButton.frame = CGRectMake(0.0, 0.0, 95, 33);
/*Set button background and scale it to fit the frame we set*/
[deleteButton setBackgroundImage: [[UIImage imageNamed: @"redButton.png"] stretchableImageWithLeftCapWidth:7.0 topCapHeight:0.0] forState:UIControlStateNormal];
 /*Set the icon*/
[deleteButton setImage:[UIImage imageNamed: @"trashIcon.png"] forState:UIControlStateNormal];

/*Then when the user has items selected to be deleted you can set the title*/
[deleteButton setTitle: [NSString stringWithFormat @"Delete (%i), numObjectsSelected] forState:UIControlStateNormal];

/*When the user has nothing selected you can disable the button with*/
deleteButton.enabled = FALSE;

/*Don’t forget to enable it when the user has selected a file!*/

And this is what our final product looks like, the button adjust and centers just like the Mail App button.

endresultdelete

You are free to use this code or modify it in anyway that you want, I only ask that if you plan using it that you send me an email or a comment with what it is being used in.  If you plan on republishing this tutorial please give me credit somewhere. 

3 Responses to “Howto – iPhone’s Mail App Delete Button”

  1. Cory Bohon says:

    Great start to a promising tutorial section! Made me subscribe; hope to see more.

  2. Devraj Mukherjee says:

    Great tutorial.

  3. John Clayton says:

    Hi, good detail there -thanks – will be using it in an iPhone voice+image recording app. One thing you want to change though is as follows; the end cap valueo f 7 should actually be 5 – given the resources for the redButton.png on this webpage (which is 11 pixels wide not 15).

    So, the one line I’m talking about, is now this

    [_deleteButton setBackgroundImage: [[UIImage imageNamed: @"redbutton.png"] stretchableImageWithLeftCapWidth:5.0 topCapHeight:0.0] forState:UIControlStateNormal];

    Cheers,

Leave a Reply