iPhone dev: Creating sliding drawers like Path and Facebook apps

Question

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.

I'm looking for the same thing! the new Gmail iOS app also uses the drawer like navigation. Is there an API for this? — Michael Gray, Dec 02 '11 at 22:03
I've started using this library and have been happy with the results: https://github.com/Inferis/ViewDeck — Z S, Feb 17 '12 at 21:52
Duplicate of http://stackoverflow.com/questions/7989020/whats-the-best-way-to-develop-a-sideswipe-menu-like-the-one-in-facebooks-new-i — Carlos P, Jul 22 '13 at 07:27

score 28 · Answer 1 · answered Jan 31 '12 at 21:36

28

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

answered Jan 31 '12 at 21:36

Michael Enriquez

2,520
21
13

very nice detailed implementation – darshansonde Feb 29 '12 at 05:35
+1 for sharing link. It is very nice code and they have used storyboard but i want it with normal view controllers. I tried but views are not adding to top view. can please you help me. – Ganesh G Apr 25 '13 at 05:23
I love how it's implemented and feels like a "native" part of uikit – Mr. T Jan 15 '14 at 00:27

score 26 · Accepted Answer · answered Dec 04 '11 at 14:56

26

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

answered Dec 04 '11 at 14:56

Yosi Taguri

1,388
10
15

1

FYI, CLCascade and StackScrollView appear to be iPad-only – Neal Ehardt Mar 01 '13 at 21:14
I know this is an old post, but I wanted to share that all of the links above are either "broken" or the last commit to the project was over a year ago. – Amelia Oct 18 '16 at 15:31

score 9 · Answer 3 · answered Dec 13 '11 at 08:58

9

I found a really nice project on github:

https://github.com/devindoty/DDMenuController

answered Dec 13 '11 at 08:58

andreschneider

6,384
2
18
15

This project looks much more complete and simple to use. – Elia Palme Dec 18 '11 at 22:58
2

I've had problems with DDMenuController, in that when you do a swipe a black background often shows up instead the UIViewController that was supposed to show up underneath. – Henning Jan 23 '12 at 13:27
I like this control. Do you know how to make it take up only half the height so I can put a toolbar at the bottom? – Arcadian Feb 01 '13 at 05:29
DDMenuController must be on rootViewController? i have always seen it on rootviewController i tried to put in other ViewController but its not working working only if put it on My Root View Controler please answer – Prakash Desai Aug 12 '13 at 06:12

score 5 · Answer 4 · answered Feb 04 '13 at 23:40

5

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

answered Feb 04 '13 at 23:40

Ephraim

2,234
1
21
18

This is a great solution. Simple and very elegant. I was able to add the drawer functionality to the the worlds most complicated UIViewController with no subclasses and no modification to my existing UINavigationBar. Really consider looking into this if you want to do drawer stuff. – hatunike Mar 26 '13 at 21:06

mxcl · Answer 5 · 2013-10-07T17:58:37.887

4

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.

edited Oct 07 '13 at 17:58

answered Aug 09 '13 at 20:48

mxcl

26,392
12
99
98

score 2 · Answer 6 · edited May 23 '17 at 10:28

2

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

edited May 23 '17 at 10:28

Community

1
1

answered Feb 06 '12 at 12:46

Sagar

3,159
3
29
28

score 2 · Answer 7 · answered Mar 13 '12 at 23:06

2

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

answered Mar 13 '12 at 23:06

Nitin Alabur

5,812
1
34
52

2

DDMenuController has another issue.. You can't swipe back the panel, only by clicking. – pbibergal Dec 26 '12 at 10:34
I haven't had any issues with it. what do you mean "only by clicking"? – Nitin Alabur Dec 26 '12 at 18:44
When the menu is open, try to close it by dragging the rootViewController back, with swipe. I couldn't, only with click. – pbibergal Dec 26 '12 at 20:09
thats weird. are you sure you are not using the swipe/pan gesture recognizer for something else? if so, you'll either have to over-ride that functionality or check for the recognizer before perofrming the actions for it. – Nitin Alabur Dec 26 '12 at 20:16
pbibergal is right. This is also same for JTReveal. If we want this funcationality then we may need to add gesture recogniser in left and right viewcontrollers too. – karim Aug 01 '13 at 13:35
I can close the side menus (both right and left) by swiping. My only guess is you guys are having other gesturerecognizers that are stealing the swipes. – Nitin Alabur Aug 01 '13 at 16:04

score 1 · Answer 8 · answered May 19 '12 at 16:30

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:

Matthew Quiros · Answer 9 · 2013-08-14T08:49:40.780

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:"

Implement auto open functionality.

Implement swipe from edge functionality(rather than just detect panning gesture).

Landscape support.

score 0 · Answer 10 · answered Aug 20 '14 at 19:45

0

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

answered Aug 20 '14 at 19:45

mihai

4,184
3
26
27

iPhone dev: Creating sliding drawers like Path and Facebook apps

10 Answers10

Linked