How do I create a button similar to the Delete Contact button on iPhone?

Apple has many colored buttons that are not standard. One of them is the button for deleting contacts in the address book. Another "Start / Stop" button in the "Timer" ("Clock") or "End Call" application in the phone. They are different, but they all have a similar look.

The question is simple. Is there a way to create these buttons without using background images / screenshots, or to recreate them from scratch?

Thank.

+2


source to share


2 answers


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



+3


source


Well, I tried many ways to do this, but the simplest was to make a UIButton with a custom styling.

If you need a delete button in a table footer - for example, in a contact or an 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 a view for the footer.



Then you create a button with the correct background - just take a screenshot of any button you want and remove the letters from it.

Than you create a signature for your button and place it above the button.

The final step is to place the button and caption in the footer and place the footer in the table.

+1


source







All Articles