See Also:
Accordion Layout
Grid Layout
Linear Layout
Navigation Bar Layout
Relative Layout
Fill Layout
ViewPager layout
Tabs layout
Docking layout
layout: { type: 'table' }The Table layout is used to render child views inside a table.
layout.columns is used to define the width of each column.
layout: {
type: 'table',
height:400, width: 400,
columns: [
{width: 100}, {width: 100}, {weight: 1}
]
}Use width to specify a width in pixels or weight to give the column a dynamic width.
In the example below
layout: {
type: 'table',
height:400, width: 400,
columns: [
{weight: 1}, {width: 1}, {weight: 2}
]
}The first and second column column will get a width of 25%. The third column will get a width of 50%.
The code above can also be written like this:
layout: {
type: 'table',
height:400, width: 400,
columns: [
{weight: 25}, {width: 25}, {weight: 50 }
]
}where you can think in the terms of percentage.
When you have columns with a fixed width, the weight is of the remaining width after the fixed widths has been subtracted.
layout: {
type: 'table',
height:400, width: 400, // Total width is 400
columns: [
{ width: 100 } , {weight: 25}, {width: 25}, {weight: 50 }, { width: 100 } // Two columns with fixed width.
]
}In the example above, You have two columns with a fixed width of 100. 400-200 gives you 200 pixels to be distributed between the columns with dynamic width(weight).
To make a child view span more than one column or row, specify rowspan on the childs layout object.
Example:
Whenever a child view should start at a new row, set row:true on it's layout object
children:[
{...}
{ layout: { row: true } ...
...
]Vertical alignment of child views(top,middle or bottom) is set using the layout.vAlign property.
children:[
{...}
{ layout: { vAlign: 'middle' } ...
...
]Default vAlign is "top".
