10.7.自定义列表类控件的拽动指示器
10.7.1 问题
你想自定义拖拽指示器的图形，并在list 控件的拖拽操作期间显示。
10.7.2 解决办法
创建一个自定义的可编程皮肤(programmatic skin)，并且为一个List 控件设置dropIndicatorSkin 样式属性。
10.7.3. 讨论
Flex 框架的列表类组件具有默认的可编程（programmatic）皮肤，在你执行拖拽操作时用来渲染指示器。当ListBase.showDropFeedback 方法在一个list 的内部被调用，一个指示器（indicator）类的实例被创建，在这个条目的上边或左边一个像素位置处被渲染（具体取决于条目在list 控件里是如何组织的）。通过扩展mx.skins.ProgrammaticSkin 类和设置一个组件的dropIndicatorSkin 样式属性，你可以自定义拖拽指示器。
接下来的例子自定义一个拖拽指示器，它重写了ProgrammaticSkin 类的updateDisplayList方法，使用drawing API 来绘制一个基于当前方向属性的箭头图形。
方向属性取决于父List 控件怎样组织显示列表新增的collection 条目。当方向设置为水平，一个向下的箭头在条目的上方显示。如果不为水平，则被当作垂直，显示一个向右的箭头。
下面的程序增加一个List 控件和一个TileList 控件到显示列表，并且设置每个组件的dropIndicatorSkin 属性，从而自定义先前例子中创建的指示器。
当你拖动一个来自于List 组件的条目经过TileList 时，可以看到一个箭头指向itemrenderer 实例，它位于拖拽期间鼠标指针经过的索引处。当执行一个经过这个List 组件的拖拽动作时，拖拽指示器是一个指向可见的拖拽源数据对象索引位置处的箭头。
dragIndicatorSkin 是一个列表类组件的样式属性，它可以像任何其它样式属性一样被设置，接受一个完全匹配的名为programmatic skin 的类来渲染自定义的显示图像。
你想自定义拖拽指示器的图形，并在list 控件的拖拽操作期间显示。
10.7.2 解决办法
创建一个自定义的可编程皮肤(programmatic skin)，并且为一个List 控件设置dropIndicatorSkin 样式属性。
10.7.3. 讨论
Flex 框架的列表类组件具有默认的可编程（programmatic）皮肤，在你执行拖拽操作时用来渲染指示器。当ListBase.showDropFeedback 方法在一个list 的内部被调用，一个指示器（indicator）类的实例被创建，在这个条目的上边或左边一个像素位置处被渲染（具体取决于条目在list 控件里是如何组织的）。通过扩展mx.skins.ProgrammaticSkin 类和设置一个组件的dropIndicatorSkin 样式属性，你可以自定义拖拽指示器。
接下来的例子自定义一个拖拽指示器，它重写了ProgrammaticSkin 类的updateDisplayList方法，使用drawing API 来绘制一个基于当前方向属性的箭头图形。
+展开
-ActionScript
package oreilly.cookbook {
import mx.skins.ProgrammaticSkin;
public class CustomDropIndicator extends ProgrammaticSkin {
public var direction:String = "horizontal" ;
public function CustomDropIndicator() {super();}
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number ):void {
super.updateDisplayList(unscaledWidth, unscaledHeight );
graphics.clear();
graphics.beginFill( 0x000000 );
if( direction == "horizontal"){
graphics.moveTo( 4, -10 );
graphics.lineTo( 6, -10 );
graphics.lineTo( 6, -4 );
graphics.lineTo( 10, -4 );
graphics.lineTo( 5, 0 );
graphics.lineTo( 0, -4 );
graphics.lineTo( 4, -4 );
graphics.lineTo( 4, -10 );
}
else{
graphics.moveTo( 10, 4 );
graphics.lineTo( 10, 6 );
graphics.lineTo( 5, 6 );
graphics.lineTo( 5, 10 );
graphics.lineTo( 0, 5 );
graphics.lineTo( 5, 0 );
graphics.lineTo( 5, 4 );
graphics.lineTo( 10, 4 );
}
graphics.endFill();
}
}
}
import mx.skins.ProgrammaticSkin;
public class CustomDropIndicator extends ProgrammaticSkin {
public var direction:String = "horizontal" ;
public function CustomDropIndicator() {super();}
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number ):void {
super.updateDisplayList(unscaledWidth, unscaledHeight );
graphics.clear();
graphics.beginFill( 0x000000 );
if( direction == "horizontal"){
graphics.moveTo( 4, -10 );
graphics.lineTo( 6, -10 );
graphics.lineTo( 6, -4 );
graphics.lineTo( 10, -4 );
graphics.lineTo( 5, 0 );
graphics.lineTo( 0, -4 );
graphics.lineTo( 4, -4 );
graphics.lineTo( 4, -10 );
}
else{
graphics.moveTo( 10, 4 );
graphics.lineTo( 10, 6 );
graphics.lineTo( 5, 6 );
graphics.lineTo( 5, 10 );
graphics.lineTo( 0, 5 );
graphics.lineTo( 5, 0 );
graphics.lineTo( 5, 4 );
graphics.lineTo( 10, 4 );
}
graphics.endFill();
}
}
}
方向属性取决于父List 控件怎样组织显示列表新增的collection 条目。当方向设置为水平，一个向下的箭头在条目的上方显示。如果不为水平，则被当作垂直，显示一个向右的箭头。
下面的程序增加一个List 控件和一个TileList 控件到显示列表，并且设置每个组件的dropIndicatorSkin 属性，从而自定义先前例子中创建的指示器。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="creationHandler();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function creationHandler():void {
contactList.dataProvider = new ArrayCollection(['Josh', 'Abey', 'Todd']);
}
]]>
</mx:Script>
<mx:List id="contactList" width="200" height="200" allowMultipleSelection="true"
dragEnabled="true" dropEnabled="true" dropIndicatorSkin="com.oreilly.flexcookbook.CustomDropIndicator" />
<mx:TileList id="tileList" width="180" height="200"
dropEnabled="true" dropIndicatorSkin="com.oreilly.flexcookbook.CustomDropIndicator" />
</mx:Application>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function creationHandler():void {
contactList.dataProvider = new ArrayCollection(['Josh', 'Abey', 'Todd']);
}
]]>
</mx:Script>
<mx:List id="contactList" width="200" height="200" allowMultipleSelection="true"
dragEnabled="true" dropEnabled="true" dropIndicatorSkin="com.oreilly.flexcookbook.CustomDropIndicator" />
<mx:TileList id="tileList" width="180" height="200"
dropEnabled="true" dropIndicatorSkin="com.oreilly.flexcookbook.CustomDropIndicator" />
</mx:Application>
当你拖动一个来自于List 组件的条目经过TileList 时，可以看到一个箭头指向itemrenderer 实例，它位于拖拽期间鼠标指针经过的索引处。当执行一个经过这个List 组件的拖拽动作时，拖拽指示器是一个指向可见的拖拽源数据对象索引位置处的箭头。
dragIndicatorSkin 是一个列表类组件的样式属性，它可以像任何其它样式属性一样被设置，接受一个完全匹配的名为programmatic skin 的类来渲染自定义的显示图像。
加支付宝好友偷能量挖...
