SimpleBoundsLayout is like SimpleLayout, positioning views horizontally or vertically. However, SimpleBoundsLayout makes sure that no views overlaps other views when a view is rotated.
Table 4.4 shows the attributes in SimpleBoundsLayout.
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. |
For example, the LZX application in Listing 4.6 uses SimpleBoundsLayout.
<canvas height="100"> <include href="utils/layouts/simpleboundslayout.lzx"/> <simpleboundslayout axis="x"/> <view width="60" height="60" bgcolor="silver"/> <view width="60" height="60" bgcolor="gray" rotation="30"/> <view width="60" height="60" bgcolor="black"/> </canvas> |
Note that you must include the simpleboundslayout.lzx file under utils/layouts to use this layout. To compile the application, invoke this URL:
http://localhost:8080/lps-4.0.x/app04/simpleBoundsLayoutTest1.lzx
The generated output is displayed in Figure 4.6.
For comparison, Listing 4.7 shows similar code that uses SimpleLayout.
<canvas height="100"> <simplelayout axis="x"/> <view width="60" height="60" bgcolor="silver"/> <view width="60" height="60" bgcolor="gray" rotation="30"/> <view width="60" height="60" bgcolor="black"/> </canvas> |
Use this URL to compile and run the code in Listing 4.7.
http://localhost:8080/lps-4.0.x/app04/simpleBoundsLayoutTest2.lzx
The result is shown in Figure 4.7: