Widget Layout Rows

[info-creaticode]

Introduction

When we use widgets like buttons or labels, we often want them to be aligned in positions and sizes. Instead of finding the position and size of each widget one by one, there is a different method of controlling the widget layout.

The basic idea is to divide up the entire stage into one or more “rows”, and stack them from top to bottom. For each row, you can divide it into one or more “cells”, and then place widgets into these cells. For example, here is how you can divide the stage into 2 rows (blue boxes), then divide the rows into 2 or 3 cells (red boxes):

 
Note that the rows and cells are not visible on the stage. They are just used for calculating the position and size of each widget.

 
 

The “Apply Layout Row” Block

To use the new layout method, you first add one or more widgets (no need to set their positions or sizes anymore), then run the following block to place these widgets into a row:

 
Let’s discuss the inputs below:

 
 

Row Name

The first input is an optional name for this row. Usually you can just give a short name like “r1”, “r2”, “r3”, etc.

 
 

Row Height %

The second input is the height of this row as a percentage of the stage height. For example, we know the stage height is 360 normally, so if the “height” value is 50, then this row will occupy half of the stage height, which is 180.

Whenever you run this block, a new row will be appended below the previous row. For example, you can run these 3 blocks to divide the stage height into 3 rows:

 
 

Cell Width %

The next 6 inputs allow you to divide this row into one or more cells. Each number represents the width of one cell, as a percentage of the total width of the row. For example, if you want to divide the row into 2 equally wide cells, you can write it like this:

 
Note that the width numbers should add up to 100. If not, they will be scaled up or down to make the total 100.

 
 

Widget Names

Now we have set the height of the row and the width of each cell, we are ready to insert the widgets into these cells. You can simply write the names of the widgets going into the cells. Note that these widgets must have been added to the stage already. Their original positions and sizes will be ignored when we insert them into the cells.

For example, suppose we have divided the row into 3 cells, and we want to insert 2 buttons named “b1” and “b2” in the first and third cells, here is how to do it:

 
And the 2 buttons will show up on the left and right:

 
 

Row Margins

You can leave some space around each row by setting a margin value. For example, suppose we have 2 rows of height 30% and 70%. When the margin is 0, they will split the stage like this:

 
However, if we add a margin of 15 units, then each row will shrink inward by 15 units in each of the 4 edges:

 
 

Widget Paddings

Within each row, you can add additional space around each cell so that the widgets will not be touching each other.

For example, suppose we have 2 cells in a row, each with a button in it. Without paddings, the buttons will be touching each other:

 
Note that there are spaces around this row because of a margin, but inside the row, the 2 cells are touching each other.

If we add a padding of 15, then we add some additional space around each cell:

 
 
 

Example

In this example, 5 buttons are placed on the stage using 3 layout rows. A margin of 10 units and a padding of 5 units are used for all rows.

• The first row is 40% of the stage height, with 3 cells of width 40%, 20% and 40%. The buttons “b1” and “b2” are inserted into the first and the third cell.
• The second row is 10% of the stage height, and it is left empty (no buttons)
• The third row is the remaining 50% of the stage height, with 3 cells holding the remaining 3 buttons.

 
This is the result:

 
You can play with the project yourself here:

https://play.creaticode.com/projects/2dc702e7d79e6a0362c8d51d