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 = newBasicItemRenderer();
return renderer;
}
相关类
public class BasicItemRenderer extends FeathersControl implementsIListItemRenderer
写法2）指定渲染类型
this.list.itemRendererType = GalleryItemRenderer;
相关类
public class GalleryItemRenderer extendsFeathersControl implementsIListItemRenderer

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

写法：
public class GalleryItemRenderer extends FeathersControl implements IListItemRenderer

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

[java] view plaincopy

var label:Label =newLabel();
label.textRendererFactory= function():ITextRenderer
{
var renderer:TextFieldTextRenderer = newTextFieldTextRenderer();
renderer.textFormat = newTextFormat("Arial",16,0xff0000,
null,null,null,null,null, TextFormatAlign.CENTER );
returnrenderer;
}
label.text = 'Hello';
addChild(label);

而不是

[java] view plaincopy

var label:Label =newLabel();
label.text = 'Hello';
addChild(label);

label要显示，

itemRendererType CELL的渲染类型

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

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 plaincopy

this._list =newList();
this._list.dataProvider =newListCollection(_local1);
//this._list.typicalItem = {"text":"项目 10"};//典型项目,，没什么用
this._list.isSelectable =this.settings.isSelectable;//是否可选
this._list.scrollerProperties.hasElasticEdges =this.settings.hasElasticEdges;//是否有弹性,废话
this._list.itemRendererProperties.labelField ="text";
this._list.addEventListener("change", list_changeHandler);//事件
this.addChildAt(this._list,0);
this._backButton =newButton();//回退按钮
this._backButton.label ="返回";
this._backButton.addEventListener("triggered", backButton_triggeredHandler);
this._settingsButton =newButton();
this._settingsButton.label ="设置";
this._settingsButton.addEventListener("triggered", settingsButton_triggeredHandler);
this._header =newHeader();
this._header.title ="List";
this.addChild(this._header);
this._header.leftItems =new<DisplayObject>[this._backButton];//左按钮
this._header.rightItems =new<DisplayObject>[this._settingsButton];//右按钮
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 plaincopy

function create()
{
//works
list = newList();
list.dataProvider = newListCollection(['1','2']);
}
function updateList()
{
//doesn't work
list.dataProvider = null;
list.dataProvider = newListCollection(['1','3']);
}

用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 plaincopy

var data:Array = [
{ label: '', usehomeicon:true},
{ label: '01', usehomeicon:false}];
list = newList();
list.layout = newHorizontalLayout();
list.itemRendererFactory = function():IListItemRenderer
{
var renderer:DefaultListItemRenderer = newDefaultListItemRenderer();
var defSkin:Image = newImage(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('button-up-skin'));
var defSelSkin:Image = newImage(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('button-down-skin'));
var defDisabledSkin:Image = newImage(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('button-disabled-skin'));
//THIS IS WHERE I NEED TO MAKE AN ICON, BUT I THINK RENDERER.DATA ISN'T THE SAME THING AS THE list.dataProvider
if(renderer.data && renderer.data.usehomeicon) renderer.defaultIcon =newImage(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('homeicon_up'));
renderer.defaultSkin = defSkin;
renderer.defaultSelectedSkin = defSelSkin;
renderer.disabledSkin = defDisabledSkin;
renderer.paddingLeft = 22* model.scaleFactorH;
renderer.height = 60* model.scaleFactorV;
renderer.defaultLabelProperties.textFormat = newBitmapFontTextFormat(TextField.getBitmapFont(DataModel.FONT_APEX_MEDIUM),24* (model.scaleFactorV),0x585858);
renderer.horizontalAlign = HAlign.LEFT;
renderer.defaultSelectedLabelProperties.textFormat = newBitmapFontTextFormat(TextField.getBitmapFont(DataModel.FONT_APEX_MEDIUM),24* (model.scaleFactorV),0xFFFFFF);
renderer.onRelease.add( renderer_onRelease );
returnrenderer;
}

加1行renderer.itemHasIcon =false;

这样就能用defaultIcon了。。。

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

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

感谢。。。。。。