How to rotate a UIbutton in Xcode + IB?

Question

I am writing an iPhone programer, and I want to make a button with is rotate 180 degree, I try to use the multi-touch track pad to rotate a UIbutton, but it don't success, how can I do it? or I need to do it by code?

Solution 1

Well, here we go:

CABasicAnimation *halfTurn;
halfTurn = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
halfTurn.fromValue = [NSNumber numberWithFloat:0];
halfTurn.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];
halfTurn.duration = 0.5;
halfTurn.repeatCount = 1;
[myButton addAnimation:halfTurn forKey:@"180"];

Hope that helps... Im typing from my PC though, not my Mac - So I hope that's right!

Solution 2

You can't do it from Interface Builder. You have to rotate it from your code, using the transform property of your UIButton, which is a CGAffineTransform struct. You can use the CGAffineTransformMakeRotation() to set it.

myButton.transform = CGAffineTransformMakeRotation( ( 180 * M_PI ) / 180 );

The first 180 in the code is the angle in degrees. The operation converts it to radians.

Solution 3

I was wanting to do this same thing - rotate a button 180 degrees when tapped - but do it using an animation. Neurofluxation's answer does the 180 degree rotation with an animation, but it isn't permanent. Macmade's answer does the 180 degree rotation, but doesn't do it with an animation. So if you're like me and would like to do a 180 degree rotation with animation use this code:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.35];

// (180 * M_PI) / 180 == M_PI, so just use M_PI
myButton.transform = CGAffineTransformMakeRotation(M_PI);

[UIView commitAnimations];

As well, if you want to rotate back to the starting position (ie 0 degree rotation) then put the following in between the animation code like above:

myButton.transform = CGAffineTransformMakeRotation(0);

As to a use case for such a button, Evernote's show/hide keyboard button does a really slick 180 degree rotation which can be recreated using the above code.

Comments

[Macmade]

Wow... Keep it simple! Why using an animation to rotate a single element, since you can do it using a single property of the object? IMHO, it's useless, it made to code uselessly complex, and it not good at all for performance...

[Barrie Reader]

This code functions, and is a nice standard way to rotate an object - just ENSURE that you RELEASE it all afterwards.

[Macmade]

It did not say your code does not work. I'm just saying this can be done in another way, which is easier and more performant.

[philsquared]

I think there was just a fundamental ambiguity in the original question. Does "rotate" mean "transform to a rotated position", or does it make "make it rotate" as in an animation. I took it the first way, as Macmade evidentally did. It looks like you took it the second way - which is equally valid, but leads to a different answer.

[Ivan Vučica]

I believe you can autorelease "halfturn"; addAnimation should keep it retained. Didn't test though.

[Michael Mior]

Shouldn't it be myButton.layer?