文章转自:点击打开链接
自定义 列表内容
[参考]
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,相当于给每个组件指定不同的主题。 应该是
- var label:Label = new Label();
- label.textRendererFactory= function():ITextRenderer
- {
- var renderer:TextFieldTextRenderer = new TextFieldTextRenderer();
- renderer.textFormat = new TextFormat( "Arial", 16, 0xff0000,
- null, null, null, null, null, TextFormatAlign.CENTER );
- return renderer;
- }
- label.text = 'Hello';
- addChild(label);
而不是
- var label:Label = new Label();
- label.text = 'Hello';
- 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
- this._list = new List();
- this._list.dataProvider = new ListCollection(_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 = new Button();//回退按钮
- this._backButton.label = "返回";
- this._backButton.addEventListener("triggered", backButton_triggeredHandler);
- this._settingsButton = new Button();
- this._settingsButton.label = "设置";
- this._settingsButton.addEventListener("triggered", settingsButton_triggeredHandler);
- this._header = new Header();
- 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://forum.starling-framework.org/forum/feathers
搜索list.dataProvider
作了自定义渲染项目.有效果,但是用List.dataProvider来更新,没有变化.如下
- function create()
- {
- //works
- list = new List();
- list.dataProvider = new ListCollection(['1','2']);
- }
- function updateList()
- {
- //doesn't work
- list.dataProvider = null;
- list.dataProvider = new ListCollection(['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,其他行不要。
- var data:Array = [
- { label: '', usehomeicon: true },
- { label: '01', usehomeicon: false }];
- list = new List();
- list.layout = new HorizontalLayout();
- list.itemRendererFactory = function():IListItemRenderer
- {
- var renderer:DefaultListItemRenderer = new DefaultListItemRenderer();
- var defSkin:Image = new Image(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('button-up-skin'));
- var defSelSkin:Image = new Image(DataModel.DEVICE_PROFILE.UIAtlas.getTexture('button-down-skin'));
- var defDisabledSkin:Image = new Image(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 = new Image(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 = new BitmapFontTextFormat(TextField.getBitmapFont(DataModel.FONT_APEX_MEDIUM), 24 * (model.scaleFactorV), 0x585858);
- renderer.horizontalAlign = HAlign.LEFT;
- renderer.defaultSelectedLabelProperties.textFormat = new BitmapFontTextFormat(TextField.getBitmapFont(DataModel.FONT_APEX_MEDIUM), 24 * (model.scaleFactorV), 0xFFFFFF);
- renderer.onRelease.add( renderer_onRelease );
- return renderer;
- }
加1行renderer.itemHasIcon =false;
这样就能用defaultIcon了。。。
这样所有按钮都有icon了,我只是第1行`要
噢。。。我知看你代码,,,用这个。。iconTextureFunction ,来设置itemHasIcon 。。。
感谢。。。。。。