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.

10 comments:

  1. Are there similar PNG files for yellow, green, etc?

    ReplyDelete
  2. Thank you so much, this was exactly what I was looking for.

    ReplyDelete
  3. This is awesome. Thanks!

    ReplyDelete
  4. I made a high res version: http://i.imgur.com/rjdoW.png

    ReplyDelete
  5. awesome! that was helpful!

    ReplyDelete
  6. Thank you for this. Nicely done and very helpful.

    ReplyDelete
  7. Excellent -- Thank you! BTW: to answer the question about similar files of different colors: Any competent graphics program (Photoshop, GIMP, Pixelmator, etc.) should allow you to adjust the Hue of the original to any color you want. The Save As (or Duplicate in Lion, etc.) and name it to suit. Even the Mac's built-in Preview app allows you to do this with Tools/Adjust Color.

    ReplyDelete