simplelayout extends
LzLayout, and therefore it is responsible for
arranging all of the subviews for the view that it is attached to. The
attributes of a view that simplelayout effects
are the x and y
values. simplelayout places the first subview
at (0, 0) and then places each subsequent subview based on the width
(or height) of the previous subview, depending on which axis was
specified.
The following example illustrates the use of
simplelayout.
<canvas height="60">
<view >
<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>
</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>