GridLayout

Using a GridLayout requires the GridLayout module.

//var layout = require("ui/layouts/grid-layout");
var gridLayout = new GridLayout();

Declaring a GridLayout

<GridLayout columns="80, *, auto" rows="auto, *" >
 <Button col="0" />
 <Button col="1" />
 <Button col="2" />
 // by default column and row are set to 0
 <Button row="1" colSpan="3" />
</GridLayout>

Add views to grid layout

var btn1 = new Button();
var btn2 = new Button();
var btn3 = new Button();
var btn4 = new Button();
gridLayout.addChild(btn1);
gridLayout.addChild(btn2);
gridLayout.addChild(btn3);
gridLayout.addChild(btn4);

Set column property on views - btn1 in first column, btn2 is second and btn3 in third

GridLayout.setColumn(btn1, 0);
GridLayout.setColumn(btn2, 1);
GridLayout.setColumn(btn3, 2);

Set row property on btn4.

GridLayout.setRow(btn4, 1);

Set columnSpan property on btn4 to stretch into all columns

GridLayout.setColumnSpan(btn4, 3);

Create ItemSpec for columns and rows 3 columns - 80px, *, auto size and 2 rows - 100px and auto size

// ItemSpec modes of the column refers to its width.
// Absolute size of the column
var firstColumn = new ItemSpec(80, "pixel");
// Star width means that this column will expand to fill the gap left from other columns
var secondColumn = new ItemSpec(1, "star");
// Auto size means that column will expand or shrink in order to give enough place for all child UI elements.
var thirdColumn = new ItemSpec(1, "auto");

// Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
var firstRow = new ItemSpec(1, "auto");
var secondRow = new ItemSpec(1, "star");

Add columns and rows to GridLayout

gridLayout.addColumn(firstColumn);
gridLayout.addColumn(secondColumn);
gridLayout.addColumn(thirdColumn);
gridLayout.addRow(firstRow);
gridLayout.addRow(secondRow);

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.