<resizelayout>

resizelayout extends LzLayout, and therefore is responsible for arranging a set of views. Like simplelayout, resizelayout positions a set of views vertically or horizontally depending on the axis specified. The difference is that resizelayout can also stretch views.

<canvas height="100">
  <view bgcolor="yellow" width="200">
    <view bgcolor="blue" height="30" width="50"/>
    <view bgcolor="red" height="30" width="50"/>
    <view bgcolor="blue" height="30" width="50"/>
    <simplelayout axis="x" spacing="10"/>
  </view>
  
  <view y="40" bgcolor="yellow" width="200">
    <view bgcolor="blue" height="30" width="50"/>
    <view bgcolor="red" height="30" options="releasetolayout"/>
    <view bgcolor="blue" height="30" width="50"/>
    <resizelayout axis="x"/>
  </view>
</canvas>

This example is similar to the one used in stableborderlayout, and is in fact visually equivalent. This is because stableborderlayout is a special case of resizelayout that is optimized for the common occurrence of having two fixed views with one stretchable view between them.

Unlike stableborderlayout, resizelayout works with any number of views. All the views that are controlled by a resizelayout are assumed to be fixed size until defined differently. A view is defined as stretchable using the attribute options="releasetolayout". These views will stretch to fill in the space that is not taken by the fixed views. The resizelayout uses the width (or height) of its view to determine the total amount of space to fill, and then those subviews are placed and stretched to fill that space. If there is more than one subview that is stretchable, then the available space is split evenly between those subviews.

Then next example demonstrates what happens when two views are stretchable. The difference between the top and bottom views is only the spacing attribute.

<canvas height="100">
  <view bgcolor="yellow" width="300">
    <view bgcolor="blue" height="30" width="50"/>
    <view bgcolor="red" height="30" options="releasetolayout"/>
    <view bgcolor="blue" height="30" width="50"/>
    <view bgcolor="red" height="30" options="releasetolayout"/>
    <resizelayout axis="x"/>
  </view >

  <view y="40" bgcolor="yellow" width="300">
    <view bgcolor="blue" height="30" width="50"/>
    <view bgcolor="red" height="30" options="releasetolayout"/>
    <view bgcolor="blue" height="30" width="50"/>
    <view bgcolor="red" height="30" options="releasetolayout"/>
    <resizelayout axis="x" spacing="5"/>
  </view>
</canvas>