This tutorial provides more insight into using the grid layout and shows you how to easily build a tile based navigation menu:

📘

Sourcecode

Please see the UgTilesMenuDemo project for the source code created in this chapter. See Installing examples for information on how to download the examples from https://github.com/scadedoc/UgExamples/tree/master/UgTilesMenuDemo

General Layout

The general layout for the entry page consists primarily of a grid. Our grid grid1 contains of an arbitrary number of of rows and columns. You create new rows/columns but adding any new control next and below to each other

In our layout, we add 9 vertical layouts into the grid. Each vertical layout contains a bitmap and a label, where the label displays the menu title:

Configure vertical container

The vertical container verticalview1 has following layout

• the horizontal layout has been set to fill space so that it expands and fills up the entire horizontal space
• the vertical layout fill space setting was unchecked, as we don't want to expand vertically. The tiles keep their height and are only expanded vertically.
• we set the background color of the tile using Background | Color

Configure bitmap and label

The idea here is to have the label always on the bottom of the vertical container, independent of how high the bitmap is. Therefore, we configure the bitmap to expand vertically and fill space, whereas the label has fill space unchecked. This results in the label being pushed down all the way:

Understanding cell size

The cell height in a row is determined by the highest cell in that row. The cell width in a column is determined by the widest cell in the column

To make all cells the same height and width h and w, make sure there at least one cell in each row and column that has h and w. No other cell may exceed h and w.

Setting margins between cells

The grid has attributes that determine the vertical and horizontal distance between each cell.

The attributes are a little hidden in the advanced property setting dialog:

You can then set the horizontal and vertical distance

Capture click event

Now, add a click event to each vertical container. Add the event to the vertical container, not the bitmap or label. By doing so, you make sure that touches are thoroughly captured. We can keep the code very short by assuming that the name of the vertical container stays almost the same:

import ScadeKit

class MainPageAdapter: SCDLatticePageAdapter {

	// page adapter initialization
	override func load(_ path: String) {		
		super.load(path)
		
		[1,2,3,4,5,6,7].forEach{
			let name = "verticalview\($0)";
			if let clickable = self.page!.getWidgetByName(name) as? SCDWidgetsClickable {
				clickable.onClick.append(SCDWidgetsEventHandler{ _ in self.menuClicked(name)})
			}
		}
	}
	
	func menuClicked(_ id:String) {
		print("Menu \(id) clicked")
	}
}

Make grid scrollable

Finally, make the grid scrollable vertically by checking the vertical scroll bar. There is no need for horizontal scrolling, as we have a fixed width of 3 tiles that expand to the width of the device:

Making it scrollable allows to adopt for different heights, or when you hold the device horizontally: