Requires version 0.9.14 or higher.
#Autolayout is here!
When we initially designed SCADE's layout engine, our main concern was expressiveness and power. However, though the layout engine is already extremely powerful, the layout engine's concepts to use this power were unfamiliar to the typical iOS developer.

Today, in this release, we are adding AutoLayout support to the SCADE layout manager You can now use AL for Swift based Cross Platform development for Android and iOS

Autolayout Introduction

The core problem that AL solves is to make the UI on devices of different formats look the same. On iOS, and especially on Android, you find mobile devices of different sizes. Autolayout makes the UI look professional and align all elements correctly independent of the format of the device your SCADE app is running on.

This tutorial introduces the SCADE Autolayout features. Also, Autolayout has already been discussed in many 3rd party tutorials in great depth and we are providing a list of additional Autolayout tutorials at the end of the chapter.

Setting autolayout in SCADE page builder

Autolayout is now your default layout manager. When you create a new page, it is the default option. For instance, drag and drop a button on a new page and use the AutoLayout constraint button to define a new layout:

In oder to modify existing AutoLayout constrains, use the Autolayout Constraint Properties Panel on the right hand side. Click the Edit button to bring up the constraint modification dialog:

Autolayout by example

How to center a control

1. Select the control, i.e. a button
2. Press the Autolayout Constraint button to bring up the AutoLayout Constraint Dialog
3. Click on Horizontally in Container
4. Press Add 1 Constraint button

The button will now be centered horizontally. The new constraint will show up in the constraint dialog:

How to create three button panel

In this example, we want to 3 buttons to stretch across the width of the device while maintaining equal width. Image a restaurant app:

1. Add 3 buttons and set the text to $10, $15 and $20
2. . Bring up AL constraint dialog
3. Add 2 constraints and add a 15px space and a 5px space right from the left button

4. Add 2 constraint on right button: add a 15px space on the left of the button. Add a 5 px space to the left of the button.

5. Select all 3 buttons and make them equal space.

All buttons will be nicely distributed with same width no matter the device size and format.

Here we go: