WrappingLayout is similar to SimpleLayout, but it will ‘wrap’ the views it manages by changing lines or columns. Table 4.9 shows the attributes defined in WrappingLayout.
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 | 1 | read-write |
Description. The distance between two views in both axes in pixels. By default, both xspacing and yspacing are assigned this value. | ||||
xinset | Tag and JS | number | 0 | read-write |
Description. The distance between the container’s border and the first view in x axis in pixels. | ||||
yinset | Tag and JS | number | 0 | read-write |
Description. The distance between the container’s border and the first view in y axis in pixels. | ||||
xspacing | Tag and JS | number | read-write | |
Description. The distance between two views in x axis in pixels. | ||||
yspacing | Tag and JS | number | read-write | |
Description. The distance between two views in y axis in pixels. | ||||
duration | Tag and JS | number | 0 | read-write |
Description. The number of milliseconds to use to animate the laying out of the views. |
For example, Listing 4.12 presents an LZX application that employs WrappingLayout.
<canvas height="100" width="80"> <wrappinglayout axis="x" spacing="5"/> <view width="30" height="40" bgcolor="silver"/> <view width="30" height="40" bgcolor="black"/> <view width="60" height="40" bgcolor="gray"/> </canvas> |
To compile the program, use the following URL:
http://localhost:8080/lps-4.0.x/app04/wrappingLayoutTest1.lzx
Figure 4.12 shows the result.
As you can see, the third view is displayed on the second line. Otherwise, using SimpleLayout, it would have been truncated.