上QQ阅读APP看书，第一时间看更新
Creating responsive layouts
In this topic, you will learn how to work with responsive layouts in Delphi using FireMonkey (FMX). For the examples, we will use Delphi Tokyo. Let's have a look at the required steps:
- To start, open Delphi and create a new project by navigating to File | New | Multi-Device Application-Delphi and select Blank Application:
Adjust the style for Android; for example, for the view, we will continue in the Master view.
Give preference to working in the Master view. During development, if you want to modify views and add new controls to your form, the responsiveness properties will not be inherited. For example, when adding a TButton component to a 4-inch Android view, properties will be lost if you create to modify for a different view, such as iPhone. In the Master view, all the characteristics will be kept, keeping their proportions clear, by the platform.
- Add a Toolbar component to your form.
- Create two buttons inside Toolbar.
- Select the two buttons and align to the left.
- Modify the margins to 5 on each property.
- Save your project and run the application for a Windows platform.
- Then, select the first button that is already configured and modify the StyleLookup property by selecting the cameratoolbutton option. Notice that the button icon is then changed to a specific camera icon.
- Add another Toolbar component, but leave it with bottom alignment. In this toolbar, add a button, align it to the right, and change its margins to 5, as in the top buttons. This button will exit the application.
- Finally, add a TLayout component to the center of your form so that it fills the empty area and align it when using Client.
- Also, modify StyleLookup for the missing buttons. For the button next to the camera, select searchtoolbutton, because, through this, we will search the already-saved images in the device. For the last button, select escapetoolbutton in the StyleLookup property, because, with this button, we will leave the application.