iOS 5 Storyboard segue to replicate the Music app's album tracks view

Question

I'd like to replicate the behavior of the iPhone's Music app. When you're playing an album in that app and you tap the upper right button the album cover flips around to show a UITableView of tracks behind it.

Is it possible to accomplish this with a custom UIStoryboardSegue?

Or is the best way just to flip between two views that use the same controller?

Answer 1

It is probably simpler to flip between two views of the same view controller, e.g.

- (IBAction)showTracksView
{
    [UIView transitionWithView:self.view 
                  duration:1.0 
                   options:UIViewAnimationOptionTransitionFlipFromLeft 
                animations:^{ tracksView.hidden = NO; } 
                completion:^(BOOL finished){ self.navigationItem.title = @"Tracks"; }];
}

- (IBAction)hideTracksView
{
    [UIView transitionWithView:self.view 
                  duration:1.0 
                   options:UIViewAnimationOptionTransitionFlipFromLeft 
                animations:^{ tracksView.hidden = YES; } 
                completion:^(BOOL finished){ self.navigationItem.title = @"Album cover"; }];
}

where tracksView is your UITableView of tracks.

Answer 2

I had this challenge and solved it using a custom segue to present the view controller. Just create a new class based on UIStoryboardSegue.

Here is my custom segue

.h file:

#import <UIKit/UIKit.h>

@interface BRTrackNotesSegue : UIStoryboardSegue

@end

.m file

@implementation BRTrackNotesSegue

- (void) perform {
    UIViewController *src = (UIViewController *) self.sourceViewController;
    UIViewController *dst = (UIViewController *) self.destinationViewController;
    [UIView transitionWithView:src.navigationController.view duration:0.50
                       options:UIViewAnimationOptionTransitionFlipFromLeft
                    animations:^{
                        [src.navigationController pushViewController:dst animated:NO];
                    }
                    completion:NULL];
}

@end

In the interface builder select the segue and set the Segue Class to the nam of your custom segue.

The second view controller contains the following to dismiss with the same animation :

- (IBAction)done:(id)sender {


    [UIView transitionWithView:self.navigationController.view
                      duration:0.50
                       options:UIViewAnimationOptionTransitionFlipFromLeft
                    animations:nil
                    completion:nil];
    [self.navigationController popViewControllerAnimated:NO];

}