ReverseLayout

ReverseLayout is similar to SimpleLayout, however views are laid out from the right to the left (for the x axis) or from the bottom to the top (for the y axis).

The attributes defined in ReverseLayout are listed in Table 4.5.

Table 4.5. The attributes defined in the ReverseLayout class
NameUsageTypeDefaultAccessibility
axisTag and JSstringyread-write
 Description. The axis to lay out components. The value for this attribute is either “x” or “y”.
spacingTag and JSnumber0read-write
 Description. The distance between two views in pixels.
insetTag and JSnumber0read-write
 Description. The distance between the container’s border and the first view in pixels.
endTag and JSbooleantrueread-write
 Description. Indicates whether or not the layout will push the subviews to the right or bottom of the containing view.

For example, listing 4.8 shows an LZX application that uses ReverseLayout.

Listing 4.8. Using reverselayout
<canvas height="100">
    <include href="utils/layouts/reverselayout.lzx"/>
    <reverselayout axis="x" end="false" spacing="10"/>
    <view width="60" height="60" bgcolor="silver"/>
    <view width="60" height="60" bgcolor="gray"/>
    <view width="60" height="60" bgcolor="black"/>
</canvas>

Note that you must include the utils/layouts/reverselayout.lzx file to use ReverseLayout.

To compile the application, use this URL:

http://localhost:8080/lps-4.0.x/app04/reverseLayoutTest1.lzx

Figure 4.8 shows the result.

Figure 4.8. Using ReverseLayout

[View full size image]

Note that the black view in Figure 4.8 is the leftmost view.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset