iOS实现简单的抽屉式侧栏——MMDrawerController的使用

在最近的一个项目中须要制做一个抽屉式的侧栏，便简单上网找了找，目前了解到的能够经过MMDrawerController和SWRevealViewController这两个第三方的frameworks作出抽屉式侧栏的效果。这两个frameworks均可以在Github上搜到，有兴趣的同窗均可以看看。我在项目中用的是MMDrawerController，至于为何，缘由很简单，由于MMDrawerController的star比较多。。。因此这篇文章也是记录一下我使用MMDrawerController的过程和问题。

新建项目

新建一个名叫MMDrawerControllerDemo的项目，language选择Swift，storyboard示意图以下，具体过程就不写了，中间是一个Button，将起始页面的title改成Home，也就是主页。

新建一个文件，选择cocoa touch class，命名为SecondViewController

在storyboard中选择右边的ViewController，在identity inspector中将其class设置为SecondViewController，同时设置一个storyboard ID

导入MMDrawerController

由于方便在项目中使用，我是使用了cocoapods，至于如何使用cocoapods，不会的同窗就自行百度一下吧，这种小问题还不须要Google出马。

建立侧栏

新建一个文件，一样是选择cocoa touch class，命名为LeftDrawerViewController。

其实能够同时在主页的左右两边各添加一个侧栏，可是我这里仅仅是在左侧添加。
接下来，在viewDidLoad()方法以前加上：

var tableView: UITableView!

在viewDidLoad()方法的最后加上：

tableView = UITableView(frame: CGRectZero, style: .Plain)
tableView.frame = CGRect(x: 0, y: 0, width: self.view.bounds.size.width, height: self.view.bounds.size.height)
tableView.delegate = self
tableView.dataSource = self
view.addSubview(tableView)
        
tableView.registerNib(UINib(nibName: "LeftDrawerTableViewCell", bundle: nil), forCellReuseIdentifier: "LeftDrawerTableViewCell")

在class的外部加上如下代码：

// MARK: - table view delegate, table view datasource
extension LeftDrawerViewController: UITableViewDataSource, UITableViewDelegate {

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("LeftDrawerTableViewCell", forIndexPath: indexPath) as! LeftDrawerTableViewCell
        return cell
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }
}

其中的LeftDrawerTableViewCell是我新建的一个继承自UITableViewCell的Swift文件，关于UITableView具体的这里就不讲了，不是重点，若是不会的就自行百度或者Google吧。

使用MMDrawerController

以前已经经过cocoapods导入了MMDrawerController，如今就开始使用MMDrawerController。
打开AppDelegate.swift
在didFinishLaunchingWithOptions方法的上方添加如下代码：

var centerContainer: MMDrawerController!

这时候Xcode会报一个警告，'Use of undeclared type MMDrawerController'

由于是从cocoapods导入的，因此须要在class上方添加

import MMDrawerController

可是这时候Xcode又会报一个警告，'No such module MMDrawerController'

对于这个问题的解决办法，我是新建了一个名为MMDrawerControllerDemo-Bridge-Header.h的header文件，添加如下代码便可：

#import <MMDrawerController/MMDrawerController.h>

而后在Build Settings中找到Objective-C Bridging Header这一项，写上MMDrawerControllerDemo-Bridge-Header.h这个文件在本项目中的路径，这样一来，项目就能够正常运行了，可是为何须要这个文件，我目前还不是很清楚。

继续回到AppDelegate.swift这个文件
在didFinishLaunchingWithOptions方法中添加如下代码：

let mainStoryboard = UIStoryboard(name: "Main", bundle: nil)
        
let centerViewController = mainStoryboard.instantiateViewControllerWithIdentifier("HomePageViewController") as! ViewController
let leftDrawerViewController = LeftDrawerViewController()
        
let centerNav = UINavigationController(rootViewController: centerViewController)
        
centerContainer = MMDrawerController(centerViewController: centerNav, leftDrawerViewController: leftDrawerViewController)
        
centerContainer.openDrawerGestureModeMask = .PanningCenterView
centerContainer.closeDrawerGestureModeMask = .PanningCenterView
        
window?.rootViewController = centerContainer
window?.makeKeyAndVisible()

如今能够将项目运行起来看下效果了。

添加子页面

返回到storyboard，在项目的一开始，我建立了一个名叫SecondViewController的ViewController。
选择“下一页”按钮，control+drag到SecondViewController，选择push

这时候再次运行程序，进入到第二个页面以后，会发如今第二个页面一样可以显示出侧栏，可是通常来讲，应该只有主页可以显示出侧栏。

如今我讲一下我选择的方法来解决这个问题。
回到AppDelegate.swift
将如下两行代码注释，若是你想删了也随意：

centerContainer.openDrawerGestureModeMask = .PanningCenterView
centerContainer.closeDrawerGestureModeMask = .PanningCenterView

打开ViewController.swift
在viewDidLoad()以后加入如下代码：

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
        
    let appDelegte = UIApplication.sharedApplication().delegate as! AppDelegate
    appDelegte.centerContainer.openDrawerGestureModeMask = .PanningCenterView        
    appDelegte.centerContainer.closeDrawerGestureModeMask = .PanningCenterView
}
    
override func viewDidDisappear(animated: Bool) {
    super.viewDidDisappear(animated)
        
    let appDelegte = UIApplication.sharedApplication().delegate as! AppDelegate
    appDelegte.centerContainer.openDrawerGestureModeMask = .None
    appDelegte.centerContainer.closeDrawerGestureModeMask = .None
}

如今看下运行效果就正常了。

添加BarButtonItems

继续在ViewController.swift，添加如下代码：

override func viewDidLoad() {
        super.viewDidLoad()
        
        navigationItem.leftBarButtonItem = UIBarButtonItem(image: UIImage(named: "menu.png"), style: .Plain, target: self, action: "sideMenuTapped:")
    }
    
    func sideMenuTapped(sender: UIBarButtonItem) {
        
        let appDelegate = UIApplication.sharedApplication().delegate as! AppDelegate
        appDelegate.centerContainer.toggleDrawerSide(MMDrawerSide.Left, animated: true, completion: nil)
    }

到此这个demo就完成了，demo地址Github