# Introduction and layout types

The layout manager is responsible for layouting all kind of controls in a precise fashion on a mobile app page. It automatically adopts to the respective screen size and therefore achieves device format independence. The layout manager makes use of layout containers to display the mobile pages.

Currently, there are four major layout containers

  • **Grid Layout container** matrix like layout, great for general purposes

  • **Vertical Linear Layout** stack control vertically

  • **Horizontal Linear Layout** align control next to each other

(Script tags will be stripped)

Some important facts

  • The **root container** is the page. Its of type grid layout and cannot be changed.

  • Containers can contain each other

  • Create a hierarchy of container to achieve the perfect layout

  • XYLayout is not used often, only for special purposes. Pixel perfect layout is best achieved using the Grid, Vertical and Horizontal layout container.

## Video Layout

This little video demos how to combine different layout container to achieve complex layouts. Its an overview, not a full training video

(Script tags will be stripped)

# General layout properties

There are some shared attributes across all layout containers. You set them by clicking on the container and using the **layout panel** to specify them:

(Script tags will be stripped)

## Margins

The margin settings define the space between the layout container and its content. Increasing the margin moves the content of the container inwards. The values are absolute values in **points**.

(Script tags will be stripped)

## Spacing

The spacing defines the space between controls within a container.

  • Grid Layout container supports vertical and horizontal spacing

  • Vertical Linear Layout container supports vertical spacing

  • Horizontal Linear Layout container supports horizontal spacing Spacing is not supported for the XY Layout container.

(Script tags will be stripped)

## Video demo

We demo the following this this video

  1. Inserting grid layout container _grid1_ in page (that is itself a grid)

  2. Changing background color of grid1

  3. Setting margins on page grid

  4. Making child grid _grid1_ a 4x4 grid by inserting 4 horizontal containers

  5. Setting spacing

(Script tags will be stripped)

## Setting in code

Apart from the editor, you can also set these properties using code. You use properties of the **SCDLayoutGridLayout** class. For more information on coding layout, see [Programmatic UI development](🔗)

# Bounding box

A bounding box is a very important concept in order to understand layout behavior. Bounding boxes are used in all kind of graphic tools (Adobe, Sketch...)

A bounding box is a **rectangle that encloses the visual control**, i.e. container or widget (Horizontal layout container, Label, button ....) and **defines the area** in which the visual control can be placed.

Basically, a bounding box can have three sizes:

  • **minimum size**, where the size of the bounding box and the visual control are the same

  • **maximum size**, where the size of the bounding box covers as much area as possible and is only constrained by its parent

  • **custom size**, where the width and height is set by the developers

Custom size option is rarely used.

(Script tags will be stripped)

If you choose the **maximum size** bounding box, the bounding box extends itself in vertical or/and horizontal direction until it reaches the borders of its parent container. If you choose the **minimal size**, the bounding box will always be the size of the visual control.

Only when you choose **maximum size, can you change the location of the control** otherwise, the bounding box is the same size as the control, giving it no place to change/move to.

## Fill space - Setting min and max bounding box

You set the behavior of the bounding box, whether it maximizes itself, or minimizes itself, using the two checkboxes on the layout tab. There is one checkbox for each direction

Column Title
**Horizontal Fill Space**As much space as possible is grabbed / used horizontallyBounding box has same **width** as control
**Horizontal Fill Space**As much space as possible is grabbed / used verticallyBounding box has same **height** as control
(Script tags will be stripped)

## Video Demo 2

Here a short video to strengthen the understanding of using minimized and maximized bounding box settings:

(Script tags will be stripped)

## Bounding box code

# Width and height constraint

Another important setting to understand is the width and height constraints of the control. Each control has its bounding box that defines the area available to the control. Additional, we can influence the size of the control itself. The width and height constraints define this size.

These can be set to one of two values:

  • **wrap_content** height and / or width of control is equal to the height and width of control content

  • **match_parent** height and / or width of control are equal to size of bounding box

(Script tags will be stripped)

## Size constraints in code

# Grid Layout

The Grid Layout arranges the items contained in the layout in a grid like style. Items can be other layout containers or user controls like labels, buttons, list controls… A grid contains of a number of rows and columns. The grid expands dynamically if more items are added. For instance, adding a new label below an existing label in the last row of a grid creates a new row.

The grid layout is the root container of a page and therefore the default layout in which other layout containers are inserted. See this video for a short introduction

(Script tags will be stripped)

## Basic Grid Layout behavior

(Script tags will be stripped)

The grid layout consists of **rows** and **columns**, therefore forming an n x m matrix of cells.

  • Each cell holds **exactly one** control, for instance label, bitmap.

  • To insert more than one control / cell, insert a **layout container** in the cell that than can contain many controls

  • The **height of each of row** is determined by the **tallest control** in the row

  • The **width of each of column** is determined by the **widest control** in the column

# Horizontal linear layout

The horizontal linear layout arranges the items within the layout **next to each** **other**. It "groups" the items contained in the layout container. You can than specify the alignment of the linear layout itself. This little video illustrates how to

  • Insert a horizontal linear layout

  • Use the **Fill Space check** to limit the automatic vertical expansion

  • Use the layout options **Match Parent** vs **wrap content** so that the layout tighly wraps the the content

  • Align left, right and center

(Script tags will be stripped)

# Vertical linear layout

The vertical linear layout arranges the items **above and below each** **other**. It "groups" the items contained in the layout container. Please see horizontal linear layout for a video demonstration.

# XY Layout

The XY Layout allows a **pixel perfect placement based on coordinates** of items. However, as it doesn't use layout concepts such as alignment and fill space, it doesn't scale automatically to the respective device format.

# Working with scroll

To add the ability to scroll horizontally and vertically within a container, you check the scroll flag on the layout panel:

(Script tags will be stripped)

This adds a ScrollableBox to the layout xml. scrollable is set to either **horizontal**, **vertical** or **all**.

(Script tags will be stripped)

That is all that is necessary to use scrolling.

## Scroll to position

To scroll to a specific position, let in our case to the middle of the scrollbox, we

  1. Add an **id** to the scrollbox to identify it. We used **sg1** here (see prior image)

  2. get handle on scrollbox using the **self.page!.drawing!.find(byId:<id of tag>)** method

  3. Determine total size that the scrollbox encloses using <SCDSvgScrollGroup>.**getContentSize()**

  4. Do simple math to determine scroll position to scroll to

  5. Scroll to position using <SCDSvgScrollGroup>.**scroll(to:<X>, y:0)**

## Makes a nicely scrollable area

(Script tags will be stripped)