Layout Manager

Version 1.0 - December 12th, 2016


Please see the UgLayoutControlDemo project for the source code created in this chapter. See Installing examples for information on how to download the examples.

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 different kind of grids to display the mobile pages.

There are four major layout types

  • Grid Layout
  • XY Layout
  • Vertical Linear Layout
  • Horizontal Linear Layout

Each of these types can be contained in each other to achieve the desired layout.

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

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

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:

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

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!.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)
func gotoMiddle() {

  // Get scrollbox
  let scrollbox =!.drawing!.find(byId:"sg1") as! SCDSvgScrollGroup

  // get total size, i.e. the width and height of entire scrollbox
  let contentSize = scrollbox.getContentSize()

  // the scrollbox.width :  visible part of the scrollbox
  let position = (contentSize.width  - scrollbox.width) / 2
  scrollbox.scroll(to: position, y: 0)

Makes a nicely scrollable area

Handling scroll event

How to handle scroll event...

Layout Manager

Version 1.0 - December 12th, 2016