Configuring MMDrawer for Side Drawer Navigation on iOS - Part II
In an earlier post, I presented an example of setting up the side drawer navigation pattern for iOS using Storyboards and posted an example project based on the described set up. This post expands on that set up to add some basic configuration to the side drawer.
In the example app, the side drawer is first initialized when the DRAWER_SEGUE is triggered. All the configuration for MMDrawerController should be done in the prepareForSegue: for this segue. Here’s the basic configuration that we have for the drawer controller in PGViewController.m where we get the MMDrawerController instance from the segue and set a centerViewController and a leftDrawerViewController.
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
if ([segue.identifier isEqualToString:@"DRAWER_SEGUE"]) {
MMDrawerController *destinationViewController = (MMDrawerController *) segue.destinationViewController;
// Instantitate and set the center view controller.
UIViewController *centerViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"FIRST_TOP_VIEW_CONTROLLER"];
[destinationViewController setCenterViewController:centerViewController];
// Instantiate and set the left drawer controller.
UIViewController *leftDrawerViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"SIDE_DRAWER_CONTROLLER"];
[destinationViewController setLeftDrawerViewController:leftDrawerViewController];
}
}Let’s add a few more configuration options to the drawer to enable gesture support for opening and closing the drawer controller, a maximum drawer width and a parallax animation.
// Set maximum drawer width
destinationViewController.maximumLeftDrawerWidth = 254;
// Use all gestures for closing the drawer
destinationViewController.closeDrawerGestureModeMask = MMCloseDrawerGestureModeAll;
// Open the drawer only when panning the center view from the edge
destinationViewController.openDrawerGestureModeMask = MMOpenDrawerGestureModeBezelPanningCenterView;
// Set a parallax animation for opening drawer
[destinationViewController setDrawerVisualStateBlock:[MMDrawerVisualState parallaxVisualStateBlockWithParallaxFactor:5]];MMDrawerController also comes with a built in menu button. Let’s see how we can add it to a controller.
- (void)setupLeftMenuButton {
MMDrawerBarButtonItem * leftDrawerButton = [[MMDrawerBarButtonItem alloc] initWithTarget:self action:@selector(leftDrawerButtonPress:)];
[self.navigationItem setLeftBarButtonItem:leftDrawerButton];
}
- (void)leftDrawerButtonPress:(id)leftDrawerButtonPress {
[self.mm_drawerController toggleDrawerSide:MMDrawerSideLeft animated:YES completion:nil];
}Starting from iOS7, the views are drawn beneath the status bar. If you want to control the style of the status bar when the side drawer is opened, all you need is to override the preferredStatusBarStyle in the controller that is set as the [left|right]DrawerViewController (PGSideDrawerController in the example project).
#pragma mark - Status Bar
-(UIStatusBarStyle)preferredStatusBarStyle{
return UIStatusBarStyleLightContent;
}