按钮

按钮是FairyGUI里最常用的扩展组件。他用于多个用途,例如传统UI框架中的RadioButton、Checkbox、List Item等,在FairyGUI里通通都是按钮。

创建按钮

可以通过两种方式创建按钮组件。

设计属性

在组件编辑状态下,按钮组件的属性面板是:

制作说明

注意:按钮组件内并非只能有“title”和“icon”,你可以放置任何元件,例如放置任意多的文本、装载器等。“title”和“icon”的设定只是用于按钮组件在编辑器实例化时能够直观设置而已。

实例属性

在舞台上选中一个按钮组件,右边的属性面板列表出现:

GButton

设置按钮的标题或者图标,你甚至不需要强制对象为GButton的类型,直接用GObject提供的接口就可以,例如:

GObject obj = gcom.GetChild("n1");
obj.text = "hello";
obj.icon = "ui://包名/图片名";

如果是单选或者多选按钮,下面的方法设置是否选中:

button.selected = true;

通常对于单选/多选按钮,用户点击后就能切换状态。如果你不需要这样,希望只能通过API改变状态,那么可以:

//关闭后你只能通过改变selected属性修改按钮状态,用户点击不会改变状态。
button.changeStateOnClick = false;

按钮全局声音的设置方式为:

//Unity版本要求一个AudioClip对象,如果是使用库里面的资源,那么可以使用:
UIConfig.buttonSound = (NAudioClip)UIPackage.GetItemAssetByURL("ui://包名/声音名");

//其他版本要求一个资源url,即:
UIConfig.buttonSound = "ui://包名/声音名";

按钮全局声音的音量设置方式为:

//全局音量
UIConfig.buttonSoundVolumeScale = 1f;

这个设置只能在创建任何UI前设置。如果要动态控制全局声音(包括动态里的音效)的开关或音量,Unity平台可以用以下的方式,其他平台则需要查阅引擎提供的功能。

GRoot.inst.EnabledSound();
GRoot.inst.DisableSound();

//调整全局声音音量,这个包括按钮声音和动效播放的声音
GRoot.inst.soundVolume = 0.5f;

监听普通按钮点击的方式为:(注意,点击事件不只是按钮有,任何支持触摸的元件都有,例如普通组件、装载器、图形等,他们的点击事件注册方式和按钮是相同的。)

//Unity/Cry/MonoGame
button.onClick.Add(onClick);

//AS3
button.addClickListener(onClick);

//Egret
button.addClickListener(this.onClick, this);

//Laya
button.onClick(this, this.onClick);

//Cocos2dx
button->addClickListener(CC_CALLBACK_1(AClass::onClick, this));

//CocosCreator
button.onClick(this.onClick, this);

按钮可以模拟触发点击:

//模拟触发点击,只会有一个触发的表现,以及改变按钮状态,不会触发侦听按钮的点击事件。
button.FireClick(true);

//如果同时要触发点击事件,需要额外调用:(仅Unity/Cry示例,其他平台自己研究)
button.onClick.Call();

单选和多选按钮状态改变时有通知事件:

//Unity/Cry/MonoGame
button.onChanged.Add(onChanged);

//AS3
button.addEventListener(StateChangeEvent.CHANGED, onChanged);

//Egret
button.addEventListener(StateChangeEvent.CHANGED, this.onChanged, this);

//Laya
button.on(fairygui.Events.STATE_CHANGED, this, this.onChanged);

//Cocos2dx
button->addEventListener(UIEventType::Changed, CC_CALLBACK_1(AClass::onChanged, this));

//CocosCreator
button.on(fgui.Event.STATUS_CHANGED, this.onChanged, this);