跳到主要内容

eui.TileLayout

包    eui

类    public class TileLayout

继承    eui.TileLayout → eui.LayoutBase → egret.EventDispatcher → egret.HashObject

TileLayout 类在单元格大小相等的列和行中排列布局元素。TileLayout 类使用许多属性来控制列和行的方向、计数、大小、间隙和两端对齐以及单元格内的元素对齐。

公共属性​

属性
columnAlign : string
指定如何将完全可见列与容器宽度对齐
columnCount : number
实际列计数
columnWidth : number
包含实际列宽（以像素为单位）
horizontalAlign : string
指定如何在水平方向上对齐单元格内的元素
horizontalGap : number
列之间的水平空间（以像素为单位）
orientation : string
指定是逐行还是逐列排列元素
paddingBottom : number
容器的底边缘与所有容器的布局元素的底边缘之间的最少像素数
paddingLeft : number
容器的左边缘与第一个布局元素的左边缘之间的像素数
paddingRight : number
容器的右边缘与最后一个布局元素的右边缘之间的像素数
paddingTop : number
容器的顶边缘与所有容器的布局元素的顶边缘之间的最少像素数
requestedColumnCount : number
要显示的列数
requestedRowCount : number
要显示的行数
rowAlign : string
指定如何将完全可见行与容器高度对齐
rowCount : number
行计数
rowHeight : number
行高（以像素为单位）
verticalAlign : string
Specifies how to align the elements within the cells in the vertical direction.Supported values areVerticalAlign.TOP、VerticalAlign.MIDDLE、VerticalAlign.BOTTOM、JustifyAlign.JUSTIFY
verticalGap : number
行之间的垂直空间（以像素为单位）

公共方法​

方法
TileLayout()
构造函数
clearVirtualLayoutCache():void
如果 useVirtualLayout 为 true，则当布局目标改变时，布局目标可以使用此方法来清除已缓存布局信息
measure():void
基于目标的内容测量其默认大小
scrollPositionChanged():void
verticalScrollPosition 或 horizontalScrollPosition属性更改时调用
updateDisplayList(width:number,height:number):void
调整目标的元素的大小并定位这些元素

属性详细信息​

columnAlign​

columnAlign : string = ColumnAlign.LEFT

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

指定如何将完全可见列与容器宽度对齐。设置为 ColumnAlign.LEFT 时，它会关闭列两端对齐。在容器的最后一列和右边缘之间可能存在部分可见的列或空白。这是默认值。设置为 ColumnAlign.JUSTIFY_USING_GAP 时，horizontalGap 的实际值将增大，这样最后一个完全可见列右边缘会与容器的右边缘对齐。仅存在一个完全可见列时，horizontalGap 的实际值将增大，这样它会将任何部分可见列推到容器的右边缘之外。请注意显式设置 horizontalGap 属性不会关闭两端对齐。它仅确定初始间隙值。两端对齐可能会增大它。设置为 ColumnAlign.JUSTIFY_USING_WIDTH 时，columnWidth 的实际值将增大，这样最后一个完全可见列右边缘会与容器的右边缘对齐。请注意显式设置 columnWidth 属性不会关闭两端对齐。它仅确定初始列宽度值。两端对齐可能会增大它。

columnCount​

columnCount : number = -1

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

实际列计数。

columnWidth​

columnWidth : number = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

包含实际列宽（以像素为单位）。若未显式设置，则从根据最宽的元素的宽度确定列宽度。

horizontalAlign​

horizontalAlign : string = JustifyAlign.JUSTIFY

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

指定如何在水平方向上对齐单元格内的元素。支持的值有HorizontalAlign.LEFT、HorizontalAlign.CENTER、HorizontalAlign.RIGHT、JustifyAlign.JUSTIFY。

horizontalGap​

horizontalGap : number = 6

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

列之间的水平空间（以像素为单位）。

orientation​

orientation : string = TileOrientation.ROWS

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

指定是逐行还是逐列排列元素。

paddingBottom​

paddingBottom : number = 0

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

容器的底边缘与所有容器的布局元素的底边缘之间的最少像素数。

paddingLeft​

paddingLeft : number = 0

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

容器的左边缘与第一个布局元素的左边缘之间的像素数。

paddingRight​

paddingRight : number = 0

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

容器的右边缘与最后一个布局元素的右边缘之间的像素数。

paddingTop​

paddingTop : number = 0

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

容器的顶边缘与所有容器的布局元素的顶边缘之间的最少像素数。

requestedColumnCount​

requestedColumnCount : number = 0

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

要显示的列数。设置为 0 会允许 TileLayout 自动确定列计数。如果将 orientation 属性设置为 TileOrientation.ROWS，则设置此属性不会产生任何效果。这种情况下，会显式设置 code>rowCount`，并显式设置容器宽度。

requestedRowCount​

requestedRowCount : number = 0

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

要显示的行数。设置为 -1 会删除显式覆盖并允许 TileLayout 自动确定行计数。``如果将 <code>orientation 属性设置为 TileOrientation.COLUMNS，则设置此属性不会产生任何效果。这种情况下，会显式设置 columnCount，并显式设置容器高度。`

rowAlign​

rowAlign : string = RowAlign.TOP

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

指定如何将完全可见行与容器高度对齐。设置为 RowAlign.TOP 时，它会关闭列两端对齐。在容器的最后一行和底边缘之间可能存在部分可见的行或空白。这是默认值。设置为 RowAlign.JUSTIFY_USING_GAP 时，verticalGap 的实际值会增大，这样最后一个完全可见行底边缘会与容器的底边缘对齐。仅存在一个完全可见行时，verticalGap 的值会增大，这样它会将任何部分可见行推到容器的底边缘之外。请注意，显式设置 verticalGap不会关闭两端对齐，而只是确定初始间隙值。两端对齐接着可以增大它。设置为 RowAlign.JUSTIFY_USING_HEIGHT 时，rowHeight 的实际值会增大，这样最后一个完全可见行底边缘会与容器的底边缘对齐。请注意，显式设置 rowHeight不会关闭两端对齐，而只是确定初始行高度值。两端对齐接着可以增大它。

rowCount​

rowCount : number

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

行计数。

rowHeight​

rowHeight : number = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

行高（以像素为单位）。如果未显式设置，则从元素的高度的最大值确定行高度。

verticalAlign​

verticalAlign : string = eui.JustifyAlign.JUSTIFY

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

Specifies how to align the elements within the cells in the vertical direction.Supported values areVerticalAlign.TOP、VerticalAlign.MIDDLE、VerticalAlign.BOTTOM、JustifyAlign.JUSTIFY。

verticalGap​

verticalGap : number = 6

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

行之间的垂直空间（以像素为单位）。

方法详细信息​

TileLayout()​

public TileLayout()

构造函数。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

clearVirtualLayoutCache()​

public clearVirtualLayoutCache():void

如果 useVirtualLayout 为 true，则当布局目标改变时，布局目标可以使用此方法来清除已缓存布局信息。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

measure()​

public measure():void

基于目标的内容测量其默认大小

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

scrollPositionChanged()​

public scrollPositionChanged():void

verticalScrollPosition 或 horizontalScrollPosition属性更改时调用。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

updateDisplayList()​

public updateDisplayList(width:number,height:number):void

调整目标的元素的大小并定位这些元素。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native
  • 参数

示例​


**

* 以下示例使用 TileLayoutExample 类来演示单元格元素

*/

class  TileLayoutExample  extends  egret.Sprite  {

constructor()  {

super();

this.once(egret.Event.ADDED_TO_STAGE,  this.init,  this);

}

private  init():  void  {

var group =  new  eui.Group();

this.addChild(group);

var layout =  new  eui.TileLayout();

layout.horizontalGap  =  20;

layout.verticalGap  =  20;

layout.requestedColumnCount  =  3;

group.layout  = layout;

for  (var i: number =  0; i <  10; i++)  {

var btn =  this.getButton();

group.addChild(btn);

}

}

private  getButton(): eui.Button  {

var exml =

`<e:Skin class="skins.ButtonSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http:/ns.egret.com/eui">

<e:Image source="resource/button_up.png" source.down="resource/button_down.png" scale9Grid="1,3,8,8" width="100%" height="100%"/>

<e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" verticalAlign="middle" textAlign="center"/>

</e:Skin>`;

var clazz =  EXML.parse(exml);

var btn =  new  eui.Button();

btn.skinName  =  "skins.ButtonSkin";

return btn;

}

}