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