User Tools

Site Tools


layout

Layout

The Layout sets the locations and orientations of a container's display objects. There is a different distribution for each layout type specified by the classRef attribute.


Characteristic

Definition
Type Object
Category Layouts
Scope *
Position *
Parents Container and TouchContainer
Children none
Gestures none
Requirements classRef
Attribute Type Description
classRef text specifies the layout type

Layout Types

Local vs. Global

Layouts are classified as either local or global depending on where they are defined.

A global layout is defined outside of the container inside of a LayoutKit and is applied to the container by assigning its id to the container's layout property.

<LayoutKit>
    <Layout id="grid" classRef="GridLayout" rows="2" columns="2" spacingX="500" spacingY="600"/>
</LayoutKit>

<Container layout="grid"> 
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
</Container>

A local layout is defined inside of the container as a child and is automatically applied to the content.

<Container> 
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Layout id="grid" classRef="GridLayout" rows="2" columns="2" spacingX="500" spacingY="600"/>
</Container>

In addition, a container can store local layouts in a list by defining multiple children layouts. This feature provides the option to dynamically switch between layouts. By default, the first child layout is initially applied to the container's content.

<Container> 
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Layout id="grid" classRef="GridLayout" rows="2" columns="2" spacingX="500" spacingY="600"/>
    <Layout id="fan" classRef="FanLayout" angle="10" tween="true" tweenTime="1500"/>
    <Layout id="point" classRef="PointLayout" points="10,400,200,250,450,350,400,400,523"/>
    <Layout id="random" classRef="RandomLayout" maxX="400" maxY="500" minRot="-30" maxRot="30" type="randomXYRotation" tween="true" tweenTime="1500"/>
</Container>

Aside from reordering the children, the initial layout can be specified in the same manner as a global layout. The following example applies the third local layout by assigning its id to the container's layout property.

<Container layout="point"> 
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Image src="images/plane.jpg" scale=".3"/>
    <Layout id="grid" classRef="GridLayout" rows="2" columns="2" spacingX="500" spacingY="600"/>
    <Layout id="fan" classRef="FanLayout" angle="10" tween="true" tweenTime="1500"/>
    <Layout id="point" classRef="PointLayout" points="10,400,200,250,450,350,400,400"/>
    <Layout id="random" classRef="RandomLayout" maxX="400" maxY="500" minRot="-30" maxRot="30" type="randomXYRotation" tween="true" tweenTime="1500"/>
</Container>
layout.txt · Last modified: 2015/09/18 14:15 by glass