列表控件的使用（二）

四、瓦片式列表控件（TileList Control）的使用

一）使用默认的条目渲染器TileListItemRenderer。它包括两个属性：label和icon。

 1 <mx:TileList x="344" y="77" fontSize="12" height="262" width="330"
 2     maxColumns="3" 
 3     rowHeight="120" 
 4     columnWidth="100" 
 5     direction="horizontal">
 6     <mx:dataProvider>
 7         <mx:Array>
 8             <mx:Object label="鼠" icon="@Embed(source='images/sx/png-1501.png')"/>
 9             <mx:Object label="牛" icon="@Embed(source='images/sx/png-1502.png')"/>
10             <mx:Object label="虎" icon="@Embed(source='images/sx/png-1503.png')"/>
11             <mx:Object label="兔" icon="@Embed(source='images/sx/png-1504.png')"/>
12             <mx:Object label="龙" icon="@Embed(source='images/sx/png-1505.png')"/>
13         </mx:Array>
14     </mx:dataProvider>
15 </mx:TileList>

XML代码

二）使用自定义的条目渲染器

1、渲染器组件文件源码

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
 3     <mx:VBox width="130" height="100%">
 4         <mx:Image width="100%" height="130" source="{data.images}"/>
 5         <mx:Text width="100%" text="{data.name}" textAlign="center"/>
 6     </mx:VBox>
 7     <mx:VBox width="100%" height="100%">
 8         <mx:Label width="100%" text="性别：{data.sex}" textAlign="left"/>
 9         <mx:Label width="100%" text="年龄：{data.age}" textAlign="left"/>
10         <mx:Label width="100%" text="手机号：{data.phone}" textAlign="left"/>
11     </mx:VBox>    
12 </mx:HBox>

XML代码

2、应用页面源码

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 3     <mx:Panel x="10" y="10" width="638" height="472" layout="absolute" title="瓦片式列表2" fontSize="12">
 4         <mx:TileList x="10" y="10" fontSize="12" height="410" width="600"
 5             columnCount="2"
 6             rowHeight="200" 
 7             columnWidth="290" 
 8             direction="horizontal"
 9             itemRenderer="com.cjm.controls.Users">
10             <mx:dataProvider>
11                 <mx:Array>
12                     <mx:Object name="张三" sex="男" age="27" phone="13700000001" images="@Embed(source='images/users/png-1.png')"/>
13                     <mx:Object name="李四" sex="男" age="28" phone="13700000002" images="@Embed(source='images/users/png-2.png')"/>
14                     <mx:Object name="王五" sex="男" age="29" phone="13700000003" images="@Embed(source='images/users/png-3.png')"/>
15                     <mx:Object name="陈六" sex="男" age="31" phone="13700000004" images="@Embed(source='images/users/png-4.png')"/>
16                     <mx:Object name="刘七" sex="男" age="33" phone="13700000005" images="@Embed(source='images/users/png-5.png')"/>
17                 </mx:Array>
18             </mx:dataProvider>
19         </mx:TileList>
20     </mx:Panel>
21 </mx:Application>

XML代码