Breaking Out of Layouts

[antun]

It's quite common practice to use layouts to align and space views. If you click on the green view in the example below, it will grow in height, and the other views will shift over conveniently.


<canvas>
<simplelayout spacing="2" />
<view width="200" height="25" bgcolor="red" />
<view width="200" height="25" bgcolor="green"
onclick="this.setHeight( 45 )" />
<view width="200" height="25" bgcolor="blue" />
<view width="200" height="25" bgcolor="yellow" />
</canvas>


Sometimes this behaviour is not so convenient. To have a view be completely exempt from any layouts, use the options="ignorelayout" attribute:


<canvas>
<simplelayout spacing="2" />
<view width="200" height="25" bgcolor="red" />
<view width="200" height="25" bgcolor="green"
onclick="this.setHeight( 45 )"
options="ignorelayout"/>
<view width="200" height="25" bgcolor="blue" />
<view width="200" height="25" bgcolor="yellow" />
</canvas>


Alternatively, if you need a view to have the layout applied, but need to change its size later, without affecting other views, wrap it in a view with a fixed height:


<canvas>
<simplelayout spacing="2" />
<view width="200" height="25" bgcolor="red" />
<view height="25">
<view width="200" height="25" bgcolor="green"
onclick="this.setHeight( 45 )"
options="ignorelayout"/>
</view>
<view width="200" height="25" bgcolor="blue" />
<view width="200" height="25" bgcolor="yellow" />
</canvas>


Although the green view remains visible (clipping was not turned on for the parent), the height of its parent remains at 25 because it was explicitly declared.

Enjoy!