Thierry Laborde from Embarcadero has a new mobile layout design up on his blog. It is pretty easy to customize as you can see in the screenshot I added a background image under the menu items and it makes the layout really look good. This design should work for Delphi XE5 Firemonkey on Android, IOS, Windows, and OSX (though it is not designed specifically for desktops). The one two three items are actually drawers that are pushed into the left side of the screen. When you click the number they slide out to review more information about that menu item. If you click the menu item once the draw is fully extended it scrolls in a panel from the top with what could be your content. Everything reverse from there with a close button at the bottom of the full screen panel. You close the drawers the same way you opened them by clicking the number again. As previously stated adding a background (stick a TImage on the form, send it to back, load your image into it, set it’s align to alContents, and the wrap mode to iwCenter) really makes it pop but you could customize all kinds of things about it. For example, you could make the menu items semi transparent by setting the Opacity of the items say 0.75. You could change the numbers to letters or icons. You could also change up the colors of the menus if you have a different color scheme in mind. Lastly the full page panels that drop down could be customized with whatever controls you want from a TListBox to a TFlowLayout full of images.
Head over and download the free mobile layout design from Embarcadero.
1 Comment