ナビゲーションバーの下から出てくる簡易的なメニューUIを作ってみました。
ナビゲーションバー上の「Menu」ボタンをタップすると、メニュー画面が出てきます。メニュー上のボタンを押すとメインのView(青のView)上のテキストが変わります。
Single View Application テンプレートを元に作成しました。
MenuView
UIViewを継承した”MenuView”クラスを作成してメニュー画面を実現しました。
メニューのレイアウトは.xibファイルで定義し、ボタンを押した際の動きなどは実装ファイルに記述しています。
- “MenuView”クラスの役割
- メニュー画面の動きを実現する
- メニュー開閉状態の保持する
- どのボタンが押されたかをメインのViewControllerへ伝達する
例えば、メニューを開く時に呼ばれるメソッドは、以下のようになっていて(MenuView.m)、アニメーションさせながらViewの座標をずらしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
- (void)openMenuView { // Set new origin of menu CGRect menuFrame = self.frame; menuFrame.origin.y = menuFrame.origin.y + 60.0; [UIView animateWithDuration:0.3f delay:0.05f options:UIViewAnimationOptionCurveEaseInOut animations:^{ self.frame = menuFrame; } completion:^(BOOL finished){ self.isMenuOpen = YES; }]; [UIView commitAnimations]; } |
また、メニュー内のボタンが押されたことをメインのViewControllerに伝達するためにDelegateを使っています。
MenuView.hファイル内で、以下のように”MenuViewDelegate”プロトコルを定義しています。
|
1 2 3 4 5 |
@protocol MenuViewDelegate <NSObject> - (void)menuViewDidSelectedItem:(MenuView *)menuView type:(MenuViewSelectedItemType)type; @end |
ViewController
Single View Application テンプレート作成時に生成されるViewControllerに少しだけ手を加えています。
- “ViewController”クラスの役割
- MenuViewインスタンスの作成して保持し、MenuViewインスタンスをself.Viewのサブビューに追加する
- ナビゲーションバー上の「Menu」ボタンがタップされた時に、タップされたことをMenuViewへ伝達する
- MenuView表示時に半透明グレーのViewを表示する
- MenuViewDelegateプロトコルで定義したメソッドを実装し、そのメソッド内でラベルテキストの変更を行う
プロジェクトファイル
作成したプロジェクトファイルはGitHubで公開しています。
参考ページ
nmattissonさんのDropdownMenuというライブラリを参考に作成しました。
プロジェクト作成時にローカルリポジトリを作成し、GitHubのリポジトリにPushしました。今回、GitHubのリポジトリへのPushを初めて行ったのですが、以下のページを参考にしながら作業しました。
- ローカルで作ったリポジトリをgithubに初めてpushする方法
- ssh-keygenコマンドで秘密鍵・公開鍵生成メモ
- 今さら聞けないXcodeのバージョン管理 Gitの基本的な使い方からGitHubへソースコードを公開するまで
ちなみに、この記事とGitHubのReadmeに貼り付けているGifアニメはLICEcapというアプリで作成しました。
また、ソースコードのハイライトは”Crayon Syntax Highlighter”というプラグインを使用しています。