Flex创建精美相册（HorizontalList）

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

<?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>

 

<?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 等。