I’ve been working on a ShowCase App for the Delphi XE4 release, and as part of it I wanted to have a “drawer” layout. I first saw this in the iOS and Android Facebook app, but it has shown up in other apps since.

If you’re not familiar with this, it is where your main content takes up the bulk of the screen, except for a toolbar at the top. The toolbar has a “hamburger” button that slides the main content area over to the right to expose a second content area (often a menu) underneath.

I implemented this arrangement inside my Showcase App, but I also thought people might want to re-use this layout by itself. Rather than force you to rip it out of the Showcase App, I have uploaded a bare-bones project with just this functionality to github. Whether you just want to see how it works, or steal it wholesale, go for it.

Let’s dig a little further into how it works. If you look at the Structure View below, you can see the basic arrangement of components:

• lytMain is a TLayout that represents the main content area of your app, and is also the content area that will slide over to the right to expose the drawer. This has a child TToolbar aligned to the Top, which in turn has a Button on it which invokes the actOpenDrawer action (see below).
• lytDrawer is the second content area that is exposed when lytMain slides over to the right.
• actOpenDrawer is an action that opens and closes the drawer. ie. slides lytMain over to the right to expose lytDrawer, and slides it back to close.
• There is also a GestureManager, which is hooked up to the Toolbar on lytMain. This is configured so that rather than clicking the button to open and close the drawer, you can swipe left and right on the toolbar area to do the same thing.

If you have a look through the code, it’s pretty straight forward. A couple of things worth calling out:

• I have set it up so that in portrait and landscape mode on the iPhone, and portrait mode on the iPad, it behaves as described above. ie. with the button causing lytMain to slide over to the right, exposing lytDrawer. However, in landscape mode on the iPad, I hide the button and arrange it so that the lytDrawer is permanently visible aligned to the left of the screen. Have a look at the LayoutForm method for this logic.
• When opening and closing the drawer, I wanted it to animate smoothly across, rather than jump directly to the end. This is easily done by calling AnimateFloat on lytMain to change the Position.X value. You can see this  in the SetDrawerVisible method.

All in all, very easy. Drop whatever content you want on lytMain and lytDrawer and you’re away. In the Showcase app I mentioned, I have a custom-styled listbox in lytDrawer, and I re-parent different TFrame’s onto lytMain depending on which listbox item is selected. I assume the source code for the Showcase app will be made available soon, but I’ll also probably blog about some different aspects of it in the coming weeks.

Note, in the animated gif above I’ve added a gray and a white rectangle to the two content area layouts, just to highlight the difference. In the project, these are Layouts, so are transparent. You can add whatever child controls onto the layouts that you like.