Swift使用MMDrawerController框架打造通用侧滑抽屉效果模版

这篇文章使用快速的、方便的的实现方法来构建和facebook一样的”滑出式导航”。 包括官方在内，资料都是使用oc来完成效果的实现，自己就使用Swift纯代码来构建，以后也可以慢慢使用到较大项目中。

对于这个导航的实现，已经有了非常优秀的第三方库来供我们使用：John-Llunch的SWRevealViewController 和Mutual Mobile的MMDrawerController，这里我使用的是MMDrawerController，有兴趣的可以使用SWRevealViewControler来实现一遍。

开始实战：

第一步：使用Cocoapods导入框架

  pod 'MMDrawerController', '~> 0.5.7'

第二步：初始化根试图、左视图和中心视图（这里只做了左视图，右视图类似）

  var window: UIWindow?

    var drawerController:MMDrawerController!
    
    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

        //创建窗口
        let mainFrame = UIScreen.mainScreen().bounds
        window = UIWindow(frame: mainFrame)
        //设置视图
        let leftViewController = LeftViewController()
        let centerViewController = CenterViewController()
        
        let centerNavigationController = UINavigationController(rootViewController: centerViewController)
        //let leftNavigationController = UINavigationController(rootViewController: leftViewController)
        
        drawerController = MMDrawerController(centerViewController: centerNavigationController, leftDrawerViewController: leftViewController)
        
        drawerController.maximumLeftDrawerWidth = Common.screenWidth * 0.70
        //手势
        drawerController.openDrawerGestureModeMask = MMOpenDrawerGestureMode.All
        drawerController.closeDrawerGestureModeMask = MMCloseDrawerGestureMode.All
        
        //设置动画，这里是设置打开侧栏透明度从0到1
        drawerController.setDrawerVisualStateBlock { (drawerController, drawerSide, percentVisible) -> Void in
            
            var sideDrawerViewController:UIViewController?
            if(drawerSide == MMDrawerSide.Left){
                sideDrawerViewController = drawerController.leftDrawerViewController;
            }
            sideDrawerViewController?.view.alpha = percentVisible
        }
        //设置根试图
        self.window?.rootViewController = drawerController
        //设置可见
        window?.makeKeyAndVisible()
        return true
    }

针对第二步，基本属性和方法的使用请参考Github的文档介绍，可以参考oc的讲解和这里的Swift代码来理解。

第三步：增加按钮来控制拉出和收回抽屉

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor.whiteColor()
        
        navigationItem.title = “主页”
        self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: UIImage(named: “Done”), style: UIBarButtonItemStyle.Plain, target: self, action: “doneSlide”)
    }
   
    func doneSlide(){
        
        let appDelegate = UIApplication.sharedApplication().delegate as! AppDelegate
        appDelegate.drawerController.toggleDrawerSide(MMDrawerSide.Left, animated: true, completion: nil)

    }

针对第三步，我觉得比较难理解的地方是toggleDrawerSlide方法，框架里源代码注释为：

注释
Toggles the drawer open/closed based on the drawer passed in. 
  Note that if you attempt to toggle a drawer closed while the other is open, nothing will happen. For example, if you pass in MMDrawerSideLeft, but the right drawer is open, nothing will happen. In addition, the completion block will be called with the finished flag set to NO.
 @param drawerSide The MMDrawerSide to toggle. This value cannot be MMDrawerSideNone.
 @param animated Determines whether the drawer should be toggle animated.
 @param completion The block that is called when the toggle is complete, or if no toggle took place at all.

自行翻译��，大概意思就是控制抽屉的开关
####第四步：使用TableVIew实现左侧划页面
代码太多，只张贴部分，项目代码可以去源代码下载

  tableView = UITableView(frame: CGRectMake(0, 0,       Common.screenWidth * 0.7, view.frame.height), style: UITableViewStyle.Plain)

        tableView.delegate = self
        tableView.dataSource = self
        tableView.separatorStyle = UITableViewCellSeparatorStyle.SingleLine
        view.addSubview(tableView)
        
        //设置headView
        let headImageViewHight: CGFloat = 160
        let headImageView = UIImageView(frame: CGRectMake(0, 0, Common.screenWidth * 0.7, headImageViewHight))
        headImageView.image = UIImage(named: “quesheng”)
        
        tableView.tableHeaderView = headImageView
        //去掉下部空白格
        self.tableView.tableFooterView = UIView()

第五步：实现视图联动

在这里实现点击左视图中菜单时，主视图自动联动的功能。采取的措施就是点击不同的Cell，把相对应的视图设置为中心视图

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
     
        switch (indexPath.row){
        case 0:
            let centerViewController = CenterViewController()
            let centerNavigationController = UINavigationController(rootViewController: centerViewController)
            let appDelegate = UIApplication.sharedApplication().delegate as! AppDelegate
            appDelegate.drawerController.centerViewController = centerNavigationController
            appDelegate.drawerController.toggleDrawerSide(MMDrawerSide.Left, animated: true, completion: nil)
        default:
            
            let otherViewController = OtherViewController()
            let otherNavigationController = UINavigationController(rootViewController: otherViewController)
            let appDelegate = UIApplication.sharedApplication().delegate as! AppDelegate
            appDelegate.drawerController.centerViewController = otherNavigationController
            appDelegate.drawerController.toggleDrawerSide(MMDrawerSide.Left, animated: true, completion: nil)
        }
      }

第六步：实现代码重用与优化

今天时间太紧，代码重用存在一些问题，近期会马上优化，希望可以继续关注

如果叙述存在问题，请留言告诉我，谢谢
代码地址：点个赞哦
微博地址：互粉互粉

iOS进阶一百（第四天）