スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーをはてなブックマークに追加

Objective-c メニューボタンを押すと、下からメニューバーをスライドさせてメニューボタンを表示する。

ViewControllerの画面にメニューボタンを追加するスペースがなくなってしまうことは多々ある。
これはどうしたものかといろんなアプリを参考にしてみると、+なんかのボタンを押すと下からメニューボタンがスライドして登場するインターフェースが多い。これを実装してみたのでメモ。コピペするだけで実現できるようにUI部品はコード上で書いてくことにする。

完成するとこんなイメージ。

kidou.png



menuSlide.png



プロジェクトは「Single View Application」で作成するものとします。
以下ソースコード
【ViewController.h】
編集なし。

【ViewController.m】

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController{
UIView* menuView;
UIButton* viewOverButton;
}

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// 背景色は黄色
self.view.backgroundColor = [UIColor yellowColor];

// メニューボタンを乗せるビュー
menuView = [[UIView alloc]init];
menuView.frame = CGRectMake(0, self.view.bounds.size.height, self.view.bounds.size.width, self.view.bounds.size.height/4);
menuView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:menuView];

// メニューボタンを表示させるボタン
UIButton* menuOpenButton = [[UIButton alloc]init];
menuOpenButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
menuOpenButton.frame = CGRectMake(0, 0, self.view.bounds.size.width/4, self.view.bounds.size.height/4);
menuOpenButton.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height/2);
[menuOpenButton setTitle:@"メニュー" forState:UIControlStateNormal];
[menuOpenButton addTarget:self action:@selector(menuOpen:) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:menuOpenButton];

// メニュー1ボタン
UIButton* menuButton1 = [[UIButton alloc]init];
menuButton1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
menuButton1.frame = CGRectMake(0, 0, menuView.bounds.size.width, menuView.bounds.size.height/4);
menuButton1.center = CGPointMake(menuView.bounds.size.width/2, menuView.bounds.size.height/4);
[menuButton1 setTitle:@"メニュー1" forState:UIControlStateNormal];
[menuButton1 addTarget:self action:@selector(tapMenu1:) forControlEvents:UIControlEventTouchDown];
[menuView addSubview:menuButton1];

// メニュー2ボタン
UIButton* menuButton2 = [[UIButton alloc]init];
menuButton2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
menuButton2.frame = CGRectMake(0, 0, menuView.bounds.size.width, menuView.bounds.size.height/4);
menuButton2.center = CGPointMake(menuView.bounds.size.width/2, menuView.bounds.size.height/4 * 2);
[menuButton2 setTitle:@"メニュー2" forState:UIControlStateNormal];
[menuButton2 addTarget:self action:@selector(tapMenu2:) forControlEvents:UIControlEventTouchDown];
[menuView addSubview:menuButton2];

// キャンセルボタン
UIButton* cancelButton = [[UIButton alloc]init];
cancelButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
cancelButton.frame = CGRectMake(0, 0, menuView.bounds.size.width, menuView.bounds.size.height/4);
cancelButton.center = CGPointMake(menuView.bounds.size.width/2, menuView.bounds.size.height/4 * 3 + 10);
[cancelButton setTitle:@"キャンセル" forState:UIControlStateNormal];
[cancelButton addTarget:self action:@selector(cancelMenu:) forControlEvents:UIControlEventTouchDown];
[menuView addSubview:cancelButton];
}

// メニューをしたからスライドさせて表示する。
- (void)menuOpen:(id)sender{
[UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
menuView.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height - menuView.bounds.size.height/2);

// 背景をタップしたときにキャンセルできるようにボタンを設置
viewOverButton = [[UIButton alloc]init];
viewOverButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
viewOverButton.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height - menuView.bounds.size.height);
viewOverButton.backgroundColor = [UIColor lightGrayColor];
viewOverButton.alpha = 0.3;
[viewOverButton addTarget:self action:@selector(cancelMenu:) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:viewOverButton];

}completion:nil];
}

// メニュー1が押された時の処理
- (void)tapMenu1:(id)sender{
NSLog(@"メニュー1");
}

- (void)tapMenu2:(id)sender{
NSLog(@"メニュー2");
}

- (void)cancelMenu:(id)sender{
viewOverButton.hidden = YES;
[UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
menuView.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height + menuView.bounds.size.height);
}completion:nil];
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end
スポンサーサイト


このエントリーをはてなブックマークに追加

テーマ : iPhoneアプリ
ジャンル : 携帯電話・PHS

コメントの投稿

非公開コメント

博多でオススメのお店
プロフィール

ぽてぴ×ひろし

Author:ぽてぴ×ひろし
訪問ありがとうございます。
しゅふ友2人(主婦&主夫)で始めたブログです。
日々の出来事、つぶやき、お役立ち情報などなど書いていこうと思ってます。

ブログを書いてる人
その①主婦ぽてぴ
 主婦歴:8年
 家族:旦那クンと猫2匹
 得意技:怪しい創作料理
     家事手抜き技の探求
 趣味:アンチエイジング奮闘

その②主夫ひろし
 主婦歴:1か月
 家族:嫁サンと2人暮らし
 得意技:けさ固め、体落とし
 趣味:焼酎を飲みながらプリン
    体と奮闘中

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
楽天
オススメサイト
ブログランキング
↓ポチッ!お願いします♪
iPhoneアプリ
はかたべんももたろう
カテゴリ: 教育, エンターテインメント
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa

Horror Surprised !! 〜どきどきホラー!
カテゴリ: エンターテインメント, ライフスタイル
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa
計画タイマーまねじめん
カテゴリ: ライフスタイル, フード/ドリンク
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa
5文字に思いを込めろ!
カテゴリ: エンターテインメント, ライフスタイル
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa
TOEIC攻略タイマー
カテゴリ: 教育, ビジネス
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa
お買い物べんり電卓〜直感で簡単操作〜
カテゴリ: ライフスタイル, フード/ドリンク
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


動画:お買い物べんり電卓〜直感で簡単操作〜

脳トレとぅんとぅん
カテゴリ: ゲーム, 教育, 教育, スポーツ
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


円スケジュール-1日を素早く計画
カテゴリ: ライフスタイル, 仕事効率化
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


にこにこサッカー
カテゴリ: ゲーム, エンターテインメント, アクション, スポーツ
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


Todoリスト-優先度で簡単仕分け
カテゴリ: 仕事効率化, ビジネス
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


Twitter
食品&飲料
RSSリンクの表示
電子書籍
amazon
ヘルス&ビューティー
リンク
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。