[Egret学习笔记 六]GUI DataGroup和ArrayCollection的使用

1.定义一个ArrayCollection 作为DataGroup的数据源

2.建立一个LabelItemRender的组件 继承了ItemRender类

module uiComponent{

    export class LabelItemRender extends egret.gui.ItemRenderer{

        public constructor(){
            super();
        }

        //当数据发生改变时
        public dataChanged():void{

            this.labelDisplay.text = this.data.label; //显示一个对象的label属性值
        }
    }
}
3.为该ItemRender建一个皮肤LabelItemRenderSkin 该Skin为exml,建立在src/skins/mySkin目录下
<e:Skin xmlns:e="http://ns.egret-labs.org/egret" xmlns:w="http://ns.egret-labs.org/wing" width="100" height="50">

<e:states>
    <e:State name="up"/>
    <e:State name="down"/>
    <e:State name="disabled"/>
</e:states>
    <e:UIAsset width="100%" height="100%"
               source.up="button_normal_png"
               source.down="button_down_png"
               source.disabled="button_disabled_png" />
    <e:Label id="labelDisplay" size="24" fontFamily="Tahoma"
             width="100%" height="100%"
             textColor="0x111111"
             textColor.down="0xffffff"
             textColor.disabled="0xcccccc"
             verticalAlign="middle"
             textAlign="center"/>
</e:Skin>
4.源码实现

//数据源
var dataCollection = new egret.gui.ArrayCollection();
dataCollection.addItem({label:"选项1"});
dataCollection.addItem({label:"选项2"});

var dataGroup = new egret.gui.DataGroup();
dataGroup.itemRenderer = new egret.gui.ClassFactory(uiComponent.LabelItemRender); //设置ItemRender,利用工厂类实例化一个Class
dataGroup.itemRendererSkinName = "skins.mySkin.LabelItemRenderSkin";//设置皮肤
dataGroup.dataProvider = dataCollection;

dataGroup.verticalCenter = 0;
dataGroup.horizontalCenter = 0;

var layout:egret.gui.VerticalLayout = new egret.gui.VerticalLayout();
layout.gap = 10;
dataGroup.layout = layout;

this.guiLayer.addElement(dataGroup);