Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    Widget Layout Rows

    2D Blocks
    1
    1
    240
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

      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:

      e42315d1-7b89-4c3f-8aa3-5ad3c8ecd4d4-image.png

       
      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:

      30f7431a-349c-4d5d-84c8-a5e58f809168-image.png

       
       

      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:

      05e7fba9-6e5e-47db-b0c7-22b232edf8d5-image.png

       
      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:

      cecbe823-1ad8-4fe3-814c-aed57e056e9a-image.png

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

      1a9b2ec9-ac5d-4ff2-87ec-9de4f79dc9ee-image.png

       
       

      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:

      f7731c06-2770-4106-960e-2302a1af2791-image.png

       
      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:

      e35ab40e-e1e1-4420-8875-9a05970f6b03-image.png

       
       
       

      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.

      4bc1889a-f0bd-42fc-89ab-d4ef303c0cf6-image.png

       
      This is the result:

       
      You can play with the project yourself here:

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

      1 Reply Last reply Reply Quote 0
      • First post
        Last post