Feathers组件--之--列表

文章转自：点击打开链接

自定义 列表内容

[参考]

1 List组件用法 http://www.starlinglib.com/wiki/Feathers:list  

 [ENGLISH] http://wiki.starling-framework.org/feathers/list

2 自定义列表 Creating Custom Item Renderers http://www.starlinglib.com/wiki/Feathers:item-renderers

[ENGLISH] http://wiki.starling-framework.org/feathers/item-renderers

[正文]

DefaultListItemRenderer只能改背景,位置,不能加文本,按钮,

要自定义
类似OBJ-C,要自定义CELL内容,要创建CELL类
参考2,是起点, 继承FeathersControl实现IListItemRenderer接口
解读>前3个方法是接口实现.index的getter/setter方法,父owner的getter/setter方法,data的getter/setter方法
isSelected比较特殊
initialize是添加自定义的地方,标签
draw?
commitData把数据显示出来
layout排列 怎么使用?INVALIDATION_FLAG_DATA 无效标签数据

//this._list.dataProvider = new ListCollection([一个数组,里面包括对象,数据放在对象里]);

官网Demo的显示--2种写法

写法1）指定渲染工厂

_list.itemRendererFactory = tileListItemRendererFactory;

protected function tileListItemRendererFactory():IListItemRenderer
{
const renderer:BasicItemRenderer = new BasicItemRenderer();
return renderer;
}
相关类
public class BasicItemRenderer extends FeathersControl implementsIListItemRenderer
写法2）指定渲染类型
this.list.itemRendererType = GalleryItemRenderer;
相关类
public class GalleryItemRenderer extends FeathersControl implements IListItemRenderer

2种做法，结果一样，都是指向FeathersControl 子类，很明显，用itemRendererType 更简单

写法：
public class GalleryItemRenderer extends FeathersControl implements IListItemRenderer

注意，不指定主题，组件不显示。
要显示组件，指定每个组件的textRendererFactory，相当于给每个组件指定不同的主题。
应该是

[java]  view plain copy

1. var label:Label = new Label();  
2. label.textRendererFactory= function():ITextRenderer  
3. {  
4.     var renderer:TextFieldTextRenderer = new TextFieldTextRenderer();  
5.     renderer.textFormat = new TextFormat( "Arial", 16, 0xff0000,  
6.                                null, null, null, null, null, TextFormatAlign.CENTER );  
7.    
8.     return renderer;  
9. }  
10. label.text = 'Hello';  
11. addChild(label);  

而不是

[java]  view plain copy

1. var label:Label = new Label();  
2.             label.text = 'Hello';  
3.             addChild(label);  

label要显示，

itemRendererType CELL的渲染类型

itemRendererFactory CELL的渲染工厂,没有设置主题时.

defaultSkin,背景

http://feathersui.com/documentation/

//renderer.disabledSkin = new Image( texture01 );//禁用时的皮肤
//renderer.downSkin = new Image( texture01 );//按下时的皮肤
//renderer.downIcon//按下时的ICON
//renderer.hoverIcon //移上时的ICON
//renderer.hoverSkin  //移上时的皮肤
//renderer.iconPosition//icon的位置
//renderer.iconOffsetX//icon的偏移值
//renderer.iconOffsetY//icon的偏移值
//renderer.itemHasIcon = false;//不显示图标
//renderer.itemHasLabel = false;//不显示图标
renderer.maxWidth  = 150;//宽高
renderer.maxHeight  = 150;//宽高
renderer.minWidth  = 150;//宽高
renderer.minHeight  = 150;//宽高

,this._list.itemRendererFactory = tileListItemRendererFactory; 是设置样式.不能改变列表内容,

package view.thumbsview

_list = new List();
_list.layout = listLayout;
_list.backgroundSkin = new Quad( 100, AppSettings.THUMBS_PANEL_HEIGHT, 0x222222 );
_list.scrollerProperties.horizontalScrollPolicy = Scroller.SCROLL_POLICY_ON;
_list.scrollerProperties.snapScrollPositionsToPixels = true;
_list.itemRendererType = GalleryItemRenderer;
_list.itemRendererProperties.labelField = "title";
_list.addEventListener( Event.CHANGE, onListChange );
addChild( _list );

LIst类feathers.controls.List

itemRendererType实例化CELL的类

反编译怎么做

反编译Feathers组件.swf

反编译,复制examples包到feathers下面

报错。。。。。。修改代码->

1）把文档类ComponentsExplorerWeb的start函数，38-39行

 //var _local1:Class = (getDefinitionByName("feathers.examples.componentsExplorer.Main") as Class); //this._starling = new Starling(_local1, this.stage);改称this._starling = new Starling(Main, this.stage);

2）修正图片类feathers.examples.componentsExplorer.screens.ButtonScreen，的 private static const SKULL_ICON:Class = skull_png$435b761c1197946c42f6421afff9c7eb-630982242;改称[Embed(source = "/assets/SKULL_ICON.png")]         private static const SKULL_ICON:Class;

成功。。。。。

修改ListScreen

[java]  view plain copy

1. this._list = new List();  
2. this._list.dataProvider = new ListCollection(_local1);  
3. //this._list.typicalItem = {"text":"项目 10"};//典型项目,，没什么用  
4. this._list.isSelectable = this.settings.isSelectable;//是否可选  
5. this._list.scrollerProperties.hasElasticEdges = this.settings.hasElasticEdges;//是否有弹性,废话  
6. this._list.itemRendererProperties.labelField = "text";  
7. this._list.addEventListener("change", list_changeHandler);//事件  
8. this.addChildAt(this._list, 0);   
9. this._backButton = new Button();//回退按钮  
10. this._backButton.label = "返回";  
11. this._backButton.addEventListener("triggered", backButton_triggeredHandler);  
12. this._settingsButton = new Button();  
13. this._settingsButton.label = "设置";  
14. this._settingsButton.addEventListener("triggered", settingsButton_triggeredHandler);  
15. this._header = new Header();  
16. this._header.title = "List";  
17. this.addChild(this._header);  
18. this._header.leftItems = new <DisplayObject>[this._backButton]; //左按钮  
19. this._header.rightItems = new <DisplayObject>[this._settingsButton]; //右按钮  
20. this.backButtonHandler = this.onBackButton;  

根据下面

http://www.starlinglib.com/wiki/Feathers:item-renderers

博客

http://jackblog.diandian.com/

论坛

http://forum.starling-framework.org/forum/feathers

搜索list.dataProvider

作了自定义渲染项目.有效果,但是用List.dataProvider来更新,没有变化.如下

[java]  view plain copy

1. function create()  
2. {  
3. //works  
4. list = new List();  
5. list.dataProvider = new ListCollection(['1','2']);  
6. }  
7.    
8. function updateList()  
9. {  
10. //doesn't work  
11. list.dataProvider = null;  
12. list.dataProvider = new ListCollection(['1','3']);  
13. }  

用 list.dataProvider.updateItemAt(i)遍历所有项也灭有效果,

还用了item自己的invalidat，只是放在ENTERFRAME事件有用。这不好。。。。。

http://forum.starling-framework.org/topic/list-skin-icons#post-15016

List皮肤Icon

有没有办法在itemRendererFactory里面放个判断语句，来检查provider的数据。给渲染其加个默认icon。。。

列表第一行要加个icon，其他行不要。

[java]  view plain copy

1. var data:Array = [  
2. { label: '', usehomeicon: true },  
3. { label: '01', usehomeicon: false }];  
4.    
5. list = new List();  
6. list.layout = new HorizontalLayout();  
7. list.itemRendererFactory = function():IListItemRenderer  
8. {  
9.     var renderer:DefaultListItemRenderer = new DefaultListItemRenderer();  
10.     var defSkin:Image = new Image(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('button-up-skin'));  
11.     var defSelSkin:Image = new Image(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('button-down-skin'));  
12.     var defDisabledSkin:Image = new Image(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('button-disabled-skin'));  
13.     //THIS IS WHERE I NEED TO MAKE AN ICON, BUT I THINK RENDERER.DATA ISN'T THE SAME THING AS THE list.dataProvider  
14.     if(renderer.data && renderer.data.usehomeicon) renderer.defaultIcon = new Image(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('homeicon_up'));  
15.     renderer.defaultSkin = defSkin;  
16.     renderer.defaultSelectedSkin = defSelSkin;  
17.     renderer.disabledSkin = defDisabledSkin;  
18.     renderer.paddingLeft = 22 * model.scaleFactorH;  
19.     renderer.height = 60 * model.scaleFactorV;  
20.    
21.     renderer.defaultLabelProperties.textFormat = new BitmapFontTextFormat(TextField.getBitmapFont(DataModel.FONT_APEX_MEDIUM), 24 * (model.scaleFactorV), 0x585858);  
22.     renderer.horizontalAlign = HAlign.LEFT;  
23.     renderer.defaultSelectedLabelProperties.textFormat = new BitmapFontTextFormat(TextField.getBitmapFont(DataModel.FONT_APEX_MEDIUM), 24 * (model.scaleFactorV), 0xFFFFFF);  
24.     renderer.onRelease.add( renderer_onRelease );  
25.     return renderer;  
26. }  

加1行renderer.itemHasIcon =false;

这样就能用defaultIcon了。。。

这样所有按钮都有icon了，我只是第1行`要

噢。。。我知看你代码，，，用这个。。iconTextureFunction ，来设置itemHasIcon 。。。

感谢。。。。。。