iOSでのサイドメニュー表示

Question

教えてgooの方に投稿させて頂きましたが
1週間ほど待っても回答が得られなかったので
改めてこちらで質問させて頂きます。

目的：iOSアプリでサイドメニューの実装
環境：xcode6（つい先日落としました）＋Objective-C
スキル：プログラム未経験者

初めましてよろしくお願いします。
サイドメニューというのはFacebookの様な
サイドメニューを表示するタイプ（スライドイン？）ではなく
画面に被せるようなタイプ（スライドオーバー？）を実現したいと思ってます。

関数等を入力して実装できるスキルがないので
コピペから始めたいのですが
調べてみるとスライドインタイプの物が多く
さらにラインセンスが緩いとはいえMITまたはアパッチ付属のものばかりで困っています。

唯一見つけたのが
デジウィキというサイトの『【サンプルコード有】スライドするサイドメニューを表示させる』です。
参考：http://bit.ly/1zczg47
（日本語がURLに含まれ長すぎたので短縮しました。）

『RightSlideMenuView』のhとmファイルは
新規でどの種類を選べばいいのかわからず
（調べた限りxcode4x?5x?では、Object-C classを選んでいるサイトが多く
Objective-C Fileしか存在していない）

新規でxcode⇨SingleViewApplicationを選び
既存のViewControllerを利用して
元ファイルが
@interface RightSlideMenuView : UIView
となっていたので

RightSlideMenuViewを
ViewController

UIViewを
UIViewController
と置き換えてみましたがエラーが出てコンパイルできませんでした。

また参考元の通りUIViewなるものを
一番右のユーティリティーバー下で検索してみましたが
ViewControllerしかなくUIViewというものがありませんでした。

そしてソース元の
RightSlideMenuView.mに記述する所ですが
『//メニュー外をタップしたときに呼び出されるメソッド』
から下のソースは
@implementation RightSlideMenuView
#import "RightSlideMenuView.h"
に書かれているソースとは別枠でソースが書かれていたので
@implementationと#importの最後の締めくくり手前に
それぞれ設置してみましたが相変わらずエラーは解消されませんでした。
外部ファイルに記述する必要があるということでしょうか。

最後になりましたが自分のスキルは
ドットインストールというサイトの
iPhoneアプリ開発入門を一通り終わらした所です。

よろしくお願いします。

Answer 1

RightSlideMenuViewはUIViewを元にして作るカスタムViewです。
カスタムViewのための新しいクラスを追加する必要があります。

新しいクラスを追加するのは下記の手順で行います。
①New -> File -> iOS SourceのCocoa Touch Class ->Next

下記を入力
Class : RightSlideMenuView
Subclass of : UIView
Language : Objective-C

②できたRightSlideMenuView.hとRightSlideMenuView.mに参考サイトのソースを書き込む

③元からあるViewControllerに参考サイトの「次に、メニューを表示させたいViewControllerをつくります。」以下を記入。

④- (IBAction)showSideMenu:(id)senderの処理を適宜Storyboardに接続する

以上、お試しください^^

Comments

[groiag7nj]

早速の回答ありがとうございます。

1からプロジェクトを作成してみましたが
やはりエラーが表示されます。
まだ使いこなせていないので④の処理を理解できておらず
それが原因か、または
ソース元の「//メニュー外をタップしたときに呼び出されるメソッド」の挿入する位置が悪いかのどちらかだと思います。

現状でソースは
◼️ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@end

◼️ViewController.m
#import "ViewController.h"
#import "RightSlideMenuView.h"

@interface ViewController ()

@interface MainViewController ()
{
RightSlideMenuView* sideMenuView_;
UIView* viewForClosingSideMenu_;
}

@end

@implementation ViewController

- (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)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

//メニュー外をタップしたときに呼び出されるメソッド
-(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;
}
}
@end

◼️RightSlideMenuView.h
#import <UIKit/UIKit.h>
@interface RightSlideMenuView : UIView
@end

◼️RightSlideMenuView.m
#import "RightSlideMenuView.h"

@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;
}

@end

となっています。
再度の質問ですけれど回答を頂けると幸いです。

よろしくお願いします。
何故かコメントが反映されていなかったので
多重投稿になっていたらすみません。

[jollyjoester]

だいたいOKだと思います。
あと３箇所直せばいけるはず。

①まず元のサイトのミスですが
RightSlideMenuView.mの[UIColor yellowCollor]の部分が綴りミスなのでyellowColorに直す

②IBActionの左側に白抜きの丸印があると思います。StoryboardにButtonを配置してこれと接続してください。
そうするとボタンを押したときにサイドメニューが表示されるようになります。
この辺はdotinstallの「ボタンを動作させてみよう」あたりを参考にしてください。

③showSideMenuメソッドの中にあるinsideSideMenuXの部分はご自身で数値を入れて調整してみてください。
同じくcloseSideMenuメソッドの中にあるoutsideSideMenuXの同様です。
例えばinside~に160、outside~に320を入れるとボタンを押すと右側から半分ほどサイドメニューが出て、メニュー以外のところを押すと元に戻ります。

[groiag7nj]

回答ありがとうございます。

結果、無事に動く様になりました。
大変助かりました。色々とイジりたいと思います。

この記事を読んでもまだわからない
自分の様な初心者の方の為に付け足しますと

ここ間違ってました。
@interface ViewController ()

@interface MainViewController ()
{
RightSlideMenuView* sideMenuView_;
UIView* viewForClosingSideMenu_;
}

xcode6以降の環境であればデフォルトで
ViewControllerが作成されているので

@interface ViewController ()
{
RightSlideMenuView* sideMenuView_;
UIView* viewForClosingSideMenu_;
}

正しくは上記です。
続いて jollyjoesterさんに教えて頂いた
②番目のボタンを押した時の反応ですが
動画を見ても白抜きの丸印と接続できないという人は
一度、

- (IBAction)showSideMenu:(id)sender
の行の上に動画と同じように挿入してください。
名前は手間を省く為　showSideMenuとすれば
もうわかると思いますが同じものが2つになっているので
片方を削りましょう。

後は③で指摘いただいた具体的な数値を入れる
ビルドしてください。
数値を入れてもエラー表示だらけだったのがビルドする事で
一瞬で消えると思います。

[jollyjoester]

よかったです^^/