iOS左滑抽屉效果的实现

前言

在最近的项目需求中需要实现左滑抽屉的效果，经过调研，使用一个经典的第三方库来实现，MMDrawerController。网上查到的资料都是纯代码实现的。在本文中，结合storyboard和第三方库MMDrawerController，实现左滑抽屉效果，使原工程结构不被破坏。

实现效果

实现效果

使用到的类库

MMDrawerController：一个第三方左滑和右滑的类库，可以定制左滑和右滑的width，以及效果和阴影等。

实现

1. 使用cocoapods导入MMDrawerController；

pod 'MMDrawerController'
$ pod update

2. 使用storyboard构建页面，在这里就不进行说明，但是要注意的是在Storyboard ID处标明controller的ID。如中间的导航标为centernav，左侧的标为leftvc；
3. 在工程的target页面处，去掉Main Interface，即使用代码在AppDelegate中进行控制页面；
4. AppDelegate.m中控制页面的实现；

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    UIStoryboard* mainSB = [UIStoryboard storyboardWithName: @"Main"
                                                     bundle: [NSBundle mainBundle]];
    UIViewController* leftVC = [mainSB instantiateViewControllerWithIdentifier:
                                @"leftvc"];
    UINavigationController* centerNav = [mainSB
                                         instantiateViewControllerWithIdentifier:
                                         @"centernav"];
    
    self.drawerVC = [[MMDrawerController alloc]
                     initWithCenterViewController: centerNav
                     leftDrawerViewController: leftVC];
    
    self.drawerVC.maximumLeftDrawerWidth = 275.0f;
    self.drawerVC.shouldStretchDrawer = YES;
    self.drawerVC.showsShadow = NO;
    
    [self.drawerVC setOpenDrawerGestureModeMask: MMOpenDrawerGestureModeAll];
    [self.drawerVC setCloseDrawerGestureModeMask: MMCloseDrawerGestureModeAll];
    
    self.window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen].bounds];
    self.window.rootViewController = self.drawerVC;
    
    [self.window makeKeyAndVisible];
    
    return YES;
}

在代码中，drawerVC使用@Property写在AppDelegate.h中，以便实现中间页面导航左边按钮的方便。另外，self.window需要alloc下，然后再设置rootViewController。

5. 中间界面导航左侧按钮点击触发的action实现。

- (IBAction)leftBBIAction:(UIBarButtonItem *)sender {
    AppDelegate* appDelegate = (AppDelegate*)[UIApplication
                                              sharedApplication].delegate;
    
    [appDelegate.drawerVC toggleDrawerSide: MMDrawerSideLeft animated: YES
                                completion: nil];
}

主要是获取APP的代理对象AppDelegate，然后调用drawerVC的toggleDrawerSide方法。

至此，结合storyboard，左滑的功能便实现了。右滑的实现类似，即加入rightDrawerController即可。

结束语

实现抽屉效果看起来有些难度，当认真调研了第三方库后，结合工程的情况，调用相应的方法便比较容易的实现。有一句话笔者在这里想引用一下：难的不是事情本身，而是如何找到解决事情的思路和方法。因此在考虑事情时，不要被困难吓倒，不要因为困难而逃避，勇于向前，脚踏实地，才能更好的解决，从而make a progress。
目前代码已经托管至github，有兴趣的老铁可以下载下来研究一下。

https://github.com/njim3/MMDrawerStoryboardDemo