1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Donation with Paypal!!!

    Go to your paypal account and send directly donation to [email protected]

    1 month - 10 $ - Standart VIP

    6 months - 20 $- Standart VIP

    1 year - 30 $- Standart VIP

    2 years - 50 $- Standart VIP

    Gold member for life - 150 $- Standart VIP

    High Vip (Standart VIP include) group please send PM or email to [email protected] for info

    After Donation please send email to [email protected]

  3. Donation Ways 2020


    Paysend
  4. Telegram
Dismiss Notice

Donation with Paypal!!!

Go to your paypal account and send directly donation to [email protected]

1 month - 10 $ - Standart VIP

6 months - 20 $- Standart VIP

1 year - 30 $- Standart VIP

2 years - 50 $- Standart VIP

Gold member for life - 150 $- Standart VIP

High Vip (Standart VIP include) group please send PM or email to [email protected] for info

After Donation please send email to [email protected]

Dismiss Notice
For open hidden message no need write thanks, thank etc. Enough is click to like button on right side of thread.

Mobile User Interface Design: Home Screen Navigation

Discussion in 'Delphi Android And IOS' started by AdminDF, Jun 23, 2014.

  1. AdminDF
    Online

    AdminDFAdminDF is a Verified Member Delphifan Staff Member DF Staff

    [​IMG]

    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.

    [​IMG]

    Define the width of each column, i.e. 50% to have even spacing across both columns.

    [​IMG]

    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.

    [​IMG]

    Each of the five rows should have a value of 20% to ensure even spacing across our grid.
    [​IMG]

    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.

    [​IMG]

    Select each TImageControl and select the row and column you want it to be displayed.

    [​IMG]

    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.

    [​IMG]
     
    Mahdi and atilim07 like this.
  2. chafik
    Offline

    chafik DF Member

    RE:

    merci
     
  3. ASAPLTDA
    Offline

    ASAPLTDA DF Junior

    GRACIAS
     
  4. CenTeLLa
    Offline

    CenTeLLa DF Member

    RE:

    Thanks...
     
  5. guilhermeteodoro
    Offline

    guilhermeteodoro DF Member

    RE:

    Thanks!
     
  6. barisatalay
    Offline

    barisatalay DF Senior

    RE:

    thanks
     

Share This Page