Show a UINavigationBar back button without pushing a view controller

Question

In the iPad's Photos app, when you tap an album the stack of pictures expands to fill the screen - you're in the same view, it's just rearranged the grid a little. But at the top, a left-arrow-style Back button appears, as if pushViewController had been used - except it fades in neatly, rather than sliding in. When you tap that, it fades out again, rather than sliding out.

Is there a way to replicate this behaviour? I've tried a few options so far, and might just be missing something. What I've tried:

• Setting self.navigationItem's leftBarButtonItem works, but gives me a square button rather than an angled Back-style one - there are a few hacks online to make this work, such as using pictures for the button, but I'd rather only use them if there's definitely no "official" way to do this.

• Setting self.navigationItem.backBarButtonItem - this is generally used to customise the back button when a view controller is pushed, so it has no effect.

• [self.navigationController.navigationBar setItems::] - this works, although it gives me the sliding animation rather than fading. As a result, I use animated:NO to make it just appear. Downside: when tapping Back, you do get the sliding out animation, which looks weird because the rest of the UI stays still.

Has anyone managed to replicate this effect?

Thanks in advance!

Answer 1

Your first approach is probably the best.

It doesn't have to be super-hacky, you can use a normal UIButton and customize it to look like a back-button using backgroundImageForState: and titleForState: (etc.), then set the UIButton object as the customView of your UIBarButtonItem .

Many apps these days customize the look & feel of the buttons anyway, so using a custom background image is quite normal. If you use resizableImageWithCapInsets: (or stretchableImageWithLeftCapWidth:topCapHeight: if you need to support iOS earlier than 5.0) then the button can still stretch to fit whatever text goes inside, and as it's a normal UIButton the text is localizable, etc. I don't consider this approach to be hacky, it is a perfectly sensible way to get around the limited functionality of UIBarButtonItem objects.

Answer 2

Better late than never.

To show a back button without pushing a view controller, use pushNavigationItem:animated: and popNavigationItemAnimated: on UINavigationBar . These result in the standard slide animation and creation of a back button. However, there is no way to ensure your content animation runs for the same time as the bar animation other than making an educated guess at the duration.

Since iOS 7 there is a better API for achieving this effect, where you still push and pop view controllers but you provide a custom transition animation through navigationController:animationControllerForOperation:fromViewController:toViewController: from UINavigationControllerDelegate . This allows the animations between the bar and content to be perfectly coordinated.

Finally, if your content before and after is managed by UICollectionViewController , you can use useLayoutToLayoutNavigationTransitions , which is designed for use-cases like Photos.