Have you ever wanted to build an app with a styled menu that slides out from the left or right like Facebook and YouTube? Now you can easily add this functionality to your apps with a great framework called Mutual Mobile Drawer Controller (MMDrawerController). It was developed by the fine folks at Mutual Mobile.
MMDrawerController is a side drawer navigation container view controller designed to support the growing number of applications that leverage the side drawer paradigm. This library is designed to exclusively support side drawer navigation in a light-weight, focused approach while exposing the ability to provide custom animations for presenting and dismissing the drawer.
Setting up MMDrawerController
Follow the steps below to get started:1. Visit the GitHub page here:https://github.com/mutualmobile/MMDrawerController.
2. Pull or download the latest version of the source code.
3. Add the following files into your project:
- MMDrawerBarButtonItem.h
- MMDrawerBarButtonItem.m
– MMDrawerController.h
– MMDrawerController.m
– MMDrawerController+Subclass.h
– MMDrawerVisualState.h
– MMDrawerVisualState.m
– UIViewController+MMDrawerController.h
– UIViewController+MMDrawerController.m
4. Include the following header at the top of your App Delegate:
- #import “MMDrawerController.h”
– #import “MMDrawerVisualState.h”
5. Start coding!
Creating a MMDrawerController is as easy as creating a center view controller and the drawer view controllers, and init’int the drawer. Add this to your App Delgate since the drawerController should be your root controller within your app.
@interface MMAppDelegate ()
@property (nonatomic,strong) MMDrawerController * drawerController;
@end
@implementation MMAppDelegate
-(BOOL)application:(UIApplication *)application willFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
UIViewController * leftSideDrawerViewController = [[MMExampleLeftSideDrawerViewController alloc] init];
UIViewController * centerViewController = [[MMExampleCenterTableViewController alloc] initWithStyle:UITableViewStyleGrouped];
UIViewController * rightSideDrawerViewController = [[MMExampleRightSideDrawerViewController 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;
}
MMDrawerController is highly customizable. Here’s a quick list of the built in animations:
- Slide: The drawer slides at the same rate as the center view controller.
- Slide and Scale: The drawer slides and scales up, while also alpha’ing from 0.0 to 1.0.
- Swinging Door: The drawer swings in along a hinge on the center view controller.
- Parallax: The drawer slides in at a slower rate, giving a parallax effect.
There are also some other nice features such as UIGestureRecognizer support, customizable drawer menu button, and a stretch animation effect.
