Stack

Stack arranges Views vertically or horizontally in a consistent manner.

There are Vertical Stack and Horizontal Stack. You can freely nest Stacks to create a single design element.

Views placed inside a Stack follow the Auto Layout Size property and take on the size of their default content. For example, a Label automatically adjusts its size based on the text content.

To create a Stack, open the UI Library and select H Stack or V Stack.

H Stack stands for Horizontal Stack, and V Stack stands for Vertical Stack.

You can choose whichever Stack you want, but since you can switch between Horizontal and Vertical at any time in the Inspector, you don't need to worry too much about which one to choose.

When you place a Stack on the Scene, you'll see a Stack containing two Placeholder Views.

In Layerz App Designer, Placeholder Views can occasionally be seen as temporary elements filling empty spaces.

Since Placeholder Views are temporary, they cannot have Subviews and only serve to be replaced by other Views. They are not visible in Preview Mode before being replaced.

To replace a Placeholder View with another View, simply drag and drop the desired View from the UI Library. Instead of being added as a Subview, it will replace the Placeholder View in its position.

Working with Stacks in the Floating Toolbar

Use the Floating Toolbar to configure Stacks.

Adding Subviews inside a Stack

Select the Stack. To select a Stack at once, choose the desired element from the Outline view.

Select the fourth icon with the + button in the Floating Toolbar.

You'll see two menu options: 'Add from Library' and 'Add Placeholder'.

Selecting 'Add from Library' lets you directly add the View you want from the UI Library, and selecting 'Add Placeholder' adds a Placeholder.

Embed in Stack

You can build a Stack by expanding from the Stack itself, but there's another way.

Regardless of Stacks, most Views can wrap themselves in a Stack and become part of a Stack UI through the Embed in Stack menu.

Since not only regular UI elements but also Stacks themselves can be embedded in other Stacks, you can easily create complex UIs.

Finally, you can also conveniently edit Stacks using the Duplicate button and Delete button in the Floating Toolbar.

Adjusting Stacks

Simply placing UI elements neatly into a Stack isn't enough to create the UI you want.

Check the Inspector while the Stack is selected.

In the Stack section, you can modify various properties of the Stack.

• Axis: You can switch between Vertical and Horizontal right away.
• Distribution: You can decide how to distribute space among UI elements inside the Stack. Here are the available options; try switching between them to find the right value.
  • Fill
  • Fill Equally
  • Fill Proportionally
  • Equal Spacing
  • Equal Centering
• Alignment: You can set the alignment of UI elements inside the Stack.
  • Fill
  • Leading/Top
  • First Baseline
  • Center
  • Trailing/Bottom
  • Last Baseline
• Spacing: You can set the spacing between UI elements inside the Stack.