storyboadのページ遷移で「custom」を利用してみる

( Objective-C )

普段は「push」か「modal」で実装するけど、場合によっては違う見せ方をしたほうがいい場合があると思います。

そこで「custom」を利用してページ遷移をもっとインタラクティブに見せる実装を行います。

まずは「UIStoryboardSegue」なるクラスを継承した「DetailSegue」を作成してみます。

#import "DetailSegue.h"

@implementation DetailSegue


- (void)perform {
    
    // if either source or destination is nil, stop
    if (nil == self.sourceViewController || nil == self.destinationViewController) return;
    
    UINavigationController *ctrlSrc = [self.sourceViewController navigationController];

    [UIView beginAnimations:@"fadeOst" context:nil];
    [UIView setAnimationDuration: 0.1];
    
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop)];
    [[ctrlSrc view] setAlpha: 0.3];
    
    [UIView commitAnimations];
}
// animation end event 
- (void)animationDidStop {
    UINavigationController *ctrlSrc = [self.sourceViewController navigationController];
    
    [UIView beginAnimations:@"fadeIn" context:nil];
    [UIView setAnimationDuration: 0.5];
    
    [ctrlSrc pushViewController:self.destinationViewController animated:NO];
    [[ctrlSrc view] setAlpha: 1];    
    [UIView commitAnimations];
}

@end

次にStroryboadで設定を行います。以下のSeguesのCustomにしている部分(矢印)を右クリックして先ほど作成したクラスを指定するとできあがりです。

今回のアニメーションはfadeInOutを自力で作成しています。

もっと簡単にアニメーションをするんであれば、「UIView transitionWityView 」の「options」であらかじめ用意されたアニメーションを指定できるので設定するよいかもしれません。

    [UIView transitionWithView:src.navigationController.view duration:0.8
                       options:UIViewAnimationOptionTransitionCurlUp
                    animations:^{
                        [src.navigationController pushViewController:dst animated:NO];
                    }
                    completion:NULL];

■参考 https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006926-CH3-SW83 http://developer.apple.com/library/ios/#documentation/uikit/reference/UIView_Class/UIView/UIView.html