Linear Layout

layout: { type: 'linear', orientation : 'vertical' }
// or
layout: { type: 'linear'  } // horizontal orientation which is default

Demo

SAMPLE
CODE

Linear Layout

The Linear Layout renders child views next to each other in vertically or horizontally direction.

Orientation, vertical or horizontal is set using the layout.orientation attribute:

layout:{
    "type":"linear", "orientation" : "vertical", 
    children:[{...}, {...}]
}
layout:{
    "type":"linear", "orientation" : "horizontal",
    children:[{...}, {...}]
}

Default orientation when not specified is "horizontal"

Size of Child Views

Size of child views is set using the layout.width attribute when orientation is horizontal and layout.height when orientation is set to vertical.

Dynamic size can be set using the layout.weight keyword. The available height or width after all views with fixed size are rendered are distributed among the child views with the weight attribute.

In the example below

SAMPLE
CODE

the parent view has a height of 400. The first view has a fixed height of 100 pixels. That leaves 300 pixels for the two remaining child views. The total weight of the remaining views is 3.

The weight of the second view is 1, so it will be 100 pixels tall(1 / 3 * 300).

The second View has a height of three which gives a height of 200 (2 / 3 * 300).

Generated 2016-12-02 19:27:13