simplelayout extends LzLayout. simplelayout arranges sibling views along the x and y axis, or both. simplelayout places each sibling view based on the width
(or height) of the previous subview, depending on whether the x-axis or the y-axis was specified.
The following example illustrates the use of
simplelayout. The first instance of simplelayout lays out the sibling views 'across' and 'down' along the y-axis. Then the 'across' and 'down' views apply their own simplelayout: three blue views are simply laid out on the x-axis within the 'across' view, and three red views are simply laid out on the y-axis within the 'down' view.
<canvas height="160">
<simplelayout axis="y" spacing="10"/>
<view id="across">
<simplelayout axis="x" spacing="10"/>
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="blue" height="30" width="50"/>
</view>
<view id="down">
<simplelayout axis="y" spacing="10"/>
<view bgcolor="red" height="30" width="50"/>
<view bgcolor="red" height="30" width="50"/>
<view bgcolor="red" height="30" width="50"/>
</view>
</canvas>
More than one layout can be applied to a view as long as the attributes are controlled by only one layout. This next example demonstrates this feature.
<canvas height="120">
<view >
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="blue" height="30" width="50"/>
<simplelayout axis="x" spacing="0"/>
<simplelayout axis="y" spacing="0"/>
</view >
</canvas>
Finally, like all layouts, when an attribute of a subview changes its value and that new value effects the overall layout, then the layout object will update automatically. This is shown in the next example.
<canvas height="65">
<view>
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="red" height="30" width="50"
onclick="this.animate('width', 100, 500, true)"/>
<view bgcolor="blue" height="30" width="50"/>
<simplelayout axis="x" spacing="10"/>
</view>
<view >
<text>Click on the red rectangle. Layout is conserved as its size changes.</text>
</view>
<simplelayout axis="y" spacing="15"/>
</canvas>