羔羊引擎之更换主题皮肤
本帖最后由 qq229449388 于 2017-11-21 00:08 编辑先看效果http://zsh.gyarea.com/GYLiteLesson/swfs/lesson1/GYLiteAPI.swf
羔羊引擎已经问世，现在大家来认识一下，羔羊引擎入门第一步，启动羔羊引擎，很简单，一句话看下面
首先新建一个as3工程，如下package {
import GYLite.component.button.GYButton;
import GYLite.component.container.GYSprite;
import GYLite.component.scaleDisplay.ScaleMode;
import GYLite.component.text.GYText;
import GYLite.component.text.GYTextArea;
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import theme.Win7SkinTheme;
public class GYLiteAPI extends Sprite {
public
function GYLiteAPI() {
this.addEventListener(Event.ADDED_TO_STAGE, addToStage);
}
private
function addToStage(e: Event) : void {
this.removeEventListener(Event.ADDED_TO_STAGE, addToStage);
stage.scaleMode = StageScaleMode.NO_SCALE GYSprite.Init(stage, new Win7SkinTheme); // 启动羔羊引擎，只需一句话，问你怕不怕
}
}
}
可以看到上面，只需调用GYSprite的Init方法就可以启动，第一个参数很明显是stage舞台，第二个参数很明显主题，好吧，不是很明显，英语不好的人查一下，Theme是主题的意思。下面我们从主题开始说明一下，主题在羔羊引擎里面怎么用，首先主题类是通过实现接口ISkinTheme产生的，我们看看接口有哪些方法，打开ISkinTheme看看。<blockquote>public interface ISkinTheme
{
function GetButtonSkin():IGYSkin;
function GetTabButtonSkin():IGYSkin;
function GetLinkButtonSkin():IGYSkin;
function GetScrollBarSkinV():IGYSkin;
function GetScrollBarSkinH():IGYSkin;
function GetListSkin():IGYSkin;
function GetTextInputSkin():IGYSkin;
function GetCheckBoxSkin():IGYSkin;
function GetRadioButtonSkin():IGYSkin;
function GetProgressBarSkin():IGYSkin;
function GetSliderSkin():IGYSkin;
function GetTextTextFormat():TextFormat;
function GetMenu():GYMenu;
function GetComboBox():GYComboBox;
function GetComboButtonSkin():IGYSkin;
function GetMenuSkin():IGYSkin;
function GetWindowSkin():IGYSkin;
function GetTextAreaSkin():IGYSkin;
function initRes():void;
function getBmp(n:String):BitmapData;
可以看到基本上都是前面带Get的一些方法，这里所有的GetXXXXSkin，意思就是默认创建相应的组件时，内部会默认从这个方法里面提取皮肤，所以意味什么？没错了，就是换皮肤很简单啊，只需要实现这些接口，就可以换皮了。这些皮肤分别是哪些，我不多说了，查查字典，或者问问别人，其实GYSkinTheme主题类有注释，问我也可以。
注意里面有个initRes方法，就是初始化主题用的，当主题通过GYSprite.Init(stage, new Win7SkinTheme);方法传入，内部就会调用initRes方法初始化，想干些什么事情，随你便。getBmp方法没啥用，就是写给你玩玩的，你看着办吧。
可能光说接口，不明白具体怎么写，但是不要怕，羔羊引擎提供了一个GYSkinTheme的默认主题类，已经实现一遍这些接口，大家可以打开看看。因为代码比较长，我说明一下GetButtonSkin方法，其他大家举一反三。/**获得默认的按钮皮肤*/
public function GetButtonSkin():IGYSkin
{
return new ButtonSkin(scaleBtnSkinVec,commonRect);
}如上，这个方法就是返回一个ButtonSkin类实例，什么是ButtonSkin类？打开看看就知道啊，这里告诉大家一个规则，所有皮肤都是最基本要实现IGYSkin接口，或者说继承GYSkin类，而ButtonSkin当然是GYSkin的子类，除此之外，其他皮肤如CheckBoxSkin，RadioButtonSkin等也一样。具体内容看内部基本差不多，易学易懂。
在GYSkinTheme，除了GetXXXXSkin等方法，还有要求的initRes方法，还有一个setRes方法，这个方法就是设置一些图片资源，大家可能一眼就可以看到里面有一堆BitmapData，如下
public var commonBtn_upBD:BitmapData;
public var commonBtn_overBD:BitmapData;
public var commonBtn_downBD:BitmapData;
public var commonBtn_disabledBD:BitmapData;
public var commonBtn_selUpBD:BitmapData;
public var commonBtn_selOverBD:BitmapData;
public var commonBtn_selDownBD:BitmapData;
public var commonBtn_selDisabledBD:BitmapData;
public var scaleBtn_upBD:BitmapData;
public var scaleBtn_overBD:BitmapData;
public var scaleBtn_downBD:BitmapData;
public var scaleBtn_disabledBD:BitmapData;
可以看到，就是把Embed的图片，创建出BitmapData直接赋值，不要问我Embed是什么。
说到这里，大家应该大概了解启动羔羊引擎，以及使用主题给羔羊引擎换皮肤了，这里有一个win7的皮肤，供大家参考，我们使用上面的工程（使用的就是win7的皮肤），创建个按钮和文本来看看。
private function addToStage(e:Event):void
{
this.removeEventListener(Event.ADDED_TO_STAGE, addToStage);
stage.scaleMode = StageScaleMode.NO_SCALE
GYSprite.Init(stage, new Win7SkinTheme);
initUI();
}
private function initUI():void
{
var btn:GYButton;
btn = new GYButton;
btn.width = 150;
btn.height = 46;
btn.label = "创建一个按钮来玩玩\n点击我再创建一个文本";
btn.onClick = createText;
addChild(btn);
}
private function createText(e:MouseEvent):void
{
var t:GYTextArea = new GYTextArea;
t.setPadding(5);
t.vScroller.verticalPolicy = 1;
t.x = 200;
t.width = 200;
t.height = 200;
t.text = "这个是TextArea组件，羔羊引擎就是这么简单！仿照Win7SkinTheme类，自己可以更换更多主题。";
addChild(t);
}还是刚刚那个工程，我们添加initUI和createText方法，initUI里创建一个按钮，GYButton就是基本的按钮组件，这里要说明一下，onClk是一个点击事件的回调函数接口，给大家提供一个方便，没什么事大家就不要写什么addEventListener了。
可以看到，直接new出来的GYButton和GYTextArea已经是win7的皮肤了，只需要Win7Theme一个主题类文件和准备皮肤的文件夹，这个win7的皮肤文件夹在工程目录的toolImg文件夹里面，大家可以下附件去看，是不是感到换皮是多轻松的一件事。
下一个教程我会给出更多内容，有兴趣或者想知道更多内容的，请联系以下
qq：229449388(加我请写上，羔羊引擎) 或者邮件 229449388@qq.com
欢迎加群讨论 371259465
大佬牛B
页:
[1]