抽屉效果的一个第三方库的使用MMDrawerController

写在前边的话

这篇文章最开始是用来方便自己在查阅时用的,之前做项目的时候用过这个抽屉效果,感觉还不错,基本满足了项目的需求,所以发了这样一篇文章,基本上是将github上作者的原文搬了过来。随着简书用户的增多,很多朋友在搜索抽屉效果的时候,不幸搜到了这篇文章,也基本上没解决什么问题,在下边给我留言有的还加我好友一块儿探讨,感谢这么多一起奋斗的小伙伴,最后还是写了一个Demo来阐述了大伙儿问我最多的几个问题:

1.如何在某个页面关闭抽屉效果;2.如何在左侧或者右侧点击某个按钮或者列表的某一项关闭抽屉;3.如何将一侧的数据传递到主页面去。

我这次更新的内容也主要是解决前两个,针对第三个问题我觉得数据传递在APP开发过程中会有很多方式,无论用数据存储,单例,消息通知,还是NSUserDefaults都可以达到你想要的效果。下面直接贴代码了

主页面
左侧打开的样子

功能说明:1.点击主页面跳转按钮到详情页 该页面将禁止左右抽屉的打开 2.点击左侧的列表会将抽屉关闭 具体的代码实现可以在我的github和分享的云盘链接上进行下载 

Hithub地址:     https://github.com/hanqiao8866/MMDrawerDemo

百度云盘地址:   http://pan.baidu.com/s/1jIEpG7W

有问题可以随时找我交流 也希望共同进步


Mutual Mobile Drawer Controller

https://github.com/mutualmobile/MMDrawerController

MMDrawerControlleris a side drawer navigation container view controller designed to support the growing number of applications that leverage the side drawer paradigm. This library is designed to exclusively support side drawer navigation in a light-weight, focused approach while exposing the ability to provide custom animations for presenting and dismissing the drawer.

展示图

Documentation

Official appledoc documentation can be found atCocoaDocs.

Installing MMDrawerController


You can install MMDrawerController in your project by usingCocoaPods:

pod'MMDrawerController','~> 0.5.7'

Creating a Drawer Controller

Creating aMMDrawerControlleris as easy as creating a center view controller and the drawer view controllers, and init'ing the drawer.

实例

Features

UINavigationController Support

MMDrawerControllerseamlessly accepts aUINavigationControlleras thecenterViewController, and will update all of the gesture support automatically. In addition, any child view controller contained within theUINavigationControllerwill have access to the parent drawer controller using the category explainedbelow.

UIGestureRecognizer Support

MMDrawerControllerexposes gesture support for opening and closing the drawer through two masks, one for opening and one for closing. The options are as follows:

     MMOpenDrawerGestureMode

         MMOpenDrawerGestureModePanningNavigationBar: The user can open the drawer by panning anywhere on the navigation bar.

         MMOpenDrawerGestureModePanningCenterView: The user can open the drawer by panning anywhere on the center view.

         MMOpenDrawerGestureModeBezelPanningCenterView: The user can open the drawer by starting a pan anywhere within 20 points of the bezel.

         MMOpenDrawerGestureModeCustom: The developer can provide a callback block to determine if the gesture should be recognized. More information below.

    MMCloseDrawerGestureMode

         MMCloseDrawerGestureModePanningNavigationBar: The user can close the drawer by panning anywhere on the navigation bar.

         MMCloseDrawerGestureModePanningCenterView: The user can close the drawer by panning anywhere on the center view.

         MMCloseDrawerGestureModeBezelPanningCenterView: The user can close the drawer by starting a pan anywhere within the bezel of the center view.

         MMCloseDrawerGestureModeTapNavigationBar: The user can close the drawer by tapping the navigation bar.

         MMCloseDrawerGestureModeTapCenterView: The user can close the drawer by tapping the center view.

         MMCloseDrawerGestureModePanningDrawerView: The user can close the drawer by panning anywhere on the drawer view.

         MMCloseDrawerGestureModeCustom: The developer can provide a callback block to determine if the gesture should be recognized. More information below.

You are free to set whatever combination you want for opening and closing. Note that these gestures may impact touches sent to the child view controllers, so be sure to use these appropriately for your application. For example, you wouldn't wantMMOpenDrawerGestureModePanningCenterViewset if aMKMapViewis your center view controller, since it would intercept the pan meant for moving around the map.

Custom Gesture Recognizer Support

Starting with version 0.3.0, you can now provide a callback block to determine if a gesture should be recognized using thesetGestureShouldRecognizeTouchBlock:method. This method provides three parameters - the drawer controller, the gesture, and the touch. As a developer, you are responsible for inspecting those elements and determining if the gesture should be recognized or not. Note the block is only consulted if you have setMMOpenDrawerGestureModeCustom/MMCloseDrawerGestureModeCustomon the appropriate mask.

For example, lets say you have a center view controller that contains a few elements, and you only want the pan gesture to be recognized to open the drawer when the touch begins within a certain subview. You would make sure that theopenDrawerGestureModeMaskcontainsMMOpenDrawerGestureModeCustom, and you could set a block below as so:

实例2

In addition,MMDrawerControllerships with several prebuilt animations to let you go crazy right out of the box. These are included as a subspec for the project, and more information can be foundbelow.

    Center View Controller Interaction Mode

When a drawer is open, you can control how a user can interact with the center view controller.

       MMDrawerOpenCenterInteractionModeNone: The user can not interact with any content in the center view.

       MMDrawerOpenCenterInteractionModeFull: The user can interact with all content in the center view.

       MMDrawerOpenCenterInteractionModeNavigationBarOnly: The user can interact with only content on the navigation bar. The setting allows the menu button to still respond, allowing you to toggle the drawer closed when it is open. This is the default setting.

Accessing the Drawer Controller from a Child View Controller

You can use theUIViewController+MMDrawerControllercategory in order to query the drawerController directly from child view controllers.

State Restoration

Beginning with 0.4.0,MMDrawerControllersupports iOS state restoration. In order to opt in to state restoration forMMDrawerController, you must set therestorationIdentifierof your drawer controller. Instances of yourcenterViewController,leftDrawerViewControllerandrightDrawerViewControllermust also be configured with their ownrestorationIdentifier(and optionally a restorationClass) if you intend for those to be restored as well. If your MMDrawerController had an open drawer when your app was sent to the background, that state will also be restored.

iOS 7 Status Bar Support

Child View Controller Support

Beginning with iOS 7, the child view controllers will by default determine the state of the status bar, including its' style and whether or not it is hidden. This value will also be updated anytime the open side changes state, meaning that a side drawer can provide a different value than the center view controller.

If you do not want the drawer controller to consult the child view controllers for this state, you should subclassMMDrawerController, overridechildViewControllerForStatusBarStyleandchildViewControllerForStatusBarHidden, and return nil for both.

Custom Status Bar Background View

If you have a contrasting colors between your center view controller and your drawer controllers, the new iOS 7 status bar handling could cause your application to look less than ideal. Starting with iOS 7,MMDrawerControllersupports drawing a custom status bar area at the top of the screen, to give you an area to display the status bar with a constant color, while allowing you to draw custom content below the status bar without worrying about the color of your navigation bars or the top of your content running up underneath the status bar. Using the feature essentially mimics <= iOS 6.X behavior.

To enable a custom status bar, simple setshowsStatusBarBackgroundViewtoYES. By default, this will draw a black a view underneath the status bar, and adjust your to content to be laid out lower than the status bar. If you would like a custom status background color, you can setstatusBarViewBackgroundColorto whatever color you desire.

Subclassing

If you plan to subclassMMDrawerController, importMMDrawerController+Subclass.hinto your subclass to access protected methods forMMDrawerController.Note that several methods assume and require you to call super, so be sure to follow that convention.

If there is specific functionality you need that is not supported by these methods, please open a Github issue explaining your needs and we can try and find a way to open up methods that can help you out.

Bells and Whistles

A few extras to make your life easier...

MMDrawerBarButtonItem

Using Paint Code, we created a standard Menu Button that you can use in anyUINavigationBar, and make it whatever color you want. It's included as a subspec to this library. Enjoy.

Starting with iOS 7, the drawer button is now drawn in a much thinner stroke. In addition, the color methods have been deprecated, and the color will now be determined by thetintColor.Also note that the shadow has been deprecated to be more in line with the design themes of the OS.

Prebuilt Example Animations

In order to make it as easy as possible for you to use this library, we built some of the common animations we see out there today. Simply include theMMDrawerVisualStatessubspec, and use any of the prebuilt visual states.

For example, if you wanted to use a slide and scale animation, you would do the following:

实例3

And that's it...

Here's a quick list of the built in animations:

Slide: The drawer slides at the same rate as the center view controller.

Slide and Scale: The drawer slides and scales up at the same time, while also alpha'ing from 0.0 to 1.0.

Swinging Door: The drawer swings in along a hinge on the center view controller.

Parallax: The drawer slides in at a slower rate than the center view controller, giving a parallax effect.

Stretchy Drawer

By default, the side drawer will stretch if the user pans past the maximum drawer width. This gives a playful stretch effect. You can disable this by settingshouldStretchDrawerto NO, or you can make your own overshoot animation by creating a custom visual state block and setting up custom transforms for when percentVisible is greater than 1.0

Bounce Preview

To make your side drawer more discoverable, it may be helpful to bounce the drawer the first time your user launches the app. You can use thebouncePreviewForDrawerSide:completion:method to easily do this.

If you would like to bounce a custom distance, you can usebouncePreviewForDrawerSide:distance:completion:.

Nifty Example

We decided to spruce up the example a bit using graphics generated from PaintCode. Hope you like it.

The example shows off all the features of the library. Give it a whirl.

What this Library Doesn't Do

In order to keep this library light-weight, we had to make some design trade off decisions. Specifically, we decided this library would NOT DO the following:

Top or bottom drawer views

Displaying both drawers at one time

Displaying a minimum drawer width

Support container view controllers other thanUINavigationController(such asUITabBarControllerorUISplitViewController) as the center view controller.

Support presenting the drawer above the center view controller (like the Google+ app).

We're sure this list will grow over time. But that's the cost of keeping something maintainable :)

Workarounds/FAQs

How do I support editing/dragging cells in a tableview in the center view controller?

The best way to support this is to set the open/close mask toMMOpenDrawerGestureModeNone/MMCloseDrawerGestureModeNonewhile editing is enabled, and restore the mask when editing is finished. This will allow the proper gestures/touches to be passed all the way to the table view. (#184)

Credit

Designed and Developed by these fine folks atMutual Mobile:

Development

Kevin Harwood

Lars Anderson

Rene Cacheaux

Conrad Stoll

Design

Matt McDaniel

Feedback

We'd love to hear feedback on the library. Create Github issues, or hit us up on Twitter.

License

MMDrawerControlleris available under the MIT license. See the LICENSE file for more info.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容