[feather]StarlingUi框架——组件库及渲染器
feather使用组件库，就不得不了解渲染器。查了一下资料Java的AWT也是有渲染器这类东西的！feather虽然带了默认皮肤，其实feather的每一个组件都没有皮肤，即使我们看到的那个皮肤，也是定制好的通过一定规则绘制出来的。所以要想要自己的一套UI风格就不得不了解渲染器的使用。
但是很坑的是，官方并没有给出feather渲染器的demo，所以官网上提供的两种更改渲染器方法我只是调通了一种，另一种还不甚了解。并且自定义组件也只是大致给出了一个生命周期，我看了一个最简单的Label的源码，同样几个基本的渲染器是离不开的。所以望大神能指点一下渲染器的相关东东啊。
组件的使用并不复杂，这里就以List为例了，直接贴代码反而更容易理解
public class ActivityMenu extends PanelScreen { private var list:List; public function ActivityMenu() { super(); this.addEventListener(FeathersEventType.INITIALIZE, initializeHandler); } private function initializeHandler(event:Event):void { this.removeEventListener(FeathersEventType.INITIALIZE,initializeHandler); list = new List(); list.width = Constant.STAGE_WIDTH; list.height = Constant.STAGE_HEIGHT; //设置list的背景 list.backgroundSkin = new Image(Root.mAssets.getTexture("BackgroundPic")); this.addChild(list); //制定列表元素数据 var groceryList:ListCollection = new ListCollection( [ {text:"价值120元代金券仅40元加2000积分"}, {text:"1价值120元"}, {text:"1价值120元"}, {text:"1价值120元"}, {text:"1价值120元"}, {text:"1价值120元"}, {text:"1价值120元"}, {text:"1价值120元"}, {text:"1价值120元"}, {text:"1价值120元"}, ]); //添加数据，并制定元素内容解析 list.dataProvider = groceryList; list.itemRendererProperties.labelField = "text"; var texture:Texture = Root.mAssets.getTexture("ItemBackgroundPic"); var rect:Rectangle = new Rectangle(20,20,54,56); var textures:Scale9Textures = new Scale9Textures( texture, rect ); //子渲染器背景样式 list.itemRendererFactory = function():IListItemRenderer {
//每一个子元素的渲染器，规则默认Button渲染器
var renderer:DefaultListItemRenderer = new DefaultListItemRenderer();
//背景，必须制定宽高，否则看不到添加的子元素背景
renderer.width = Constant.STAGE_WIDTH*0.9;
renderer.height = Constant.STAGE_HEIGHT*0.4;
var image:Scale9Image = new Scale9Image( textures );
renderer.defaultSkin = image;
renderer.verticalAlign = "bottom";
//定义字体样式
renderer.labelFactory = function():ITextRenderer
{
var r:TextFieldTextRenderer = new TextFieldTextRenderer();
r.width = Constant.STAGE_WIDTH*0.9;
r.height = Constant.STAGE_HEIGHT*0.1;
r.wordWrap = true;
r.textFormat = new TextFormat("",15,0xffffff,null,null,null,null,null,null,Constant.STAGE_HEIGHT*0.05);
return r;
}
//添加字体背景
var image1:Scale9Image = new Scale9Image( textures );
image1.width = Constant.STAGE_WIDTH*0.9;
image1.height = Constant.STAGE_HEIGHT*0.4/3.5;
image1.y = renderer.height - image1.height;
renderer.addChild(image1);//添加到renderer上面，猜测：可能基于Stage3D的，所以不会覆盖文字，矢量文字特殊
return renderer;
}
//子样式
var layout:VerticalLayout = new VerticalLayout();
layout.paddingTop = 10;
layout.horizontalAlign = "center";
layout.paddingBottom = 10;
layout.gap = 10;
list.layout = layout;
//list添加监听
list.addEventListener(Event.CHANGE,onListChangeHandler);
}
private function onListChangeHandler(e:Event):void
{
//输出选择顺序
const selectedIndices:Vector.<int> = list.selectedIndices;
trace("List onChange:", selectedIndices.length > 0 ? selectedIndices :this.list.selectedIndex);
this.dispatchEventWith(Event.COMPLETE)
}
}
看着上面的代码并不复杂，大部分的代码还是比较重复的这里我们共计用到了两个渲染类DefaultListItemRenderer，TextFieldTextRenderer
并且在此有两个渲染函数，这是没个组件基本都有的，向List默认用的是Button的，所以List的默认渲染器里面肯定又Label所以就肯定有了我们labelFactory。
这样加入我们在使用一个组件的时候，我们只需要调用他的渲染器函数，通过上面的内部函数的方式设置渲染器的属性即可。
例如：list.itemRendererFactory = function():IListItemRenderer {……}List使用注意：
1、itemRendererFactory这个函数其实就相当于一个遍历循环，你List指定多少就循环多少次渲染。也就是List的item渲染器，渲染器用的Button的，所以为了考虑效率问题尽量内部
不要创建过多的自定义变量，减少开销！
2、上面的代码使用到了Scale9Image，官网给的教程很详细，在此就不献丑了。
3、layout属性，正因为有这个属性我才这么坚持研究feather,因为布局很重要。List的layout设置的布局其实是对内部元素item的影响，其他组件也都有layout属性，也均是对内部添
加元素的影响。应多使用layout布局，并且feather有一个包里面有各种各样的layout为我们布局提供了方便，不用还像原来那样算过来算过去了的。
现在感觉feather搭了Starling的顺风车，通过stage3D加速的UI方法，如果真要是来做开发，感觉还是差一层封装啊，如果能像android那样，xml来写界面，可以外部引入style文件，
然后通过feather来内部解析xml，渲染就行了，这样能减少很多冗余代码的操作，也能使得层级关系更加的明朗！还有助于工作流脱离
