Auto Layout

In Layerz App Designer, every design element is built with Auto Layout.

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

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

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

Of course, you can edit it to use whatever Auto Layout you want.

Let's get familiar with Auto Layout through some examples.

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

Automatic Placement

This is how to add a new UI element onto the Page.

Drag and drop the UI you want from the UI Library to the desired position, and a suitable Auto Layout is applied automatically as it's added to the Page.

At this point, you can drag the selected View to move it to any position you want.

You can also resize it freely using the Resize Anchors.

Simple Auto Layout

If you only need to apply Auto Layout relative to the parent view, the Simple Auto Layout menu is the most convenient option.

When you select a View, the Floating Toolbar that appears below it includes the Simple Auto Layout setting. Choosing the position you want from this menu applies it 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 offered Simple Auto Layout, which sets up relationships with the Parent View, it would be hard to call it Auto Layout at all.

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

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

Adding an Auto Layout Item

When you select a single View, you'll see the 8 Resize Anchors around the View Outline used for resizing. Almost every design Editor is built this way, so these points are intuitive to understand.

Now you'll notice a new point in the very center of the View. If a View can have its Auto Layout settings edited, you'll see this center point. The point is not shown when a View is Locked, or when it is a child of a List or Stack.

Now, if you select this point and drag it outward, you'll see an arrow being created and pulled out. Drag the end of this arrow onto another View you want to establish an Auto Layout relationship with and release your finger. A menu of the Auto Layout settings that can be configured between the two Views connected by the arrow will appear, and you can set up the relationship you want here.

The menu that appears at this point is as follows. Not every menu item always appears; only the items appropriate for the position are shown.

• 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 an Auto Layout Item

With Auto Layout in place, you can move or resize individual Views.

If you want finer control here, you can adjust the values in the Location section of the Inspector.

The Inspector shows all of the Auto Layout settings for the selected View.

Here you can press the Stepper buttons to adjust the Constant value of an Auto Layout.

Pressing the Reset button resets it to 0.

You can also turn the Margin item on and off here.

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

For the Page at the very bottom, this value is fixed to the Safe Area value.

Try changing the values you can adjust in the Inspector and experiment with how they apply.

Size is also part of Auto Layout.

If you resize a View using the Resize Anchors, you'll see the Size value in the Inspector change.

However, the number shown here doesn't exactly mean the View's actual Size.

This Size actually represents the recommended Size.

That's because in Auto Layout, the Size is often determined by external factors, regardless of the View's own size. Think about stretching a View to fill the full width. In that case, the View's own Size is ignored.

So this Size is only used when a Size is actually needed.

When a View is Embedded in a List or Stack, this Size becomes very important. That's because in those cases, the Views are most often laid out according to their own Size.

There are also cases like Labels, where the size changes automatically based on the Text content. In those cases, the Auto Size button is enabled, so you'll see the View laid out automatically based on the Text content and the Auto Layout settings.

Removing an Auto Layout Item

A View can have three or even four Auto Layout items configured, and sometimes you may need to remove items you don't need.

In that case, Swipe the item you want to remove from right to left to reveal the delete menu.

Automatic Rearrangement

Auto Rearrangement

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

If you want to move it on top of another View, you can use Drag and Drop again.

Unlike dragging a selected View directly, if you Long Touch a View, the selected View is Lifted. From this state, dragging it lets you move it onto any View, just like dragging from the UI Library for the first time.

In this case it is placed automatically again, so you can also use it as a convenient way to change Auto Layout.