iOS Tutorial Designer Script & AutoScale tutorial

Erel

Administrator
Staff member
Licensed User
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:
B4X:
AutoScaleAll
- AutoScaleRate - Sets the scaling rate, a value between 0 to 1. The default value is 0.3
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).
 

LucaMs

Expert
Licensed User
The main advantage of the scripts over the program code is that you can see the script effect at design time.
The main disadvantage is that you cannot debug it (use Log).

I state that I start to use the new features only now, but I'm not certain that the mandatory anchor is not a problem.

Given the results of my tests I would say that it is a problem; also, I may be wrong, but why then MS allows you to set the anchor to None?

After many hours of trying, I was not able to adapt AnotherDatePicker so that:

a) it can be added to an Activity by Designer, in the position and the desired dimensions;
b) the same things but through code.


I'm sorry for this negative post, but play with layouts, scripts, scaling,... makes me nervous :mad::mad::mad: :D
 
Top