2013年08月27日

横スライドメニューを試してみた

ECSlidingViewControllerで横スライドメニューを実装

横スライドメニューを実装するECSlidingViewControllerというライブラリがあるようなので、試してみたいと思います。

● 準備作業

プロジェクトは「SingleViewApplication」で制作します。

ECSlidingViewControllerというライブラリを使用するので、edgecase/ECSlidingViewController・Githubで、「Download ZIP」をクリックして、ライブラリデータをダウンロードします。ダウンロードしたらデータを解凍して、Xcodeに「ECSlidingViewController」フォルダをコピーします。
※「ECSlidingViewController」フォルダは、「Vendor」の中に入っています。必要なファイルは、ECSlidingViewController.h/m、UIImage+ImageWithUIView.h/mです。

● ストーリーボードの設定

ストーリーボードに既に配置してあるViewControllerのCustomClassに「ECSlidingViewController」と設定します。


ECSlidingViewControllerを使用するには、ECSlidingViewControllerオブジェクトをrootViewControllerに設定し、最初に表示するビューコントローラーをtopViewControllerに、左側に表示するビューコントローラーをunderLeftViewControllerに設定する必要があります。

● 最初に表示するビューコントローラーを作成

新規クラス「TopViewController」を「UIViewController」を継承して作成します。また、ストーリーボード上にUIViewControllerを追加して、CustomClassに「TopViewController」とStoryboardIDに「Top」と設定します。


また、ストーリーボード上にNavigation BarとButton Itemを追加します。

● 左側に表示するビューコントローラーを作成

新規クラス「MenuViewController」を「UITableViewController」を継承して作成します。また、ストーリーボード上にTableViewControllerを追加して、CustomClassに「MenuViewController」と、StoryboardIDに「Menu」と設定します。

また、TableViewController内のTableViewCellのIdentifierに「Cell」と設定します。
※これをしないとエラーが出ます。

● MenuViewController.m

テスト的に表示させるための最低限のコードを記述します。

#import "MenuViewController.h"

@implementation MenuViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 10;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
    cell.textLabel.text = @"Menu";
    return cell;
}

@end

● AppDelegate.m

didFinishLaunchingWithOptions:で必要な設定をします。

#import "ECSlidingViewController.h"
#import "AppDelegate.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    //ECSlidingViewControllerオブジェクトを取得
    ECSlidingViewController *slidingViewController = (ECSlidingViewController *)self.window.rootViewController;

    //ストーリーボードを取得
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];

    //TopViewControllerを取得して、ECSlidingViewControllerのtopViewController に設定
    slidingViewController.topViewController = [storyboard instantiateViewControllerWithIdentifier:@"Top"];
    
    return YES;
}
@end

● TopViewController.h

TopViewController上に配置したButton Itemをタップした際のIBActionを宣言します。また、ストリーボード上で、IBActionとButton Itemを接続します。

#import <UIKit/UIKit.h>

@interface TopViewController : UIViewController

- (IBAction)revealMenu:(id)sender;

@end

● TopViewController.m

TopViewController.mは下記になります。これで、ボタンをタップしたら画面がスライドするインターフェースが実装できます。

#import "TopViewController.h"
#import "ECSlidingViewController.h"
#import "MenuViewController.h"

@implementation TopViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    
    //シャドウの設定
    self.view.layer.shadowOpacity = 0.5f;
    self.view.layer.shadowRadius = 5.0f;
    self.view.layer.shadowColor = [UIColor grayColor].CGColor;
    
    //MenuViewControllerを取得して、ECSlidingViewControllerのunderLeftViewController に設定
    if (![self.slidingViewController.underLeftViewController isKindOfClass:[MenuViewController class]]) {
        self.slidingViewController.underLeftViewController  = [self.storyboard instantiateViewControllerWithIdentifier:@"Menu"];
    }
    
    [self.view addGestureRecognizer:self.slidingViewController.panGesture];
    [self.slidingViewController setAnchorRightRevealAmount:265.0f];
}

-(IBAction)revealMenu:(id)sender
{
    //スライドさせる
    [self.slidingViewController anchorTopViewTo:ECRight];
}

@end
  • このエントリーをはてなブックマークに追加
前の記事へ

UIViewのタップを検知

次の記事へ

IoTって何?を調べてみた