Change the View Sizes in a Layout

The layout is the structure that makes up the container that holds all the views and the way that they tessellate on the page. This is a tree structure with each node being a row, column or stack. Each row, column or stack can hold other rows, columns or stack and the leaf nodes being the view elements.

The way to control the height and width of individual elements in the layout is by giving the percentage values to the elements within that row or column. These are percentage values of all the elements within that row or column. All the elements within that row or column should add up to 100%, if not all the elements will be scaled up or down to be 100%. This is not the percentage width or height that the element takes up in the whole layout, it is the percentage it takes up in that row or column.

For a column you control the height of each element within that column. The elements may be views, stacks or rows.

{
   "type:" column,
   "content": [
      {
         "type": "component",
         "componentName": "view",
         "height": 25,
         "componentState": {
            ...
         }
      },
      {
         "type": "row",
         "height": 75,
         "content": [
            ...
         ]
      }
   ]
}

For a row you control the width of each element within that row. The elements may be views, stacks or columns.

{
   "type:" row,
   "content": [
      {
         "type": "component",
         "componentName": "view",
         "width": 25,
         "componentState": {
            ...
         }
      },
      {
         "type": "column",
         "width": 75,
         "content": [
            ...
         ]
      }
   ]
}