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.
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
axis | Tag and JS | string | y | read-write |
Description. The axis to lay out components. The value for this attribute is either “x” or “y”. | ||||
spacing | Tag and JS | number | 0 | read-write |
Description. The distance between two views in pixels. | ||||
inset | Tag and JS | number | 0 | read-write |
Description. The distance between the container’s border and the first view in pixels. | ||||
end | Tag and JS | boolean | true | read-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.
<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.
Note that the black view in Figure 4.8 is the leftmost view.