MMDrawerController Library to work with storyboard

Question

So I've recently come across this pretty neat library, MMDrawerController. I've managed to install it and initialized it with the code below in appDelegate.m.

-(BOOL)application:(UIApplication *)application willFinishLaunchingWithOptions:(NSDictionary *)launchOptions{

UIViewController * leftSideDrawerViewController = [[LeftViewController alloc] init];

UIViewController * centerViewController = [[CenterViewController alloc] init];

UIViewController * rightSideDrawerViewController = [[RightViewController alloc] init];

UINavigationController * navigationController = [[UINavigationController alloc] initWithRootViewController:centerViewController];
[navigationController setRestorationIdentifier:@"MMExampleCenterNavigationControllerRestorationKey"];

self.drawerController = [[MMDrawerController alloc]
                         initWithCenterViewController:navigationController
                         leftDrawerViewController:leftSideDrawerViewController
                         rightDrawerViewController:rightSideDrawerViewController];
[self.drawerController setRestorationIdentifier:@"MMDrawer"];
[self.drawerController setMaximumRightDrawerWidth:200.0];
[self.drawerController setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeAll];
[self.drawerController setCloseDrawerGestureModeMask:MMCloseDrawerGestureModeAll];

[self.drawerController
 setDrawerVisualStateBlock:^(MMDrawerController *drawerController, MMDrawerSide drawerSide, CGFloat percentVisible) {
     MMDrawerControllerDrawerVisualStateBlock block;
     block = [[MMExampleDrawerVisualStateManager sharedManager]
              drawerVisualStateBlockForDrawerSide:drawerSide];
     if(block){
         block(drawerController, drawerSide, percentVisible);
     }
 }];
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
[self.window setRootViewController:self.drawerController];


  return YES;
}

However, everything in my storyboard is now covered in black (caused by the code above "overriding" storyboard's xml code)when I build the app. How can I properly integrate this library along with storyboard?

Answer 1

Following is what needs to be done:-

1) Create 3 Views in your Storyboard and give both Class and Storyboard ID to each of them.

2) Embed your Centre View Controller in Navigation Controller i.e. Click on your Centre view and then click on "Editor" => "Embed In" => "Navigation Controller"

3) Go to following github link:-

https://github.com/mutualmobile/MMDrawerController and download file MMDrawerController Zip file from there.

4) Include following files from above github project to your project by right clicking your project and choosing "Add Files to " :-

• MMExampleDrawerVisualStateManager.h
• MMExampleDrawerVisualStateManager.m
• MMDrawerBarButtonItem.h
• MMDrawerBarButtonItem.m
• MMDrawerController.h
• MMDrawerController.m
• MMDrawerController+Subclass.h
• MMDrawerVisualState.h
• MMDrawerVisualState.m
• UIViewController+MMDrawerController.h
• UIViewController+MMDrawerController.m

5) Finally go to AppDelegate.m file and within didFinishLaunchingWithOptions function type following code:-

Objective-C

UIStoryboard *storyboard;

storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
UIViewController * leftSideNavController =
[storyboard instantiateViewControllerWithIdentifier:
 @"leftViewController"];

UIViewController * centerSideNavController =
[storyboard instantiateViewControllerWithIdentifier:
 @"ViewController"];

UIViewController * rightSideNavController =
[storyboard instantiateViewControllerWithIdentifier:
 @"rightViewController"];



self.drawerController =
[[MMDrawerController alloc]
 initWithCenterViewController:centerSideNavController
 leftDrawerViewController:leftSideNavController
 rightDrawerViewController:rightSideNavController];

[self.drawerController setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeAll];
[self.drawerController setCloseDrawerGestureModeMask:MMCloseDrawerGestureModeAll];


[self.window setRootViewController:self.drawerController];
/* Optional - To define Drawer width */
[self.drawerController setMaximumRightDrawerWidth:280.0];

[self.drawerController setMaximumLeftDrawerWidth:280.0];

[self.window makeKeyAndVisible];

Swift 2.2

let mainStoryBoard: UIStoryboard = UIStoryboard(name: "Main", bundle: nil)
let centerVC = mainStoryBoard.instantiateViewControllerWithIdentifier("Home") as! HomeVC

let leftVCs = mainStoryBoard.instantiateViewControllerWithIdentifier("Left") as! LeftVC

let rightVCs = mainStoryBoard.instantiateViewControllerWithIdentifier("Right") as! RightVC

let rightSideNav =  UINavigationController(rootViewController: rightVCs)
let leftSideNav =  UINavigationController(rootViewController: leftVCs)

let centerSideNav = UINavigationController(rootViewController: centerVC)

centerContainer = MMDrawerController(centerViewController: centerSideNav, leftDrawerViewController: leftSideNav, rightDrawerViewController: rightSideNav)

centerContainer!.openDrawerGestureModeMask = MMOpenDrawerGestureMode.PanningCenterView
centerContainer!.closeDrawerGestureModeMask = MMCloseDrawerGestureMode.PanningCenterView
                  centerContainer?.setDrawerVisualStateBlock(MMDrawerVisualState.swingingDoorVisualStateBlock())

window!.rootViewController = centerContainer
window!.makeKeyAndVisible()

Note: Add var centerContainer: MMDrawerController? within AppDelegate class globally in case of Swift version.

Answer 2

if you want drawer in storyboard than used this library i already used in many projects Drawer.

Answer 3

Have a look on this, https://github.com/TomSwift/MMDrawerController-Storyboard

Its a category for MMDrawerController works like a charm with storyboard!

Answer 4

Just an addition to Meet Shah's answer, If some one is missing navigation bar in center controller then just add a below code in between his code

UINavigationController * navigationController = [[UINavigationController alloc] 
    initWithRootViewController:centerSideNavController];
self.drawerController = [[MMDrawerController alloc]
     initWithCenterViewController:navigationController
     leftDrawerViewController:leftSideNavController
     rightDrawerViewController:rightSideNavController];

hope that helps some one.