resizelayout extends <layout>, 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>
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
axis
|
string | String | y | read/write |
| The axis in which this layout operates either 'x' or 'y'. | ||||
spacing
|
expression | any | 0 | read/write |
| A pixel amount to use between each view in the layout | ||||
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
Methods inherited from <layout>
addSubview, ignore, lock, releaseLayout, removeSubview, reset, setLayoutOrder, swapSubviewOrder, unlock, update
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events