Updated April 5, 2023
Introduction to NativeScript GridLayout
NativeScript GridLayout is container layout that lets users to arrange child elements in table like manner. NativeScript has a flexible and a versatile engine for application UI layout. One of which is the GridLayout which created columns and rows to exist in UI. It is one of the most used layouts in NativeScript applications and is used to build complex layouts. Grid has rows, columns, and cells. Cell has span of one or more rows and one or more columns and contain multiple child elements that span on multiple rows and columns, can also overlap on each other. Here, we will see how NativeScript GridLayout is used in programming and designing of UI applications.
Syntax of NativeScript GridLayout
There is no particular syntax but we have a HTML like tag.
<GridLayout>
……….
</GridLayout>Properties such as columns and rows are passed as arguments to GridLayout for defining a matrix. Both rows and columns are of string types. String value representing column width and row height is delimited with comma. Valid values for both are an absolute number, auto or *. Integer value indicates absolute column width and row height. auto as a value makes the column widest and row to be the tallest child, whereas * makes the row to occupy total available vertical space, and for columns, it occupies total available horizontal space.
Additionally, we have other properties such as row, col, rowSpan, colSpan. The row and col are of Number type and specify the row and column of an element. If combined with row property and column property, it indicated the coordinates of the cell element. The rowSpan and colSpan are of Number type and specify the number of columns or rows the element will span. HTML Tag GridLayout will require width and height for rows and columns.
For e.g., GridLayout with columns and row width, height as 120, 120. And 3*3 matrix.
<GridLayout columns="120, 120" rows="120, 120">
<Label text = "0,0" row = "0" col = "0" />
<Label text = "0,1" row = "0" col = "1" />
<Label text = "0,2" row = "0" col = "2" />
<Label text = "1,0" row = "1" col = "0" />
<Label text = "1,1" row = "1" col = "1" />
<Label text = "1,2" row = "1" col = "2" />
<Label text = "2,0" row = "2" col = "0" />
<Label text = "2,1" row = "2" col = "1" />
<Label text = "2,2" row = "2" col = "2" />
</GridLayout>This Grid will give you a 3*3 matrix with text data.
Examples of NativeScript GridLayout
Given below are the examples mentioned:
Example #1
GridLayout Matrix for 2*2 in NativeScript.
Code:
<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="Grid Layout Output for 2*2 matrix">
</ActionBar>
<GridLayout columns="120, 120" rows="120, 120">
<Label text="grid 0,0" row="0" col="0" backgroundColor="#FFFF00" />
<Label text="grid 0,1" row="0" col="1" backgroundColor="#AA4A44" />
<Label text="grid 1,0" row="1" col="0" backgroundColor="#AA4A44" />
<Label text="grid 1,1" row="1" col="1" backgroundColor="#FFFF00" />
</GridLayout>
</Page>Output:
So here we have generated a 2*2 matrix with row and column width and height of 120*120.
Example #2
GridLayout for 2*2 matrix in NativeScript with star sizing.
Code:
<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="Grid Layout Output for 2*2 matrix with star sizing">
</ActionBar>
<GridLayout columns="*, 2*" rows="2*, 2*" backgroundColor="#3c495e">
<Label text="grid 0,0" row="0" col="0" backgroundColor="#FFBF00" />
<Label text="grid 0,1" row="0" col="1" backgroundColor="#DE3163" />
<Label text="grid 1,0" row="1" col="0" backgroundColor="#6495ED" />
<Label text="grid 1,1" row="1" col="1" backgroundColor="#2ECC71" />
</GridLayout>
</Page>Output:
Here we have sized the matrix using star sizing which means space is allotted proportionally to the child elements.
Example #3
GridLayout for 2*2 matrix with fixed layout and auto sizing.
Code:
<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="Grid Layout Output for 2*2 matrix with fixed layout and auto sizing">
</ActionBar>
<GridLayout columns="auto, auto" rows="100, 100" backgroundColor="#3c495e">
<Label text="Grid 0,0" row="0" col="0" backgroundColor="#E59866" />
<Label text="Grid 0,1" row="0" col="1" backgroundColor="#A04000" />
<Label text="Grid 1,0" row="1" col="0" backgroundColor="#A04000" />
<Label text="Grid 1,1" row="1" col="1" backgroundColor="#E59866" />
</GridLayout>
</Page>Output:
Here, we have designed matrix with fixed layout and auto sizing. As auto sizing is applied to columns, it will resize according to text inside the grid.
Example #4
GridLayout with merged cells and mixed sizing.
Code:
<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar
title="Grid Layout Output for matrix with mixed size merged cells">
</ActionBar>
<GridLayout columns="50, *, auto" rows="50, auto, auto">
<Label text="Grid 0,0" row="0" col="0" backgroundColor="#F1C40F" />
<Label text="Grid 0,1" row="0" col="1" colSpan="1"
backgroundColor="#BB8FCE" />
<Label text="Grid 1,0" row="1" col="0" rowSpan="2"
backgroundColor="#BB8FCE" />
<Label text="Grid 1,1" row="1" col="1" backgroundColor="#F1C40F" />
<Label text="Grid 1,2" row="1" col="2" backgroundColor="#289062" />
<Label text="Grid 2,0" row="2" col="0" backgroundColor="#F1948A" />
<Label text="Grid 2,1" row="2" col="1" backgroundColor="#BB8FCE" />
<Label text="Grid 2,2" row="2" col="2" backgroundColor="#F1C40F" />
</GridLayout>
</Page>Output:
This image here contains a grid layout with merged cells and mixed sizing, we have star sizing applied and also auto layout.
Conclusion
With this, we shall conclude the topic “NativeScript GridLayout”. We have seen what GridLayout in NativeScript is and how it is used to design matrix for responsive design of UI. We have also seen what are all the properties required for this GridLayout and according to values given to these properties, matrix can be changed. We have also seen some implementations which will help to get a good idea on the Grid concept.
Recommended Articles
This is a guide to NativeScript GridLayout. Here we discuss the introduction, syntax, and examples of NativeScript GridLayout along with code implementation. You may also have a look at the following articles to learn more –
