Home/Code tips, Uncategorized/Implementing a slide-in menu in your mobile apps

Implementing a slide-in menu in your mobile apps

Views:
143

Back in May of 2013, Malcolm Groves published this excellent article:

A Facebook-style layout for your mobile app

Which outlined how to go about implementing a slide-in menu like in prior incarnations of the Facebook mobile app. Facebook has since changed this layout, so it no longer applies to that app, however I still find this layout very useful and have implemented it in a couple of my own apps, including iNews. Instead of copying/pasting a bunch of code into my app every time, I decided to break out the functionality into its own unit, so that it could be reused for other apps.

As per Malcolm’s article, you’ll need to have two TLayout controls on the form, one of which will act as a container for the menu, and one that acts as a container for all the other controls on the form.

The class used to manage the slide-in menu is called TDrawerController. An instance of TDrawerController is created either in an overridden Create method for the form, or the OnCreate event handler. Assign the main layout to the Window property of the TDrawerController and the menu layout to the Drawer property. The controller needs to know the width of the button that opens/closes the drawer, so set the ButtonWidth property of the TDrawerController to the value of the Width property of that button.

So that the layout is updated when needed, the UpdateLayout method needs to be called when the form is shown or resized, so call this method in OnShow and OnResize for the form. When the open/close drawer button is clicked, the DrawerVisible property will need to be toggled so that the drawer is shown/hidden, and when one of the “menu” items is clicked, the DrawerVisible needs to be set to False.

A demo app has been constructed to provide all of the above, so you could use that as a template if you wish. The complete code is in the link following.

By | 2017-02-16T18:02:36+00:00 October 15, 2013 11:17 am|Code tips, Uncategorized|5 Comments

About the Author:

5 Comments

  1. […] […]

  2. Jürgen Bauer November 22, 2013 at 11:56 pm - Reply

    Hello,
    your sample app does not show the menu item on the left side when my iPad 4 is in landscape mode.
    Any ideas?
    Bye,
    Jürgen

    • admin November 23, 2013 at 7:27 am - Reply

      I’ve implemented this using Malcolm Grove’s original idea, and I wasn’t sure why he decided to make the menu item visible in that mode. You could just remove the check for iPad and IsLandscape.

  3. […] There is also another blog post that turns this idea into a unit class which you can re-use across […]

  4. Max June 12, 2015 at 3:33 am - Reply

    Thank you. Just what i was looking for

Leave a Reply

Show Buttons
Hide Buttons