Feathers组件–之–列表

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

RSS

Feathers组件–之–列表

2014年03月06日 ⁄ 综合 ⁄ 共 6436字 ⁄ 字号小中大 ⁄ 评论关闭

文章目录

[参考]
[正文]

自定义列表内容

[参考]

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://jackblog.diandian.com/

论坛

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 。。。

感谢。。。。。。

【上篇】如何调试PHP程序
【下篇】asp.net总结之比较DataGrid和GridView

作者: sitz

该日志由 sitz 于10年前发表在综合分类下，最后更新于 2014年03月06日.
转载请注明: Feathers组件–之–列表 | 学步园 +复制链接

抱歉!评论已关闭.

学步园