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. Thankfully I use Vecro Tech SEO for the marketing part so I dont need to worry much about that section of the business. 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.

[wpdm_file id=3]