Welcome, Guest Login

Support Center

Stack Layout

Last Updated: Jan 16, 2019 09:01PM EST

Stack

Version: 4.40

A very powerful Layout for placing Blocks one after another. As you stack Blocks you can decide which Blocks extend to fill up empty space, which Blocks are fixed height etc..

Usage

Drag this block into your app and then you can edit it's settings by right clicking on the block with your mouse.

Version: 4.4 [iOS] Fixes a scrolling issue. Tap-through is no longer supported when the Stack scrolls.

Version: 4.3 Android supported refreshing block with action script.

Version: 4.1 (click here for version information)

The Stack layout is a very powerful Layout for ordering Blocks one after another. As you stack Blocks you can decide what blocks will have fixed heights, what Blocks will change height based on content, what Blocks will fill empty space, etc…

Usage

  • Drag & Drop the Blocks to top of the Stack Layout.
  • Select the Unit for each Block so they fill up empty space or have specific sizes.
  • Right Click to access additional Settings, including Deleting a Block.

how to add blocks to linear layout

In the Stack Layout settings, the Length and Length Unit fields refer to the height of a Block contained in the Layout. View usage examples

Description

The Stack Layout allows you to display a sequence of Blocks, stacked vertically, with a variety of ways to specify relative or absolute heights of the individual Blocks. You can add any number of Blocks to the Stack Layout and control the height of each Block independently. The Stack Layout can take up the entire height of the device or just a section of it.

With the Stack Layout there are 4 different ways of specifying length (Length Units) if the "Scrollable" option is not selected. These are Fixed, Percentage, Flexible and Wrap Content. If you make the Block "scrollable" you can only use Fixed and Wrap Content types in the Length Settings. The heights of Blocks in the Stack Layout are determined in the following order:

  • Fixed and Percentage areas are calculated out first.

  • Then Wrap Content, and then the remainder of the height is split among the Blocks that have Flexible selected as their Length Unit.

  • The Blocks on Top are displayed first. If you stack too many Blocks only the Blocks which fit within the size of your Stack Layout will be showing in your View.

Fixed: As the name implies, the number given for Length will be used for the number of pixels in height of the Block. The total number of Pixels available is defined by the device screen size. If you enter a fixed number which is too large, the rule above will apply.

Percentage: The height of the Block is calculated as a percentage of the height of the Stack Layout. If the Layout fills up the entire screen then percentage of the layout equals percentage of the screen.

For example, if the Stack Layout’s height is set to be 200px, a Length of 10% would cause the Block to be 20px. If the height of the Stack Layout is not know to the builder, the Block would be 10% of the height of the Layout at runtime.

Flexible: The height of the Block is determined dynamically by dividing the remaining height of the Stack Layout among all Blocks with Flex Remainder set as their Length Units after all other Blocks’ heights have been determined. The Length value will determine the specific Block’s effective ratio or weight relative to other Flex Remainder Blocks. If there is no more space remaining in the Layout, then any Blocks using Flex Remainder will not be displayed.

Wrap Content: The height of the Block is determined dynamically based on its contents. For example, the height of a Text Block would vary depending on the number of lines of text it contains. Since the height is being determined dynamically, the value of the Length field is ignored. Not all Blocks can use Flex Content. Currently the HTML Block, Text Block, and any Ad Blocks are supported.

Notes:

  • If total height of all Blocks exceeds the height of the Stack Layout out then any Blocks that do not fit in the Layout will not be displayed. The Stack Layout will only scroll to display Blocks that are out of bounds if the "Scrollable" checkbox is selected. The Blocks on Top will be displayed first until the length reaches the length of your Stack Layout. If the "Scrollable" checkbox is not selected the Blocks which don't fit will not be shown on the screen.

  • If a “Length” value is not entered, a default value of 10 will be used.

Back to top

Examples

Example 1:
You want to build a classic app with a navigation bar at the bottom and a title on top. - You will need 3 blocks: a title bar at the top (Block A), a block for the middle with your content (Block B) and a navigation block for the bottom (Block C). - Drag Block A to the top of the Stack Layout. Drag Block B to the middle of the Stack Layout; this will make Block B Flexible. Drag Block C to the bottom of Block B.

The following are a few examples of usage of the Flexible Length Unit.
Let’s assume the height of the Stack Layout is 200px.

Example 2:
You want to have a Block fill up the whole layout.

  • In that case you would use one Block with a Flexible Length of 1

Example 3:
You want to have one Block take up ¼ of the screen and a second Block take up ¾ of the screen.

  • In that case, you would have Block A with a Flexible Length of 1, and Block B set with a Flexible Length of 3.

Example 4:
You want to center a Block vertically on the Layout.

  • You will need three Blocks: Block A and Block B, the top and bottom blocks respectively, are Flexible Blocks with a Length of 1.
  • Block M, the middle block can be any Length type. The order of the blocks will be Block A first, then Block M in the middle, and Block B last. Since Blocks A and B will evenly distribute the remaining height between them, this will cause Block M to be centered vertically.

Version Notes:

  • v4.1 allows touches to go through the stack when not touching a child element.
  • Added support for Direction the Layout should stack the blocks. Horizontal or Vertical
  • Added support for Scrolling of the layout

(Back to top)

Parameters

Scrollable Checking this will enable the Stack block to be scrollable. Any child block of the Stack that uses Percentage or Flexible heights/widths will not be displayed and be ignored completely from the view.
Stacking Direction Horizontal / Vertical will set the direction of the stack
Blocks The number of blocks in the layout.
Block The block used at this point in the layout.
Length The value for the length of this block. What this actually means is dependent on the *Length Unit* selected.
Length Unit Determines the behavior of the block in the layout. Fixed means that *Length* will represent points on the screen. Percentage means percentage of the parent layout, or the window of the app if there is no parent layout. Flexible means this block will take up the remainder of the space left in the layout, split amongst all the Flexible blocks. Wrap Content causes the block to adjust it's size to its content.
Menu Length And Setting Define the sizing of Blocks in the Stack. Length and Setting offers 4 system of coordinates to set Blocks in a Stack. Learn how to use Length and Setting with [Using Stack Layout] (http://support.eachscape.com/customer/portal/articles/2164600) tutorial
Menu Delete Or Remove Block Delete the Block. If this Block is a MyBlock the Block will only be removed from this Layout, it will remain available for future use under MyBlock in the Studio. Learn more about [MyBlock] (http://support.eachscape.com/customer/portal/articles/1364381-copy-reuse-delete-a-myblock)
Menu Rename Block Rename a Block or create a MyBlock. MyBlock are custom reusable Blocks. Learn more about [MyBlock] (http://support.eachscape.com/customer/portal/articles/1364381-copy-reuse-delete-a-myblock)
Menu Swap Block Replace this block by another Block. You can only Swap a Block by a MyBlock, lean more about [MyBlock] (http://support.eachscape.com/customer/portal/articles/1364381-copy-reuse-delete-a-myblock). Swap maintains the position of the Block on the Layout, that's really helpful.
IMPORTANT You cannot tap through a Scrolling Stack If a Stack has a transparent element, Tap gesture will go through and be captured by the underlining Block or Layout. When a Stack has scrolling enabled, that feature is disabled. A Stack will not let the Tap go through.

Event(s)

Before Draw

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets3.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete