egret列表

白鹭引擎EUI列表组件详解
本文深入探讨了白鹭引擎(Egret)中的EUI列表组件,重点介绍了如何使用http://developer.egret.com/en/apidoc/index/name/eui.List相关API进行列表的创建、数据绑定和定制化操作。

白鹭列表 http://developer.egret.com/en/apidoc/index/name/eui.List

//////////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (c) 2014-present, Egret Technology.
//  All rights reserved.
//  Redistribution and use in source and binary forms, with or without
//  modification, are permitted provided that the following conditions are met:
//
//     * Redistributions of source code must retain the above copyright
//       notice, this list of conditions and the following disclaimer.
//     * Redistributions in binary form must reproduce the above copyright
//       notice, this list of conditions and the following disclaimer in the
//       documentation and/or other materials provided with the distribution.
//     * Neither the name of the Egret nor the
//       names of its contributors may be used to endorse or promote products
//       derived from this software without specific prior written permission.
//
//  THIS SOFTWARE IS PROVIDED BY EGRET AND CONTRIBUTORS "AS IS" AND ANY EXPRESS
//  OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
//  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
//  IN NO EVENT SHALL EGRET AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
//  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
//  LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;LOSS OF USE, DATA,
//  OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
//  LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
//  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
//  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
//////////////////////////////////////////////////////////////////////////////////////

class Main extends egret.DisplayObjectContainer {



    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {

        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin

            context.onUpdate = () => {

            }
        })

        egret.lifecycle.onPause = () => {
            // egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            // egret.ticker.resume();
        }

        egret.registerImplementation("eui.IAssetAdapter", new AssetAdapter());
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());

        RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.configComplete, this);
        RES.loadConfig("resource/default.res.json", "resource/");
    }


    public configComplete(event: RES.ResourceEvent): void {
        RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.configComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.groupComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.groupProgress, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onLoadError, this);
        let soundNames: string[] = this.getMusicNames();

        RES.createGroup("all_sounds", soundNames);
        RES.loadGroup("all_sounds");//defaultload是在default.res.json中配置的资源组
    }

    private groupProgress(event: RES.ResourceEvent): void {
        egret.log("progress ", event.itemsLoaded, "/", event.itemsTotal, ", ", event.resItem["name"]);
    }

    private onLoadError(event: RES.ResourceEvent): void {
        egret.log("onLoadError: event");
    }

    public groupComplete(event: RES.ResourceEvent): void {
        RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.groupProgress, this);
        RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.groupComplete, this);
        egret.log("groupComplete");


        //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
        var theme = new eui.Theme("resource/default.thm.json", this.stage);
        theme.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);
    }

    private onThemeLoadComplete(): void {
        this.createGameScene();
    }



    private getMusicNames(): string[] {

        let oldNames: string[] = [
            "1104_die_20.mp3",
            "1116_die.mp3",
            "1118_die.mp3",
            "1119_die.mp3",
            "1120_die.mp3",
            "beauty_0.mp3",
            "beauty_1.mp3",
            "beauty_2.mp3",
            "beauty_3.mp3",
            "big_10.mp3",
            "big_11.mp3",
            "big_12.mp3",
            "big_13.mp3",
            "big_14.mp3",
            "big_15.mp3",
            "big_16.mp3",
            "big_7.mp3",
            "big_8.mp3",
            "big_9.mp3",
            "big_win_gold.mp3",
            "gold_explode_big.mp3",
            "gold_explode_small.mp3",
            "gold_wheel.mp3",
            "s_battlebg1.mp3",
            "s_battlebg2.mp3",
            "s_battlebg3.mp3",
            "s_battlebg4.mp3",
            "s_button.mp3",
            "s_coin.mp3",
            "s_fire.mp3",
            "s_homebg.mp3",
            "s_hurt.mp3",
            "s_light.mp3",
            "s_trail.mp3",
            "s_wave.mp3"
        ];

        let soundNames: string[] = [];
        for (let n of oldNames) {
            let after: string = n.replace(".", "_");
            soundNames.push(after);
        }
        return soundNames;
    }

    /**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene() {
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;

        let topMask = new egret.Shape();
        topMask.graphics.beginFill(0x000000, 1);
        topMask.graphics.drawRect(0, 0, stageW, stageH);
        topMask.graphics.endFill();
        this.addChild(topMask);


        let selectLabel = new egret.TextField();
        selectLabel.text = "选择音乐";
        selectLabel.x = 100;
        selectLabel.y = 100;
        selectLabel.width = 400;
        selectLabel.height = 40;
        selectLabel.textColor = 0xFFffff;
        selectLabel.textAlign = "center";
        selectLabel.background = true;
        selectLabel.backgroundColor = 0x00000f;
        this.addChild(selectLabel);

        var exml =
            `<e:Scroller xmlns:e="http://ns.egret.com/eui">
                <e:List id="list" width="700" height="400">
                    <e:itemRendererSkinName>
                        <e:Skin states="up,down,disabled" height="50">
                            <e:Label text="{data.label}" textColor="0xFFFFFF" horizontalCenter="0" verticalCenter="0" textAlign="left"/>
                        </e:Skin>
                    </e:itemRendererSkinName>
                </e:List>
            </e:Scroller>`;

        let clazz = EXML.parse(exml);
        let scroll = new clazz();
        scroll.x = 400;
        scroll.y = 100;
        this.addChild(scroll);

        let collection = new eui.ArrayCollection();
        let allNames: string[] = this.getMusicNames();
        for (let idx = 0; idx < allNames.length; idx++) {
            collection.addItem({ label: String(idx) + "  " + allNames[idx] });
        }

        let nameList: eui.List = scroll.list;
        nameList.dataProvider = collection;
        nameList.selectedIndex = 1;
        nameList.addEventListener(eui.ItemTapEvent.ITEM_TAP, (e: eui.PropertyEvent): void => {
            let text = nameList.selectedItem["label"];
            egret.log("select ", text, ", index = ", nameList.selectedIndex);
            selectLabel.text = text;
        }, this);

        let btnPlay: egret.Shape = new egret.Shape();
        btnPlay.graphics.beginFill(0x00ff00, 1);
        btnPlay.graphics.drawRect(0, 0, 80, 80);
        btnPlay.graphics.endFill();
        btnPlay.x = 100;
        btnPlay.y = 300;
        btnPlay.touchEnabled = true;
        this.addChild(btnPlay);
        btnPlay.addEventListener(egret.TouchEvent.TOUCH_TAP, function (evt: egret.TouchEvent) {
            let itmIdx = nameList.selectedIndex;
            let oldText = this.getMusicNames()[itmIdx];
            let text = StringUtils.instance().trimSpace(oldText);
            egret.log("Main:: text = ", text, ", itmIdx = ", itmIdx);
            SoundManager.instance().playEffect(text);
        }, this);

        SoundManager.instance().playBg(ResSoundDefine.s_battlebg1_mp3);
    }

}
/**
 * @description 重新reset函数,方便{@link ObjectPool}回收利用
 * @author (pdh)
 * @date 2018-11-15
 * @interface IReset
 */
interface IReset {
    reset();
}

/**
 * @description entity需要销毁资源
 * @author (pdh)
 * @date 2018-11-15
 * @interface IDestroy
 */
interface IDestroy {
    destroy();
}


/**
 * @description 能被{@link ObjectPool}回收利用的
 * @author (pdh)
 * @date 2019-01-18
 * @interface ISuperObject
 * @extends {IReset}
 * @extends {IDestroy}
 */
interface IRecoveryObject extends IReset, IDestroy {
}

/**
 * @description 很多地方要传递参数,直接用map传递参数容易出错,改成继承自这个类传参数
 * @author (pdh)
 * @date 2018-10-31
 * @abstract
 * @class BaseProperty
 */
abstract class ABaseProperty implements IReset {
    public reset() {

    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值