Flex4 布局之TileLayout布局

最新推荐文章于 2023-11-16 17:09:38 发布

原创最新推荐文章于 2023-11-16 17:09:38 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex4 TileLayout布局

Flex/As 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了TileLayout布局在视频监控中的使用场景和实现方式，包括其核心属性及其作用，通过实例展示了如何利用该布局进行视频分屏布局，以及其存在的局限性。此外，还提供了一个具体的代码示例，帮助读者更好地理解和实践。

TileLayout布局类似html中的表格，在Flex中可以看作是HorizontalLayout和VerticalLayout布局的结合

基本属性如下：

coulumALine

指定列的对齐方式有三个值（left justifyUsingWidth justifyUsingGap）

设置为 ColumnAlign.LEFT 时，它会关闭列两端对齐。在容器的最后一列和右边缘之间可能存在部分可见的列或空白。这是默认值。

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

设置为 ColumnAlign.JUSTIFY_USING_WIDTH 时，columnWidth 的实际值将增大，这样最后一个完全可见列右边缘会与容器的右边缘对齐。请注意显式设置 columnWidth 属性不会关闭两端对齐。它仅确定初始列宽度值。两端对齐可能会增大它。

默认值为 ColumnAlign.LEFT。

horizontalAlign

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

设置为 HorizontalAlign.JUSTIFY 时，会将每个元素的宽度设置为 columnWidth。

默认值为 HorizontalAlign.JUSTIFY。

horizontalGap

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

默认值为 6。

此属性可用作数据绑定的源。修改此属性后，将调度 propertyChange 事件。

orientation

指定是逐行还是逐列排列元素。ActionScript 值可以是 TileOrientation.ROWS 和 TileOrientation.COLUMNS。MXML 值可以是 "rows" 和 "columns"。

默认值为 TileOrientation.ROWS。

paddingTop，paddingBottom ，paddingLeft， paddingRight

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

默认值为 0。

`requestedColumnCount`

要显示的列数。

设置为 -1 会允许 TileLayout 自动确定列计数。

如果将 orientation 属性设置为 TileOrientation.ROWS，则设置此属性不会产生任何效果。这种情况下，会显式设置 rowCount，并显式设置容器宽度。

默认值为 -1。

`requestedRowCount`

要显示的行数。

设置为 -1 会删除显式覆盖并允许 TileLayout 自动确定行计数。

如果将 orientation 属性设置为 TileOrientation.COLUMNS，则设置此属性不会产生任何效果。这种情况下，会显式设置 columnCount，并显式设置容器高度。

默认值为 -1。

`rowAlign`

指定如何将完全可见行与容器高度对齐。ActionScript 值可以为 RowAlign.TOP、RowAlign.JUSTIFY_USING_GAP 和 RowAlign.JUSTIFY_USING_HEIGHT。MXML 值可以为"top"、"justifyUsingGap" 和 "justifyUsingHeight"。

设置为 RowAlign.TOP 时，它会关闭列两端对齐。在容器的最后一行和底边缘之间可能存在部分可见的行或空白。这是默认值。

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

设置为 RowAlign.JUSTIFY_USING_HEIGHT 时，rowHeight 的实际值会增大，这样最后一个完全可见行底边缘会与容器的底边缘对齐。请注意，显式设置 rowHeight 不会关闭两端对齐，而只是确定初始行高度值。两端对齐接着可以增大它。

默认值为 RowAlign.TOP。

`verticalAlign`

指定如何在垂直方向上对齐单元格内的元素。支持的值有 VerticalAlign.TOP、VerticalAlign.MIDDLE、VerticalAlign.BOTTOM、VerticalAlign.JUSTIFY。

设置为 VerticalAlign.JUSTIFY 时，会将每个元素的高度设置为 rowHeight。

默认值为 VerticalAlign.JUSTIFY。

`verticalGap`

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

默认值为 6。

此属性可用作数据绑定的源。修改此属性后，将调度 propertyChange 事件。

下面看一个例子，如果我要在一个容器内排列1*1，2*2，3*3，4*4，5*5...这样的布局的时候就可以用到这个TileLayout布局

这个通常在视频监控中视频分屏的时候会用到

代码如下：

<s:BorderContainer width="1330" height="530" borderColor="#F70606" borderWeight="2">
		<s:layout>
			<s:TileLayout verticalGap="2" horizontalGap="2" requestedColumnCount="3" requestedRowCount="3" columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight"/>
		</s:layout>
		<mx:VideoDisplay contentBackgroundColor="0x666666"/>
		<mx:VideoDisplay contentBackgroundColor="0x666666"/>
		<mx:VideoDisplay contentBackgroundColor="0x666666"/>
		<mx:VideoDisplay contentBackgroundColor="0x666666"/>
		<mx:VideoDisplay contentBackgroundColor="0x666666"/>
		<mx:VideoDisplay contentBackgroundColor="0x666666"/>
		<mx:VideoDisplay contentBackgroundColor="0x666666"/>
		<mx:VideoDisplay contentBackgroundColor="0x666666"/>
		<mx:VideoDisplay contentBackgroundColor="0x666666"/>
	</s:BorderContainer>

veriticalGap=2 表示行之间的间距为2个像素

horizontalGap=2 表示列之间的间距为2个像素

requestedColumnCount=2 表示2列

requestedRowCount=2 表示2行

columnAlign=justifyUsingWidth 宽自适应

columnHeight=justifyUsingHeight 高自适应

效果图：

注：这个布局有个不算问题的问题，就是当容器内某个组件的大小大于容器的自适应大小的时候，则所有的容器都会按这个大小布局，如上面的例子，容器的宽是1530，1330/3=443，530/3=176 也就是说他们自适应的宽高大概等于510*176，如果你某个组件的宽高大于这个值的话，那么所有的组件都会等于最大的那个值