Auto Layout

In Layerz App Designer, all design elements are composed using Auto Layout.

Auto Layout allows you to define relationships with the Parent View and Sibling Views, and has the ability to automatically size elements based on their content.

The simplest way to use Auto Layout is to drag and drop a UI element from the Library at the top onto the desired position on the Scene.

When dropped, the most appropriate Auto Layout is automatically applied based on the surrounding design elements.

Of course, you can edit it to any Auto Layout you prefer.

Let's get familiar with Auto Layout through examples.

There are four ways to use Auto Layout, which we'll explain separately.

Automatic Placement

This is how to add new UI elements onto a Scene.

Drag and drop the desired UI from the UI Library to the position you want, and the appropriate Auto Layout will be automatically applied as it is added to the Scene.

You can drag the selected View to move it to the desired position.

You can also freely resize it using the Resize Anchor.

Simple Auto Layout

If you only need to apply Auto Layout relative to the parent view, using the Simple Auto Layout Menu is convenient.

When a View is selected, the Floating Toolbar that appears below it contains Simple Auto Layout settings. Simply select the desired position from this menu and it will be applied immediately.

Simple Auto Layout consists of the following options:

• Fill
• Center
• Top, Bottom, Leading, Trailing
• Top Center, Bottom Center, Leading Center, Trailing Center
• Top Leading, Top Trailing, Bottom Leading, Bottom Trailing

Advanced Auto Layout

If Auto Layout only had Simple Auto Layout for setting relationships with the Parent View, it would hardly deserve to be called Auto Layout.

In Layerz, you can freely edit relationships with surrounding Sibling Views.

We'll explain how to add and delete Auto Layout items separately.

Adding Auto Layout Items

When you select a single View, you can see 8 Resize Anchors on the View Outline. Since nearly every design editor is structured this way, these points should be intuitively familiar.

Now you can also see a new point at the very center of the View. If the View supports editing Auto Layout settings, this center point will be visible. If the View is locked, or is a child of a List or Stack, this point will not appear.

Select this point and drag outward, and you'll see an arrow being drawn out. Drag the end of this arrow to another View you want to create an Auto Layout relationship with and release. You'll then see a menu of Auto Layout options available between the two connected Views, where you can set the desired relationship.

The menu options that appear are as follows. Not all options appear every time; only the relevant options are displayed based on the position.

• With Parent View
  • Simple
    • Fill
    • Center
  • Space
    • Top
    • Bottom
    • Leading
    • Trailing
  • Center
    • Center Horizontally
    • Center Vertically
• With Sibling View
  • Horizontal Spacing
  • Vertical Spacing
  • Horizontal
    • Leading
    • Center Horizontally
    • Trailing
    • Equal Width
  • Vertical
    • Top
    • Center Vertically
    • Bottom
    • Equal Height

Editing Auto Layout Items

You can move or resize individual Views while Auto Layout relationships are in place.

For finer adjustments, you can modify the values in the Location section of the Inspector.

The Inspector displays all Auto Layout settings for the selected View.

Here you can adjust the Auto Layout Constant values using the Stepper buttons.

Press the Reset button to reset the value to 0.

You can also toggle the Margin setting on and off here.

Margin is a property of the View, and you can use Margin values to keep the positions of Children Views consistent.

For the bottom-most Scene, this value is determined by the Safe Area.

Try changing the values available in the Inspector and experiment with how they are applied.

Size is also part of Auto Layout.

If you change the Size of a View using the Resize Anchor, you can see the Size value change in the Inspector.

However, the number displayed here does not exactly represent the View's actual size.

This Size actually represents the preferred size.

This is because in Auto Layout, a View's size is often determined by external factors regardless of the View's own size. Think about filling a View edge to edge horizontally. The View's own Size is ignored in that case.

So this Size is only used when a size value is needed.

When embedded in a List or Stack, this Size becomes very important, because in most cases the layout is determined by each View's Size.

Additionally, elements like Labels automatically change their size based on the text content. In this case, the Auto Size button becomes active, and you can see the View being laid out automatically based on the text content and Auto Layout settings.

Deleting Auto Layout Items

Auto Layout items can have three or even four settings, and sometimes you may need to delete unnecessary ones.

To delete an item, swipe from right to left on the item you want to remove, and a delete menu will appear.

Auto Rearrangement

Auto Rearrangement

When moving a selected View, it moves without changing its Parent View.

If you want to move it onto a different View, you can use drag and drop again.

Unlike dragging a selected View directly, if you long-press a View, the selected View will be lifted. Dragging in this state allows you to move it to any View, just as if you were dragging from the UI Library for the first time.

In this case, it will be automatically rearranged, so you can conveniently use this method to change Auto Layout as well.