Mar 09

利用Flex的HorizontalList控件创建一个简单的图片展示（相册）

FlexAdd comments

这个例子是应一个忠实读者的要求，其中提到了当用户点击了HorizontalList控件中的缩小图片时，如何显示其完整的图片的问题。我的解决方案是将缩小图片和原始图片的URL作为提供的数据，绑定在HorizontalList控件的selectedItem属性中。

下面是具体的例子以及源代码：


Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="top"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Array id="arr">
  9.         <mx:Object label="Flex"
  10.                 thumbnailImage="assets/fx_appicon-tn.gif"
  11.                 fullImage="assets/fx_appicon.jpg" />
  12.         <mx:Object label="Flash"
  13.                 thumbnailImage="assets/fl_appicon-tn.gif"
  14.                 fullImage="assets/fl_appicon.jpg" />
  15.         <mx:Object label="Illustrator"
  16.                 thumbnailImage="assets/ai_appicon-tn.gif"
  17.                 fullImage="assets/ai_appicon.jpg" />
  18.         <mx:Object label="Dreamweaver"
  19.                 thumbnailImage="assets/dw_appicon-tn.gif"
  20.                 fullImage="assets/dw_appicon.jpg" />
  21.         <mx:Object label="ColdFusion"
  22.                 thumbnailImage="assets/cf_appicon-tn.gif"
  23.                 fullImage="assets/cf_appicon.jpg" />
  24.         <mx:Object label="Flash Player"
  25.                 thumbnailImage="assets/fl_player_appicon-tn.gif"
  26.                 fullImage="assets/fl_player_appicon.jpg" />
  27.         <mx:Object label="Fireworks"
  28.                 thumbnailImage="assets/fw_appicon-tn.gif"
  29.                 fullImage="assets/fw_appicon.jpg" />
  30.         <mx:Object label="Lightroom"
  31.                 thumbnailImage="assets/lr_appicon-tn.gif"
  32.                 fullImage="assets/lr_appicon.jpg" />
  33.         <mx:Object label="Photoshop"
  34.                 thumbnailImage="assets/ps_appicon-tn.gif"
  35.                 fullImage="assets/ps_appicon.jpg" />
  36.     </mx:Array>
  37.  
  38.     <mx:Panel title="{horizontalList.selectedItem.label}"
  39.             height="100%"
  40.             horizontalAlign="center">
  41.         <mx:Image id="img"
  42.                 source="{horizontalList.selectedItem.fullImage}"
  43.                 maintainAspectRatio="true"
  44.                 horizontalAlign="center"
  45.                 width="{horizontalList.width}"
  46.                 height="100%" />
  47.         <mx:ControlBar horizontalAlign="center">
  48.             <mx:HorizontalList id="horizontalList"
  49.                     labelField="label"
  50.                     iconField="thumbnailImage"
  51.                     dataProvider="{arr}"
  52.                     itemRenderer="CustomItemRenderer"
  53.                     columnCount="4"
  54.                     columnWidth="125"
  55.                     rowCount="1"
  56.                     rowHeight="100"
  57.                     horizontalScrollPolicy="on" />
  58.         </mx:ControlBar>
  59.     </mx:Panel>
  60.  
  61. </mx:Application>

下面是自定义的ItemRenderer设置文件：

Download: CustomItemRenderer.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/ -->
  3. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         horizontalAlign="center"
  5.         verticalAlign="middle">
  6.  
  7.     <mx:Image source="{data.thumbnailImage}" />
  8.  
  9.     <mx:Label text="{data.label}" />
  10.  
  11. </mx:VBox>
下面是执行实例（可以右键察看源代码）：




原文作者：Peter deHaan 翻译：minidxer

								












						
written by Minidxer 
			 |  tags: , , , , , 
         

			
						          

		
		






Related Post



	
4 Responses to “利用Flex的HorizontalList控件创建一个简单的图片展示（相册）”
 

	
    

						
						
						
						
		
	
Trackbacks



 



Leave a Reply