アプリでよくある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;
}
}