Dismiss Notice

REGISTRATION IS AFTER ADMIN ACTIVATION

DONATIONS WITH PAYPAL CLICK TO BUTTON

1 MONTH VIP - 5$; 3 MONTHS VIP - 10$; 6 MONTHS VIP - 20$; 1 YEAR VIP - 30$; 2 YEARS VIP - 50$; GOLD USER FOR LIFE VIP - 150$

DONATIONS WITH Bitcoin Address:3NRs3CK3fhXifrNYxHEZKpETDd9vNLMsMD

Dismiss Notice
The registration is approved by the Administrator. It takes about 1 day to approve your registration
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 N0body, Jun 23, 2014.

  1. N0body
    Online

    N0bodyN0body is a Verified Member DelphiFan Administrator 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]
     
    atilim07 likes 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

Laws
Our website, law, laws, copyright and aims to be respectful of individual rights. Our site, as defined in the law of 5651 serves as a provider of space. According to the law, contrary to the law of site management has no obligation to monitor content. Therefore, our site has adopted the principle of fit and remove. Works are subject to copyright laws and is shared in a manner that violated their legal rights, or professional associations, rights holders who, adsdelphi@gmail.com I can reach us at e-mail address. Complaints considered to be infringing on the examination of the content will be removed from our site.
Donate Help To Us and Be VIP
DONATIONS WITH PAYPAL CLICK TO BUTTON
6 MONTHS VIP - 20$; 1 YEAR VIP - 30$; 2 YEARS VIP - 50$; GOLD USER FOR LIFE VIP - 150$
Social Block