Friday 2 April 2010

iPhone Delete Button Image

I've just reproduced the red delete button that is used in the Contacts app and other places on the iPhone. I thought I would share it with the world.

This isn't the super-glossy button used in action sheets, but one that can appear in the bottom of a view when editing an item or looking at its details. The Contacts app and the mail account settings screen are examples of this.

click here to download the image

Use the following code to set up your button:

    [self.deleteButton setBackgroundImage:[[UIImage imageNamed:@"delete_button.png"]
                                           stretchableImageWithLeftCapWidth:8.0f
                                           topCapHeight:0.0f]
                                 forState:UIControlStateNormal];

    [self.deleteButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.deleteButton.titleLabel.font = [UIFont boldSystemFontOfSize:20];
    self.deleteButton.titleLabel.shadowColor = [UIColor lightGrayColor];
    self.deleteButton.titleLabel.shadowOffset = CGSizeMake(0, -1);

This will give you something like this:

This button should probably pop up an action sheet to confirm the action.