Apache Flex 4.16.1 API Reference | All Packages | All Classes | Index | Frames No Frames |
TileLayout

Package | spark.layouts
Class | public class TileLayout
Inheritance | TileLayout LayoutBase OnDemandEventDispatcher Object

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The TileLayout class arranges layout elements in columns and rows of equally-sized cells. The TileLayout class uses a number of properties that control orientation, count, size, gap and justification of the columns and the rows as well as element alignment within the cells.

Per-element supported constraints are `percentWidth` and `percentHeight`. Element's minimum and maximum sizes are always be respected and where possible, an element's size is limited to less then or equal of the cell size.

When not explicitly set, the `columnWidth` property is calculated as the maximum preferred bounds width of all elements and the `columnHeight` property is calculated as the maximum preferred bounds height of all elements.

When not explicitly set, the `columnCount` and `rowCount` properties are calculated from any explicit width and height settings for the layout target, and `columnWidth` and `columnHeight`. In case none is specified, the `columnCount` and `rowCount` values are picked so that the resulting pixel area is as square as possible.

The measured size is calculated from the `columnCount`, `rowCount`, `columnWidth`, `rowHeight` properties and the gap sizes.

The default measured size, when no properties were explicitly set, is as square as possible area and is large enough to fit all elements.

In other cases the measured size may not be big enough to fit all elements. For example, when both `columnCount` and `rowCount` are explicitly set to values such that `columnCount` * `rowCount` < element count.

The minimum measured size is calculated the same way as the measured size but it's guaranteed to encompass enough rows and columns along the minor axis to fit all elements.

MXML Syntax Show MXML Syntax
Hide MXML Syntax

The `<s:TileLayout>` tag inherits all of the tag attributes of its superclass and adds the following tag attributes:

      <s:TileLayout
        Properties
        columnAlign="left"
        columnWidth="NaN"
        horizontalAlign="justify"
        horizontalGap="6"
        orientation="rows"
        requestedColumnCount="-1"
        requestedRowCount="-1"
        rowAlign="top"
        rowCount="-1"
        rowHeight="NaN"
        verticalAlign="justify"
        verticalGap="6"
        padding="0"
      />

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined By
--- | --- | ---
|  | clipAndEnableScrolling : Boolean If true, specifies to clip the children to the boundaries of the viewport. | LayoutBase
|  | columnAlign : String Specifies how to justify the fully visible columns to the container width. | TileLayout
|  | columnCount : int [read-only] Contain the actual column count. | TileLayout
|  | columnWidth : Number Contain the actual column width, in pixels. | TileLayout
|  | dropIndicator : DisplayObject The DisplayObject that this layout uses for the drop indicator during a drag-and-drop operation. | LayoutBase
|  | horizontalAlign : String Specifies how to align the elements within the cells in the horizontal direction. | TileLayout
|  | horizontalGap : Number Horizontal space between columns, in pixels. | TileLayout
|  | horizontalScrollPosition : Number The x coordinate of the origin of the viewport in the component's coordinate system, where the default value is (0,0) corresponding to the upper-left corner of the component. | LayoutBase
|  | orientation : String Specifies whether elements are arranged row by row or column by column. | TileLayout
|  | padding : Number The minimum number of pixels between the container's edges and the edges of the layout element. | TileLayout
|  | paddingBottom : Number Number of pixels between the container's bottom edge and the bottom edge of the last layout element. | TileLayout
|  | paddingLeft : Number The minimum number of pixels between the container's left edge and the left edge of the layout element. | TileLayout
|  | paddingRight : Number The minimum number of pixels between the container's right edge and the right edge of the layout element. | TileLayout
|  | paddingTop : Number Number of pixels between the container's top edge and the top edge of the first layout element. | TileLayout
|  | requestedColumnCount : int Number of columns to be displayed. | TileLayout
|  | requestedRowCount : int Number of rows to be displayed. | TileLayout
|  | rowAlign : String Specifies how to justify the fully visible rows to the container height. | TileLayout
|  | rowCount : int [read-only] The row count. | TileLayout
|  | rowHeight : Number The row height, in pixels. | TileLayout
|  | target : GroupBase The GroupBase container whose elements are measured, sized and positioned by this layout. | LayoutBase
|  | typicalLayoutElement : ILayoutElement Used by layouts when fixed row/column sizes are requested but a specific size isn't specified. | LayoutBase
|  | useVirtualLayout : Boolean A container can hold any number of children. | LayoutBase
|  | verticalAlign : String Specifies how to align the elements within the cells in the vertical direction. | TileLayout
|  | verticalGap : Number Vertical space between rows, in pixels. | TileLayout
|  | verticalScrollPosition : Number The y coordinate of the origin of the viewport in the component's coordinate system, where the default value is (0,0) corresponding to the upper-left corner of the component. | LayoutBase

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | TileLayout() Constructor. | TileLayout
|  | addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void | OnDemandEventDispatcher
|  | calculateDropLocation(dragEvent:DragEvent):DropLocation Calculates the drop location in the data provider of the drop target for the specified dragEvent. | LayoutBase
|  | clearVirtualLayoutCache():void When useVirtualLayout is true, this method can be used by the layout target to clear cached layout information when the target changes. | LayoutBase
|  | dispatchEvent(event:Event):Boolean | OnDemandEventDispatcher
|  | elementAdded(index:int):void Called by the target after a layout element has been added and before the target's size and display list are validated. | LayoutBase
|  | elementRemoved(index:int):void This method must is called by the target after a layout element has been removed and before the target's size and display list are validated. | LayoutBase
|  | getElementBounds(index:int):Rectangle Returns the specified element's layout bounds as a Rectangle or null if the index is invalid, the corresponding element is null, includeInLayout=false, or if this layout's target property is null. | LayoutBase
|  | getHorizontalScrollPositionDelta(navigationUnit:uint):Number Returns the change to the horizontal scroll position to handle different scrolling options. | LayoutBase
|  | getNavigationDestinationIndex(currentIndex:int, navigationUnit:uint, arrowKeysWrapFocus:Boolean):int Delegation method that determines which item to navigate to based on the current item in focus and user input in terms of NavigationUnit. | LayoutBase
|  | getScrollPositionDeltaToElement(index:int):Point Computes the verticalScrollPosition and horizontalScrollPosition deltas needed to scroll the element at the specified index into view. | LayoutBase
|  | getVerticalScrollPositionDelta(navigationUnit:uint):Number Returns the change to the vertical scroll position to handle different scrolling options. | LayoutBase
|  | hasEventListener(type:String):Boolean | OnDemandEventDispatcher
|  | hideDropIndicator():void Hides the previously shown drop indicator, created by the showDropIndicator() method, removes it from the display list and also stops the drag scrolling. | LayoutBase
|  | measure():void Measures the target's default size based on its content, and optionally measures the target's default minimum size. | LayoutBase
|  | removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void | OnDemandEventDispatcher
|  | showDropIndicator(dropLocation:DropLocation):void Sizes, positions and parents the drop indicator based on the specified drop location. | LayoutBase
|  | updateDisplayList(width:Number, height:Number):void Sizes and positions the target's elements. | LayoutBase
|  | updateScrollRect(w:Number, h:Number):void Called by the target at the end of its updateDisplayList to have the layout update its scrollRect. | LayoutBase
|  | willTrigger(type:String):Boolean | OnDemandEventDispatcher

Protected Methods
Show Inherited Protected Methods
Show Inherited Protected Methods

| Method | Defined By
--- | --- | ---
|  | calculateDragScrollDelta(dropLocation:DropLocation, elapsedTime:Number):Point Calculates how much to scroll for the specified dropLocation during a drag and drop gesture. | LayoutBase
|  | calculateDropIndex(x:Number, y:Number):int [override] Returns the index where a new item should be inserted if the user releases the mouse at the specified coordinates while completing a drag and drop gesture. | TileLayout
|  | calculateDropIndicatorBounds(dropLocation:DropLocation):Rectangle [override] Calculates the bounds for the drop indicator that provides visual feedback to the user of where the items will be inserted at the end of a drag and drop gesture. | TileLayout
|  | getElementBoundsAboveScrollRect(scrollRect:Rectangle):Rectangle Returns the bounds of the first layout element that either spans or is above the scrollRect's top edge. | LayoutBase
|  | getElementBoundsBelowScrollRect(scrollRect:Rectangle):Rectangle Returns the bounds of the first layout element that either spans or is below the scrollRect's bottom edge. | LayoutBase
|  | getElementBoundsLeftOfScrollRect(scrollRect:Rectangle):Rectangle Returns the bounds of the first layout element that either spans or is to the left of the scrollRect's left edge. | LayoutBase
|  | getElementBoundsRightOfScrollRect(scrollRect:Rectangle):Rectangle Returns the bounds of the first layout element that either spans or is to the right of the scrollRect's right edge. | LayoutBase
|  | getScrollRect():Rectangle Returns the bounds of the target's scroll rectangle in layout coordinates. | LayoutBase
|  | scrollPositionChanged():void Called when the verticalScrollPosition or horizontalScrollPosition properties change. | LayoutBase

Property Detail

columnAlign | property

`columnAlign:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Specifies how to justify the fully visible columns to the container width. ActionScript values can be `ColumnAlign.LEFT`, `ColumnAlign.JUSTIFY_USING_GAP` and `ColumnAlign.JUSTIFY_USING_WIDTH`. MXML values can be `"left"`, `"justifyUsingGap"` and `"justifyUsingWidth"`.

When set to `ColumnAlign.LEFT` it turns column justification off. There may be partially visible columns or whitespace between the last column and the right edge of the container. This is the default value.

When set to `ColumnAlign.JUSTIFY_USING_GAP` the `horizontalGap` actual value increases so that the last fully visible column right edge aligns with the container's right edge. In case there is only a single fully visible column, the `horizontalGap` actual value increases so that it pushes any partially visible column beyond the right edge of the container. Note that explicitly setting the `horizontalGap` property does not turn off justification. It only determines the initial gap value. Justification may increases it.

When set to `ColumnAlign.JUSTIFY_USING_WIDTH` the `columnWidth` actual value increases so that the last fully visible column right edge aligns with the container's right edge. Note that explicitly setting the `columnWidth` property does not turn off justification. It only determines the initial column width value. Justification may increases it.

The default value is `ColumnAlign.LEFT`.

Implementation
`public function get columnAlign():String`
`public function set columnAlign(value:String):void`

See also

horizontalGap
columnWidth
rowAlign

columnCount | property |

`columnCount:int` [read-only]

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Contain the actual column count.

The default value is `-1`.

This property can be used as the source for data binding.

Implementation
`public function get columnCount():int`

See also

rowCount
columnAlign

columnWidth | property |

`columnWidth:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Contain the actual column width, in pixels.

If not explicitly set, the column width is determined from the width of the widest element.

If the `columnAlign` property is set to `"justifyUsingWidth"`, the column width grows to the container width to justify the fully-visible columns.

The default value is `NaN`.

This property can be used as the source for data binding.

Implementation
`public function get columnWidth():Number`
`public function set columnWidth(value:Number):void`

See also

rowHeight
columnAlign

horizontalAlign | property |

`horizontalAlign:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Specifies how to align the elements within the cells in the horizontal direction. Supported values are `HorizontalAlign.LEFT`, `HorizontalAlign.CENTER`, `HorizontalAlign.RIGHT`, `HorizontalAlign.JUSTIFY`.

When set to `HorizontalAlign.JUSTIFY` the width of each element is set to the `columnWidth`.

The default value is ``HorizontalAlign.JUSTIFY``.

Implementation
`public function get horizontalAlign():String`
`public function set horizontalAlign(value:String):void`

horizontalGap | property |

`horizontalGap:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Horizontal space between columns, in pixels.

The default value is `6`.

This property can be used as the source for data binding.

Implementation
`public function get horizontalGap():Number`
`public function set horizontalGap(value:Number):void`

See also

verticalGap
columnAlign

orientation | property |

`orientation:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Specifies whether elements are arranged row by row or column by column. ActionScript values can be `TileOrientation.ROWS` and `TileOrientation.COLUMNS`. MXML values can be `"rows"` and `"columns"`.

The default value is `TileOrientation.ROWS`.

Implementation
`public function get orientation():String`
`public function set orientation(value:String):void`

padding | property |

`padding:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The minimum number of pixels between the container's edges and the edges of the layout element.

The default value is `0`.

Implementation
`public function get padding():Number`
`public function set padding(value:Number):void`

paddingBottom | property |

`paddingBottom:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Number of pixels between the container's bottom edge and the bottom edge of the last layout element.

The default value is `0`.

Implementation
`public function get paddingBottom():Number`
`public function set paddingBottom(value:Number):void`

paddingLeft | property |

`paddingLeft:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The minimum number of pixels between the container's left edge and the left edge of the layout element.

The default value is `0`.

Implementation
`public function get paddingLeft():Number`
`public function set paddingLeft(value:Number):void`

paddingRight | property |

`paddingRight:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The minimum number of pixels between the container's right edge and the right edge of the layout element.

The default value is `0`.

Implementation
`public function get paddingRight():Number`
`public function set paddingRight(value:Number):void`

paddingTop | property |

`paddingTop:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Number of pixels between the container's top edge and the top edge of the first layout element.

The default value is `0`.

Implementation
`public function get paddingTop():Number`
`public function set paddingTop(value:Number):void`

requestedColumnCount | property |

`requestedColumnCount:int`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Number of columns to be displayed.

Set to -1 to allow the TileLayout to determine the column count automatically.

If the `orientation` property is set to `TileOrientation.ROWS`, then setting this property has no effect In this case, the `rowCount` is explicitly set, and the container width is explicitly set.

The default value is `-1`.

Implementation
`public function get requestedColumnCount():int`
`public function set requestedColumnCount(value:int):void`

See also

columnCount
columnAlign

requestedRowCount | property |

`requestedRowCount:int`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Number of rows to be displayed.

Set to -1 to remove explicit override and allow the TileLayout to determine the row count automatically.

If the `orientation` property is set to `TileOrientation.COLUMNS`, setting this property has no effect. in this case, `columnCount` is explicitly set, and the container height is explicitly set.

The default value is `-1`.

Implementation
`public function get requestedRowCount():int`
`public function set requestedRowCount(value:int):void`

See also

rowCount
rowAlign

rowAlign | property |

`rowAlign:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Specifies how to justify the fully visible rows to the container height. ActionScript values can be `RowAlign.TOP`, `RowAlign.JUSTIFY_USING_GAP` and `RowAlign.JUSTIFY_USING_HEIGHT`. MXML values can be `"top"`, `"justifyUsingGap"` and `"justifyUsingHeight"`.

When set to `RowAlign.TOP` it turns column justification off. There might be partially visible rows or whitespace between the last row and the bottom edge of the container. This is the default value.

When set to `RowAlign.JUSTIFY_USING_GAP` the `verticalGap` actual value increases so that the last fully visible row bottom edge aligns with the container's bottom edge. In case there is only a single fully visible row, the value of `verticalGap` increases so that it pushes any partially visible row beyond the bottom edge of the container. Note that explicitly setting the `verticalGap` does not turn off justification, but just determines the initial gap value. Justification can then increases it.

When set to `RowAlign.JUSTIFY_USING_HEIGHT` the `rowHeight` actual value increases so that the last fully visible row bottom edge aligns with the container's bottom edge. Note that explicitly setting the `rowHeight` does not turn off justification, but determines the initial row height value. Justification can then increase it.

The default value is `RowAlign.TOP`.

Implementation
`public function get rowAlign():String`
`public function set rowAlign(value:String):void`

See also

verticalGap
rowHeight
columnAlign

rowCount | property |

`rowCount:int` [read-only]

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The row count.

The default value is `-1`.

This property can be used as the source for data binding.

Implementation
`public function get rowCount():int`

See also

requestedRowCount
columnCount

rowHeight | property |

`rowHeight:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The row height, in pixels.

If not explicitly set, the row height is determined from the maximum of elements' height.

If `rowAlign` is set to "justifyUsingHeight", the actual row height increases to justify the fully-visible rows to the container height.

The default value is `NaN`.

This property can be used as the source for data binding.

Implementation
`public function get rowHeight():Number`
`public function set rowHeight(value:Number):void`

See also

columnWidth
rowAlign

verticalAlign | property |

`verticalAlign:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Specifies how to align the elements within the cells in the vertical direction. Supported values are `VerticalAlign.TOP`, `VerticalAlign.MIDDLE`, `VerticalAlign.BOTTOM`, `VerticalAlign.JUSTIFY`.

When set to `VerticalAlign.JUSTIFY`, the height of each element is set to `rowHeight`.

The default value is ``VerticalAlign.JUSTIFY``.

Implementation
`public function get verticalAlign():String`
`public function set verticalAlign(value:String):void`

verticalGap | property |

`verticalGap:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Vertical space between rows, in pixels.

The default value is `6`.

This property can be used as the source for data binding.

Implementation
`public function get verticalGap():Number`
`public function set verticalGap(value:Number):void`

See also

horizontalGap
rowAlign
Constructor Detail

TileLayout | () | Constructor

`public function TileLayout()`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Constructor.

Method Detail

calculateDropIndex | () | method

`override protected function calculateDropIndex(x:Number, y:Number):int`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Returns the index where a new item should be inserted if the user releases the mouse at the specified coordinates while completing a drag and drop gesture. Called by the `calculatedDropLocation()` method.

Parameters

| `x:Number` — The x coordinate of the drag and drop gesture, in local coordinates.
| `y:Number` — The y coordinate of the drag and drop gesture, in the drop target's local coordinates.

Returns

| `int` — The drop index or -1 if the drop operation is not available at the specified coordinates.

calculateDropIndicatorBounds | () | method |

`override protected function calculateDropIndicatorBounds(dropLocation:DropLocation):Rectangle`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Calculates the bounds for the drop indicator that provides visual feedback to the user of where the items will be inserted at the end of a drag and drop gesture. Called by the `showDropIndicator()` method.

Parameters

| `dropLocation:DropLocation` — A valid DropLocation object previously returned by the `calculateDropLocation()` method.

Returns

| `Rectangle` — The bounds for the drop indicator or null.

Wed Nov 15 2017, 09:50 AM +01:00