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!
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];
}
}