Question

I want to recreate the rotating minus button that Apple uses in it’s UITableViews when in edit mode. You can see the animation in this video on YouTube.

Is there a way to embed this button (and animation) into my own view somewhere else? Or do I actually have to recreate it? Would I need images for each state?

In addition, here is a picture of the button mid-animation from that video.

Thanks!

Answer 1

Creating a button and using the shadow properties of the layer attribute won’t work because when the image rotates, you don’t want the shadow to also rotate. I recreated this effect by doing the following. I created two images that were 35px square. Once called delete-icon-bg.png and one called delete-icon-dash.png. delete-icon-bg.png is just the red circle style like I want it, and the delete-icon-dash.png is a transparent png with a white dash centered where I want it over the background. Then I configure the button like so:

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage:[UIImage imageNamed:@"delete-icon-bg.png"] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"delete-icon-dash.png"] forState:UIControlStateNormal];
[button addTarget:self action:@selector(didTouchDeleteButton:) forControlEvents:UIControlEventTouchUpInside];
button.adjustsImageWhenHighlighted = NO;
button.contentMode = UIViewContentModeCenter;

The method didTouchDeleteButton: then looks like this:

- (void)didTouchDeleteButton:(UIButton *)sender
{
    if (sender.selected) {
        sender.selected = NO;
        [UIView beginAnimations:@"undoRotateDash" context:nil];
        [UIView setAnimationDuration:0.3];
        sender.imageView.transform = CGAffineTransformMakeRotation(0.0);
        [UIView commitAnimations];
    } else {
        sender.selected = YES;
        [UIView beginAnimations:@"rotateDash" context:nil];
        [UIView setAnimationDuration:0.3];
        sender.imageView.transform = CGAffineTransformMakeRotation(-M_PI_2);
        [UIView commitAnimations];
    }
}