【サンプルコード有】スライドするサイドメニューを表示させる

iPhone

アプリでよくあるUIで、ボタンをタップすると、画面外から横スライドして表示されるメニューを実装したいと思います。
今回はスライドしたメニューが画面に被さるように表示させてみます。

まず、スライドさせるビューをつくります。
今回はただのViewを使いますが、UITableViewの方がいいかと思います。

RightSlideMenuView.h

 @interface RightSlideMenuView : UIView
 @end

RightSlideMenuView.m

 @implementation RightSlideMenuView
 
 - (id)initWithFrame:(CGRect)frame
 {
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.frame = CGRectMake( [UIScreen mainScreen].bounds.size.width, 0, 160, 568);
        self.backgroundColor = [UIColor yellowCollor];
        UILabel* title = [[UILabel alloc] initWithFrame:CGRectMake(30, 100, 100, 100)];
        title.text = @"スライドメニューが表示されました";
        title.backgroundColor = [UIColor clearColor];
    }
    return self;
 }

次に、メニューを表示させたいViewControllerをつくります。

 #import "RightSlideMenuView.h"
 
 @interface MainViewController ()
 {
    RightSlideMenuView* sideMenuView_;
    UIView* viewForClosingSideMenu_;
 } 
 
 - (void)viewDidLoad
 {
    [super viewDidLoad];
    sideMenuView_ = [[RightSlideMenuView alloc] initWithFrame: self.view.frame];
    [self.view addSubview: sideMenuView_];
 }
 
 //スライドさせてメニューを表示させる
 - (IBAction)showSideMenu:(id)sender
 {
    // show side menu with animation
    CGRect sideMenuFrame = sideMenuView_.frame;
    [UIView animateWithDuration:0.3f
                          delay:0.0f
                        options:UIViewAnimationOptionCurveEaseIn
                     animations:^{
                         // アニメーションをする処理
                         sideMenuView_.frame = CGRectMake( insideSideMenuX,
                                                          sideMenuFrame.origin.y,
                                                          sideMenuFrame.size.width,
                                                          sideMenuFrame.size.height);
                     } completion:^(BOOL finished) {
                         // アニメーションが終わった後実行する処理
                     }];
    
    // メニュー外をタップしたら、メニューを閉じるようにする
    // そのためのUIViewをメニュー外に設置し、これをタップしたらメニューを閉じるようにする
    if (!viewForClosingSideMenu_)
    {
        viewForClosingSideMenu_ = [[UIView alloc] initWithFrame:
                                   CGRectMake(0,
                                              0,
                                              self.view.frame.size.width
                                              - sideMenuFrame.size.width,
                                              self.view.frame.size.height)];
        viewForClosingSideMenu_.backgroundColor = [UIColor clearColor];
        UITapGestureRecognizer *closeSideMenuTap =
        [[UITapGestureRecognizer alloc] initWithTarget:self
                                                action:@selector(closeSideMenu:)];
        [viewForClosingSideMenu_ addGestureRecognizer:closeSideMenuTap];
        [self.view addSubview: viewForClosingSideMenu_];
    }
 }

 //メニュー外をタップしたときに呼び出されるメソッド
 -(void)closeSideMenu:(int)destination
 {
    CGRect sideMenuFrame = sideMenuView_.frame;
    [UIView animateWithDuration:0.3f
                          delay:0.0f
                        options:UIViewAnimationOptionCurveEaseIn
                     animations:^{
                         // アニメーションをする処理
                         sideMenuView_.frame = CGRectMake( outsideSideMenuX,
                                                          sideMenuFrame.origin.y,
                                                          sideMenuFrame.size.width,
                                                          sideMenuFrame.size.height);
                     } completion:^(BOOL finished) {
                         // アニメーションが終わった後実行する処理
                     }];
    
    // メニューを閉じるためのUIViewを削除
    if (viewForClosingSideMenu_)
    {
        [viewForClosingSideMenu_ removeFromSuperview];
        viewForClosingSideMenu_ = nil;
    }
 }