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.
There's some discussion here, but the solution is not so elegant.
First of all, since
UIBarButtonItem
is not a descendant ofUIView
, you probably cannot use UIKit animations directly on theUIBarButtonItem
. However, you can try setting acustomView
and animating that. You can use the same animation block.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:
UIView
that will be my replacement for the right control (call itrightControl
), positioned appropriately.UIView
that responds toUIControlEventTouchUpInside
and triggers myflipSide:
.At runtime I create a
UIImageView
for each state. I putbothUIImageView
s inrightControl
, but hide the one that isn't default. I switch the hidden flags around inflipSide:
in a dedicated animation block.Insanely weird. But it works.
Just use a custom UIView for the right navigation button that contains two buttons to flip between.
You can use a straight forward approach of creating a custom UIView that is displayed as the right navigation button item. This UIView should contain the two UIButtons you want to flip between. Remember that UIButtons are UIViews too so they can be flipped using the same transitions that a normal UI view can be flipped with and of course they can be tapped! Here is some sample code that works:
Note: I use a convenience function to create buttons as a custom category of UIViewController (note: you can add this same code to create a custom category for UIView too, just copy the same lines and replace UIViewController with UIView) - If you want to use it too just create a custom category by including this code below, alternately you can create the UIButtons as you normally would.