How to create a button similar to “Remove Contact” button on iPhone?

Question

Apple has many big colored buttons, that are not standard. One of them is a delete contact button in address book. Another is Start/Stop button in Timer (Clock application) or End Call button in Phone. They are different, but all have similar appearance.

Question is simple. Is there a way to create these kind of buttons without using background images/screenshots or recreating them from scratch?

Thanks.

Answer 1

You could try Opacity . The new release allows you to draw vector images and generate UIKit-friendly Objective-C code that recreates the drawing.

Answer 2

Well, I've tried many ways to do it, but the most simple was to make a UIButton with a custom style.

If you need a "delete" button in the footer of the table - like in contact or event, here is the code:

    UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 60)];

    UIButton *newDeleteButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    newDeleteButton.frame = CGRectMake(10, 10, 300, 43);
    UIImage *buttonBackground = [UIImage imageNamed:@"ButtonDelete.png"];
    [newDeleteButton setImage:buttonBackground forState:UIControlStateNormal];
    [newDeleteButton addTarget:self action:@selector(deleteButtonPressed:) forControlEvents:UIControlEventTouchUpInside];

    UILabel *deleteTitle = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 300, 39)];
    deleteTitle.text = @"Delete";
    deleteTitle.font = [UIFont boldSystemFontOfSize:20];
    deleteTitle.textColor = [UIColor whiteColor];
    deleteTitle.textAlignment = UITextAlignmentCenter;
    deleteTitle.backgroundColor = [UIColor clearColor];

    [footerView addSubview:newDeleteButton];
    [footerView addSubview:deleteTitle];
    formTableView.tableFooterView = footerView;

First, you create the view for footer.

Then you make a button with the correct background — just make a screenshot of any button you need and delete letters from it.

Than you create a caption for your button and place it over the button.

The last step is to put the button and caption in the footer view, and put the footer view into the table.