Author: Carlos V17533
When it comes to mobile UI design, there are several key design paradigms. I covered the different mobile UI design patterns in my recent C++ Mobile Day session.
Today, I thought I would write a quick tutorial on how to create your own Home Screen Navigation using Delphi, C++Builder or RAD Studio XE6.
App Home Screen Navigation Key Features
• Images arranged in a grid like layout
• Images can be annotated with text
• May span over multiple screens (you can use a TTabControl for that)
To create the user interface shown in the screenshot above, you will first need to create a new mobile application. Add a TToolbar, align it to the Top, and parent a TLabel to it. Next, drop a TGridPanelLayout component onto your form and align it to the client. By default, two columns (0,1) and two rows (0,1) are set up.
Note: Since you are going to set up event handlers for each graphic on the home screen, I would recommend adding a TTabControl (aligned to Client) with 11 invisible tabs (TabPosition = tpNone). Then add the Toolbar and GridPanelLayout components to Tab1, and link to each of the tabs when the user taps on one of the home screen graphics by setting up on-click events for each graphic.
Define the width of each column, i.e. 50% to have even spacing across both columns.
For this sample application, we want to have a total of two columns with five rows. To add a row, right click on ‘RowCollection’ and add an item.
Each of the five rows should have a value of 20% to ensure even spacing across our grid.
Next, drop a total of 10 TImageControls onto your form. You could also use TImage if you want to load different images for different device resolutions (i.e. 1x resolution image, 2x resolution image etc.).Multi-select (shift select) all TImageControls in the Structure pane and change the width and height to 75 px. This ensures spacing between each of the graphics.
Select each TImageControl and select the row and column you want it to be displayed.
Last step is to add the images you want to display and setup on-click events for each graphic to navigate the user to the related content.
For a limited time, with each qualifying Embarcadero RAD Studio, Delphi or C++Builder product you buy, you can choose a second Embarcadero tool of equal or lesser value — FREE! Offer ends June 30, 2014!
