ViewDeck(Storyboardで利用する)

Posted by On 8月 11, 2013 0 Comment

Facebook likeなスライディングメニューを実装するViewDeck()使い方も簡単でgit hubにばっちり説明してあります。しかし, storyboard上から利用する方法を考えるとちょっと迷います。
そのためのメモです。

今回作成した結果です。
viewdeck-top

viewdeck-menu

今回作成したものは左側にメニューっぽいものを表示させるものです。ViewDeckは,右側もばっちりサポートしていますが, 今回は使用しておりません。

AppDelegateスタート画面に実装する場合

  1. Story上でUIを作成
  2. 各ViewControllerに, Storyboard IDをつける
  3. ViewControllerにスライド用のActionを実装
  4. AppDelegateにIIViewDeckControllerを作ってrootViewControllerに設定

Storyboard上にUIをつくる

Navigation barでもなんでもよいので, Menu viewを呼び出すためのボタンなどを作ります。各Viewごとに
ViewControllerをつくります。

storyboard-viewdeck

各ViewControllerに, Storyboard IDをつける

Storyboard IDをつけて, コードからコントローラを呼び出す体制をつくります。

storyboardID

Centerで使用する部分に, CenterView, メニューとして使う左側の部分に, LeftViewと名付けました。

ViewControllerにスライドをするためのActionを実装

CenterであるViewControllerにアクションを実装します。これをNavigation Barのボタンに接続します。

- (IBAction)leftClick:(id)sender
{
    [self.viewDeckController toggleLeftViewAnimated:YES];
}

これでスライドメニューを表示•非表示にするアクションが実装できました。

AppDelegateの実装

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.rootViewController = [self generateControllerStack];
    [self.window makeKeyAndVisible];    
    return YES;
}

- (IIViewDeckController*)generateControllerStack
{
    UIStoryboard *mystoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
    MenuViewController *leftController = [mystoryboard instantiateViewControllerWithIdentifier:@"LeftView"];
    
    UIViewController *centerController = [mystoryboard instantiateViewControllerWithIdentifier:@"CenterView"];
    
    IIViewDeckController* deckController =  [[IIViewDeckController alloc] initWithCenterViewController:centerController leftViewController:leftController                                                                               rightViewController:nil];
    deckController.rightSize = 100;
    
    [deckController disablePanOverViewsOfClass:NSClassFromString(@"_UITableViewHeaderFooterContentView")];
    return deckController;
}

storyboardから, 各ViewControllerを取得します。
IIViewDeckControllerのインスタンスを作成して, center, left, rightにかくViewController を割り当てます。
いらない場合はnilにしておきます。
最後に, windowのrootViewControllerに設定すれば, 最初の画面の場合はO.K.です。

AppDelegate以外つまり2ページ目以降に実装する場合

ページの途中で必要な場合上とは違う工夫が必要になります。
CenterとなるViewControllerを作成します。 (IIViewDeckControllerを拡張します)。
– (id)initWithCoder:(NSCoder *)aDecoderというメソッドをOverrideします。
この中で, AppDelegateでやったことと同じようなコードを実装します。 

- (id)initWithCoder:(NSCoder *)aDecoder
{
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
    ViewController1 *centerController = [storyboard instantiateViewControllerWithIdentifier:@"ViewController1"];
    ViewController2 *leftController = [storyboard instantiateViewControllerWithIdentifier:@"ViewController2"];
    
    
    self = [super initWithCenterViewController:centerController
                            leftViewController:leftController];
    
    self.centerhiddenInteractivity = IIViewDeckCenterHiddenNotUserInteractiveWithTapToClose;　// Disable touch event when switch other view.
    self.viewDeckController.bounceOpenSideDurationFactor = 0.3f;
    
    if (self) {
        // Add any extra init code here
    }
    return self;
}

こんな感じです。これらを管理するための別のViewControllerにこいつを実装します。やっていることはAppDelegateと同じですが,
ViewControllerに実装するのがこつです。

TOPICS