iPhone dev: Creating sliding drawers like Path and

问题:

The new Facebook app seem to have done away with the grid-icon layout, with a more interesting custom navigation layout where the bottom-most view shows all the options (like Profile, News Feed, Messages etc for Facebook) and clicking on one of them brings another view sliding over the top. You can press the 3-lines button to then expose the bottom-view again, but the current view is partially visible. The Path app also recently updated to match this scheme.

What's the best way to recreate this? I've searched for any open-source options but haven't found them. Three20 doesn't seem to support this either.

回答1:

Try These from Cocoa Controls:

JTRevealSidebar http://cocoacontrols.com/platforms/ios/controls/jtrevealsidebar

clcascade http://cocoacontrols.com/platforms/ios/controls/clcascade

StackScrollView http://cocoacontrols.com/platforms/ios/controls/stackscrollview

Many more on the same site like: http://cocoacontrols.com/platforms/ios/controls/mfslidingnavigationcontroller http://cocoacontrols.com/platforms/ios/controls/psstackedview

回答2:

Another option that I wrote: ECSlidingViewController

It has support for orientation changes like Facebook and sliding to the left like Path.

Video demo: http://vimeo.com/35959384

Code: https://github.com/edgecase/ECSlidingViewController

回答3:

I found a really nice project on github:

https://github.com/devindoty/DDMenuController

回答4:

Everything I've seen on the internet and those recommended by Yosi Taguri are all way too complicated. Drawers can be achieved by a very simple category to UINavigationController with no graphics asset whatsoever and no class extension needed, and backwards compatible with iOS 3.0!

Take a look a this:

http://code.google.com/p/drawer-navigation-controller/

Here is a video http://www.youtube.com/watch?v=5T-1-_pFbG0

回答5:

This project (not mentioned above) looks like the most mature and polished to me: https://github.com/gotosleep/JASidePanels

Also, seems to still be active.

Edit: I have since transitioned to: https://github.com/mutualmobile/MMDrawerController which IMO is an almost perfect implementation.

回答6:

Check my answer here - SplitView like Facebook app on iPhone - which contains a list of open-source codes.

回答7:

if anyone's wondering which one to choose among JTReveal and DDMenu, I'd suggest DDMenucontroller over JTRevealSidebar (haven't used the other options listed by @Yosi). Its a lot simpler, lighter and works exactly the way the Path app works (and it is easier to modify to suit your requirements). Havent seen the issue of black background mentioned by @Henning

回答8:

My project FRLayeredNavigationController on GitHub goes in about the same direction.

(The spacing between the layers is easily configurable and it supports rotation of course).

Have a look at the demo videos/screenshots:

• http://youtu.be/v_tXD_mL05E
• http://youtu.be/q66HX2td_uc
• https://github.com/weissi/FRLayeredNavigationController/raw/master/FRLayeredNavigationControllerScreenshot1.png
• https://github.com/weissi/FRLayeredNavigationController/raw/master/FRLayeredNavigationControllerScreenshot2.png

回答9:

Here's another one: PPSlideDrawer.

http://www.localwisdom.com/blog/2013/05/simple-sliding-drawer-implementation-for-ios/

I checked out @Ephraim's answer (http://code.google.com/p/drawer-navigation-controller/) because it seems pretty easy to work with. The problem, it seems, with drawer-navigation-controller is that the swiping animation does not follow the user's finger--it is automated. PPSlideDrawer aims to solve that. I'm about to try it out in my project and will post some updates.

Might be a dealbreaker for some that the following are still under "TODO:"

1. Implement auto open functionality.
2. Implement swipe from edge functionality(rather than just detect panning gesture).
3. Landscape support.

回答10:

Here is one thats very easy to implement and use with storyboards. It has control for shrinking, show hide animations, and direction.

https://github.com/HelloMihai/HMSideDrawerDirectional