首页 > 程序脚本 > iOS > MMDrawerController搭配storyboard使用详解

MMDrawerController搭配storyboard使用详解

MMDrawerController是一个iOS抽屉式导航控件,支持自定义的过渡动画(滑动,滑动和缩放等)来展示或者隐藏“抽屉”。官方网站:https://github.com/mutualmobile/MMDrawerController

看过MMDrawerController源码和demo的人应该都知道,通篇都是找不到一个storyboard文件或者xib文件的,所有功能实现都是代码。按讨论组里作者的意思,这样更容易在大型项目中使用,可是对于我们个人初中级的开发者来说就有些许的不方便了,大神级的人物完全可以忽略。

storyboard是IOS5以后新增的内容,从名字上看,是以故事面板的形式来展现界面间的逻辑关系,Storyboard的功能很强大,可以大大简化设计UI及各页面之间关系的工作。
在我最近两个项目中,我都是使用了storyboard,github上有人专门用MMDrawerController改了一个支持storyboard的库https://github.com/TomSwift/MMDrawerController-Storyboard,我这次以一个实例讲解一下MMDrawerController原生库支持storyboard的方法。

首先我们创建一个single View Application,启动Xcode,菜单选择File\New\Project…然后选择iOS\Application\Single View Application template.

点击next,给这个项目起一个名字,这里我就用MMDrawerController-with-storybord-demo命名了。

然后,打开一个terminal,进入到刚刚创建的项目目录中

#cd /opt/program_folder/my-project/iphone/iphone-demo/tmp/MMDrawerController-with-storybord-demo
执行如下命令创建Podfile文件
$ pod init
使用任意编辑器编辑Podfile文件,填入内容如下

保存退出后执行如下命令
$ pod update –no-repo-update —verbose
到此,MMDrawerController已经安装配置完毕,接下来我们只需要双击MMDrawerController-with-storybord-demo.xcworkspace来启动项目即可,storyboard的ui设计请参考demo文件,我这里不做过多的表述。

编辑AppDelegate.h文件

编辑AppDelegate.m文件

initDrawer内容如下

代码解读
首先初始化storyboard,”main”是你的storyboard的名字
然后初始化drawerController,这里有两个参数
initWithCenterViewController,主页面,”centerNav”是storyboard的id,蚊子这里用的是一个navigation controler做为首页进入入口,参加demo中storyboard里Navigation Controller
leftDrawerViewController,左侧memu页,”menu”也是storyboard的id,参看demo中storyboard里left Drawer View controller
之后的几行是对drawer的定义。可以根据自己的需求自行定制。可以参见官方手册

再往下我们就来说说rootviewcontroller文件了,也就是app的入口,在页面中间部位,我放置了一个label,用于显示menu点击后的显示。具体相关代码参考demo,并不是很难这里不赘述。

这个Controller主要关键步骤是添加导航栏左侧的按钮,点击后显示左侧menu
在viewdidload部分加入

[self setupLeftMenuButton];

setupLeftMenuButton的内容如下

作用就是初始化一个MMDrawerBarButtonItem,然后放置到导航的左侧,点击的时候触发leftDrawerButtonPress事件

leftDrawerButtonPress内容如下

该事件触发后,显示左侧菜单,左侧菜单我通过一个tablevies实现。具体内容看demo,主要就是加入了几行,点中每行之后,首页会显示点中的行号
tableviewcontrller关键点是在于左侧menu点击完之后的关闭动作,这里只需要有几行代码就行了,放在- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath这个tabler delegate里,内容如下

该段代码使用了一个block实现点击后的动画效果,关闭左侧menu,显示app rootController页,同时把点击的行号显示到rootController的label上。

到此MMDrawerController搭配storyboard的实现方式就介绍完毕了。有需要的朋友可以去这里下载这个demo的代码。此外MMDrawerController还拥有很多设置方式,不仅仅可以实现左侧menu,右侧也可以,有兴趣的朋友,请去官方查看相关文档。

 

 

© 2014 – 2016, 深夜的蚊子. 版权所有. 如转载,请注明:转载自 蚊子空间[http://www.wenzizone.cn]


5 COMMENTS

  1. IrfanGG2016-11-04 12:03

    rootviewcontroller 会init两次

  2. 16695928732015-06-17 08:48

    我就是随便看看

  3. litterCai2015-03-09 17:53

    代码不能左右滑动阿

  4. taitanxiami2015-01-26 15:16

    代码段太丑了吧,刺眼。能改改吗