Designer script feature allows you to write simple scripts that manage the user interface in the visual designer.
The main advantage of the scripts over the program code is that you can see the script effect at design time.
The process of loading a layout file is made of the following steps:
- The best match variant is chosen.
- The views are created. Anchors are applied at this point.
- The general designer script and the variant script are executed.
Later when the panel is resized:
- The best match variant is chosen.
- The views are resized. Anchors are applied at this point.
- The general designer script and the variant script are executed.
Note that anchors are applied before the scripts are executed (with one exception related to auto scaling).
It is recommended to use as few variants as possible and instead to implement a flexible layout with anchors and the designer script. You can use the If condition in the script instead of multiple variants.
AutoScale
By default all scripts start with the AutoScaleAll keyword. Auto-scale works by comparing the page size to the chosen variant size. If the page size is larger then all the views will be slightly larger (including the text size). If the page size is smaller then the views will be slightly smaller.
Reference
The following properties are supported:
- Left / Right / Top / Bottom / HorizontalCenter / VerticalCenter - Gets or sets the view's position. The view's width or height will not be changed.
- Width / Height - Gets or Sets the view's width or height.
- TextSize - Gets or sets the text size.
- Text - Gets or sets the view's text.
TextSize and Text properties are supported by: Button, Label, TextField and TextView.
- Image - Sets the image file (write-only). Only supported by ImageView.
- Visible - Gets or sets the view's visible property.
Methods:
- SetLeftAndRight (Left, Right) - Sets the view's left and right properties. This method changes the width of the view based on the two values.
- SetTopAndBottom (Top, Bottom) - Sets the view's top and bottom properties. This method changes the height of the view based on the two values.
In most cases you can use anchors instead of these two methods.
Keywords:
- Min / Max - Same as the standard Min / Max keywords.
- AutoScaleAll - Autoscales all layout views.
Example:
- AutoScaleRate - Sets the scaling rate, a value between 0 to 1. The default value is 0.3
Example:
- ActivitySize - Returns the approximate panel size measured in inches.
- If ... Then condition blocks - Both single line and multiline statements are supported. The syntax is the same as the regular If blocks.
- Landscape - Returns True if the current orientation is landscape.
- Portrait - Returns True if the current orientation is portrait.
Notes and tips
- %x and %y values are relative to the view that loads the layout.
- Variables - You can use variables in the script. You do not need to declare the variables before using them (there is no Dim keyword in the script).
The main advantage of the scripts over the program code is that you can see the script effect at design time.
The process of loading a layout file is made of the following steps:
- The best match variant is chosen.
- The views are created. Anchors are applied at this point.
- The general designer script and the variant script are executed.
Later when the panel is resized:
- The best match variant is chosen.
- The views are resized. Anchors are applied at this point.
- The general designer script and the variant script are executed.
Note that anchors are applied before the scripts are executed (with one exception related to auto scaling).
It is recommended to use as few variants as possible and instead to implement a flexible layout with anchors and the designer script. You can use the If condition in the script instead of multiple variants.
AutoScale
By default all scripts start with the AutoScaleAll keyword. Auto-scale works by comparing the page size to the chosen variant size. If the page size is larger then all the views will be slightly larger (including the text size). If the page size is smaller then the views will be slightly smaller.
Reference
The following properties are supported:
- Left / Right / Top / Bottom / HorizontalCenter / VerticalCenter - Gets or sets the view's position. The view's width or height will not be changed.
- Width / Height - Gets or Sets the view's width or height.
- TextSize - Gets or sets the text size.
- Text - Gets or sets the view's text.
TextSize and Text properties are supported by: Button, Label, TextField and TextView.
- Image - Sets the image file (write-only). Only supported by ImageView.
- Visible - Gets or sets the view's visible property.
Methods:
- SetLeftAndRight (Left, Right) - Sets the view's left and right properties. This method changes the width of the view based on the two values.
- SetTopAndBottom (Top, Bottom) - Sets the view's top and bottom properties. This method changes the height of the view based on the two values.
In most cases you can use anchors instead of these two methods.
Keywords:
- Min / Max - Same as the standard Min / Max keywords.
- AutoScaleAll - Autoscales all layout views.
Example:
B4X:
AutoScaleAll
Example:
B4X:
AutoScaleRate(0.2)
- ActivitySize - Returns the approximate panel size measured in inches.
- If ... Then condition blocks - Both single line and multiline statements are supported. The syntax is the same as the regular If blocks.
- Landscape - Returns True if the current orientation is landscape.
- Portrait - Returns True if the current orientation is portrait.
Notes and tips
- %x and %y values are relative to the view that loads the layout.
- Variables - You can use variables in the script. You do not need to declare the variables before using them (there is no Dim keyword in the script).