|
|
|
|
- Lesson 3 - Adapting the UI using anchors
- Adapting the interface
- Device selection
- Window orientation
- Practical example
- Testing the orientation in the simulator
- Using anchors
- To sum up
My first Android/iOS application
Lesson 3 - Adapting the UI using anchors We will cover the following topics: - Adapting the interface:
- Choosing a screen resolution depending on the device.
- Window orientation.
- Using anchors.
30 min WINDEV Mobile allows you to easily create interfaces that adapt to the device used: - For Android, applications can be used both on phones and tablets.
- For iOS, applications can be used on phones (iPhone) and tablets (iPad).
These interfaces can also be adapted to the orientation of the device (portrait or landscape). Device selection When you create the project, you can specify the type of device on which the application will run: phone and/or tablet. There are several cases: - You are using a single target device: in this case, simply create a specific iOS or Android project for the target device (phone or tablet). You will be able to select the desired target device in the project creation wizard. The window creation wizard will propose windows for this device only.
- You don't know the target device: in this case, select "Generate an application for phones and tablets" in the project creation wizard. When creating the windows, you can:
- develop your windows for phones. The content will adapt to tablets thanks to the anchors set on the controls in the window (recommended).
- use layouts to create different interfaces depending on the runtime platform and its resolution.
Window orientation In Android or iOS, windows can have one of the following orientations: - Free: the window follows the orientation of the device,
- Locked in portrait mode,
- Locked in landscape mode.
For a window that stays in portrait or landscape mode (rare case), there are no specific actions required. For a free window, the layout and size of the controls must adapt to the orientation. It is recommended to use anchors to get the desired result. Let's use the example we developed in the previous lessons. In this example, the project was created for a phone and was tested in portrait mode in the simulator. We will test it in landscape mode in the simulator. Testing the orientation in the simulator Test the project in the simulator: - Select the Android or iOS configuration (the images in this lesson were taken in an Android configuration).
- In the quick access button area, expand "GO" if necessary and select " Debug on XXX simulator".
By default, the project test on a mobile device is available in the quick access buttons. After selecting " Debug on simulator" for the first time, the corresponding icon ( ) will automatically appear in the quick access buttons. - If necessary, validate the window that appears.
- The window is displayed in portrait mode.
- The simulator shows an icon-based menu: .
- Change the window orientation with the Rotate icon ().
- The window orientation changes on the screen.
In our example, the button location does not change: it doesn't adapt to the screen orientation. Stop the test and go back to the editor. Using anchors We will make changes to our window to center the "Display" Button control and keep it centered regardless of the device orientation. To center the Button control in the window: - Select the control (click on the Button control).
- On the "Alignment" tab, in the "Centering and distribution" group, click "Center in the parent (Horz.)".
To keep the Button control centered in the window, we will set anchors: - Select the control if necessary.
- Right-click to open the context menu.
- Select "Anchor": the anchor selection window appears:
- Select "Horizontally centered" and validate ("OK" button).
In the window displayed in the editor, you will notice the little red arrows in the control. These arrows indicate that the control is anchored.
Test the project in the simulator (click in the quick access buttons): - The button is centered in portrait mode.
- Change the orientation of the simulator.
- The button remains centered in landscape mode.
Close the simulator. In this tutorial, we discovered how to: - create a project, a window and a control.
- write WLanguage code.
- test a window.
- adapt the interface to the orientation using anchors.
Completed project: If you want to check the end result of the steps described here, you can open a completed version of the project. This project contains the window we created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - My first Android/iOS application", double-click "My Android/iOS project - Answers".
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|