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

2024年3月7日 169次阅读 来源: afishhhhh

在最近的一个项目中需要制作一个抽屉式的侧栏，便简单上网找了找，目前了解到的可以通过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

    原文作者：afishhhhh
    原文地址: https://segmentfault.com/a/1190000004558433
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞