现在的位置: 首页 > 综合 > 正文

【教程】定制下拉列表选中时的样式

2014年09月05日 ⁄ 综合 ⁄ 共 1402字 ⁄ 字号 评论关闭

导读:
  The mouse-hover and selection boxes in a Flex TileList only have styles for changing the colors. If you want more advanced things like changing the shape or having a border you'll need to extend the TileList class and override two methods.

一般的下拉列表对选中时的样式的支持不是很完善,要想得到理想的效果其实也不难,在基类的基础上稍加修改就可以了,可以参照下面的代码,效果图也很理想。
  drawSelectionIndicator- Draws the box around the currently selected item.
  drawHighlightIndicator- Draws the box for the mouse-over item
  public class RoundedSelectionTileList extends TileList
  {
  public function RoundedSelectionTileList()
  {
  super();
  }
  override protected function drawSelectionIndicator(
  indicator:Sprite, x:Number, y:Number,
  width:Number, height:Number, color:uint,
  itemRenderer:IListItemRenderer):void
  {
  var g:Graphics = indicator.graphics;
  g.clear();
  g.beginFill(0x3f4c6b);
  g.lineStyle(2,0x6e7c9d);
  g.drawRoundRect(x,y,itemRenderer.width,height,15,15);
  g.endFill();
  }
  override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number,
  width:Number, height:Number, color:uint,
  itemRenderer:IListItemRenderer):void
  {
  var g:Graphics = indicator.graphics;
  g.clear();
  g.beginFill(0x3f4c6b);
  g.lineStyle(2,0x6e7c9d);
  g.drawRoundRect(x,y,itemRenderer.width,height,15,15);
  g.endFill();
  }
  }
  Before:
  
  
  
  After:
  While you're in there, take a look at the other draw* protected methods. You can change most aspects of the control with those.

本文转自
http://www.rogue-development.com/blog/2007/12/customizing-tilelist-selection.html

抱歉!评论已关闭.