spark.layouts

# TileLayout - AS3 Flex

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"
      />

More examples

Set the layout of a Spark container
Set the padding and gap of a layout
Set the alignment of a layout
Set the row height or column width of a layout

Learn more

About Spark layouts

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
|  | constructor : Object A reference to the class object or constructor function for a given object instance. | Object
|  | 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
|  | 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 Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event. | 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 Dispatches an event into the event flow. | 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 Checks whether the EventDispatcher object has any listeners registered for a specific type of event. | OnDemandEventDispatcher
|  | hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined. | Object
|  | 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
|  | isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter. | Object
|  | measure():void Measures the target's default size based on its content, and optionally measures the target's default minimum size. | LayoutBase
|  | propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable. | Object
|  | removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void Removes a listener from the EventDispatcher object. | OnDemandEventDispatcher
|  | setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations. | Object
|  | showDropIndicator(dropLocation:DropLocation):void Sizes, positions and parents the drop indicator based on the specified drop location. | LayoutBase
|  | toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions. | Object
|  | toString():String Returns the string representation of the specified object. | Object
|  | 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
|  | valueOf():Object Returns the primitive value of the specified object. | Object
|  | willTrigger(type:String):Boolean Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type. | OnDemandEventDispatcher

Protected Methods
Hide 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`

Related API Elements

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. When this property is modified, it dispatches the `propertyChange` event.

Implementation
`public function get columnCount():int`

Related API Elements

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. When this property is modified, it dispatches the `propertyChange` event.

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

Related API Elements

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. When this property is modified, it dispatches the `propertyChange` event.

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

Related API Elements

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`

### 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`

Related API Elements

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`

Related API Elements

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`

Related API Elements

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. When this property is modified, it dispatches the `propertyChange` event.

Implementation
`public function get rowCount():int`

Related API Elements

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. When this property is modified, it dispatches the `propertyChange` event.

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

Related API Elements

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. When this property is modified, it dispatches the `propertyChange` event.

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

Related API Elements

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.

© 2015 Adobe Systems Incorporated. All rights reserved.
Mon Apr 10 2017, 12:28 PM -07:00