iPhone flip right button (like iTunes)

Question

I'm trying to flip between two views. That's easy, the code is below, but I also want to simultaneously flip the button used to perform the flip.

You can see this behavior in the iPod application when you're playing a track; tapping the flip button flips between the cover art and the track listing, but it flips the button at the same time.

This is a page on the navigation controller, and the button I want to flip is the rightBarButtonItem.

Here's the code I have so far. This flips the view, but not the rightBarButton.

[UIView setAnimationBeginsFromCurrentState: YES];
[UIView setAnimationDuration: 0.5f];
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
showingBackside = !showingBackside;
if (showingBackside) {
 [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft
         forView: self.view
        cache: YES];
 [self.view addSubview: backside.view];
 [frontside.view removeFromSuperview];
} else {
 [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight
         forView: self.view
        cache: YES];
 [self.view addSubview: frontside.view];
 [backside.view removeFromSuperview];
}
// flip image, too
NSString *newImage = showingBackside ? @"backside.png" : @"frontside.png";
[(self.navigationItem.rightBarButtonItem) setImage: [UIImage imageNamed: newImage]];
[UIView commitAnimations];

(The image flipping code here may not compile; I added it after to try to explain what I was trying to do.)

Where I'm running into trouble is I want to change the rightmost button in the navigation controller so it flips simultaneously.

How do I do this? What view do I animate, and do I do it as part of the same animation block or as a separate one? Any tips would be appreciated, I definitely don't have a good handle on animation yet.

Answer 1

There's some discussion here, but the solution is not so elegant.

First of all, since UIBarButtonItem is not a descendant of UIView, you probably cannot use UIKit animations directly on the UIBarButtonItem. However, you can try setting a customView and animating that. You can use the same animation block.

Answer 2

Okay, here's what I actually did to fix this:

I was already using a custom title view. Instead of using rightBarButtonItem, I made my custom view wider.

I created an image of both sides of the button, complete with the navigation frame, and embedded them into the application. In my title view, I put:

• A UIView that will be my replacement for the right control (call it rightControl), positioned appropriately.
• A button over the UIView that responds to UIControlEventTouchUpInside and triggers my flipSide:.

At runtime I create a UIImageView for each state. I putboth UIImageViews in rightControl, but hide the one that isn't default. I switch the hidden flags around in flipSide: in a dedicated animation block.

Insanely weird. But it works.