Flex创建精美相册（HorizontalList）

Flex 使用 HorizontalList 创建相册的运行效果见：http://tongqiuyan.blog.163.com/blog/static/19554530220119225379604/

静态效果如图：

?ImageReader.mxml：

 
 

<?xml?version="1.0"?encoding="utf-8"?> ?
  
  

mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="vertical"?fontSize="12"> ?

  
  
<mx:Script> ?
  
  
?<![CDATA[ ?
  
  

??private?function?init():void ?

  
  
??{ ?
  
  

???img.source?=?"http://dl.iteye.com/upload/picture/pic/101168/dcbaf814-39d8-3d16-8955-f5e4fa296496.jpg"; ?

  
  
??} ?
  
  
?]]> ?
  
  
</mx:Script> ?
  
  

<mx:Array?id="arr"> ?

  
  

?<mx:Object?label="Flex"?thumbnailImage="http://dl.iteye.com/upload/picture/pic/101170/28ee2f4b-39eb-3283-bfa5-556576aca04f.jpg"?fullImage="http://dl.iteye.com/upload/picture/pic/101168/dcbaf814-39d8-3d16-8955-f5e4fa296496.jpg"?/> ?

  
  

?<mx:Object?label="Flash"?thumbnailImage="http://dl.iteye.com/upload/picture/pic/101174/8cc91cad-49a6-32b2-96f5-eed72dfb5e36.jpg"?fullImage="http://dl.iteye.com/upload/picture/pic/101172/9ee38047-807c-3514-8e4b-27b87e133173.jpg"?/> ?

  
  

?<mx:Object?label="Illustrator"?thumbnailImage="http://dl.iteye.com/upload/picture/pic/101178/531f78b4-0e7c-314c-9ade-af9e5296d0a9.jpg"?fullImage="http://dl.iteye.com/upload/picture/pic/101176/d0b5794a-967e-3085-b3d1-0c58a828dc56.jpg"?/> ?

  
  

?<mx:Object?label="Dreamweaver"?thumbnailImage="http://dl.iteye.com/upload/picture/pic/101182/83deac33-a14c-32fb-9ea9-cd34b22a5bb1.jpg"?fullImage="http://dl.iteye.com/upload/picture/pic/101180/1d25f46d-d669-38ea-85f9-030ddadf0e50.jpg"?/> ?

  
  

?<mx:Object?label="ColdFusion"?thumbnailImage="http://dl.iteye.com/upload/picture/pic/101186/d591482d-6b88-3b9a-add0-e57f6800619e.jpg"?fullImage="http://dl.iteye.com/upload/picture/pic/101184/2141b499-4e4b-3569-9aa3-dc05ee60a2bb.jpg"?/> ?

  
  

?<mx:Object?label="Eclipse"?thumbnailImage="http://dl.iteye.com/upload/picture/pic/101190/8e045954-c269-3813-b9e9-c92cb6d51dd9.jpg"?fullImage="http://dl.iteye.com/upload/picture/pic/101188/edad31d5-dd73-3f73-8c58-89605467a1df.jpg"?/> ?

  
  

?<mx:Object?label="Auto"?thumbnailImage="http://dl.iteye.com/upload/picture/pic/101194/049a0297-33fc-317a-b408-ed8963d07301.jpg"?fullImage="http://dl.iteye.com/upload/picture/pic/101192/9136438c-4338-3c2c-886c-c16c69102251.jpg"?/> ?

  
  
</mx:Array> ?
  
  

<mx:Panel?title="实现简单相册"?width="620"?height="620"?horizontalAlign="center"> ?

  
  

?<mx:Image?id="img"?source="{horizontalList.selectedItem.fullImage}"?maintainAspectRatio="true"?horizontalAlign="center"?creationComplete="init();"?/> ?

  
  

?<mx:ControlBar?horizontalAlign="center"> ?

  
  

??<mx:HorizontalList?id="horizontalList"?labelField="label"?iconField="thumbnailImage"?dataProvider="{arr}"?

  
  

?????????itemRenderer="CustomItemRenderer"?columnCount="4"?columnWidth="150"?rowCount="1"?rowHeight="130"?

  
  

?????????horizontalScrollPolicy="on"?alternatingItemColors="[#FFFFFF,#EEEEEE]"?/> ?

  
  
?</mx:ControlBar> ?
  
  
</mx:Panel> ?
  
  
/mx:Application>?
 
 

?CustomItemRenderer.mxml

 
 

<?xml?version="1.0"?encoding="utf-8"?> ?
  
  

<mx:VBox?xmlns:mx="http://www.adobe.com/2006/mxml"?horizontalAlign="center"?verticalAlign="middle"> ?

  
  

?<mx:Image?source="{data.thumbnailImage}"?/> ?

  
  

?<mx:Label?text="{data.label}"?/> ?

  
  
</mx:VBox>?
 
 

涉及控件：HorizontalList 、ControlBar 等。