Feathers:themes

来自Starling中文站
跳转到: 导航, 搜索

原文地址:http://wiki.starling-framework.org/feathers/themes

目录

介绍羽毛ui库主题对象

观看舞台当有一个新的子集被添加时,一个主题在羽毛UI库中只是一个对象,基于一些简单的规则,它是自动的匹配羽毛UI库组件的皮肤。主题对象使得你全部代码的组件皮肤变得简单,并统一在一个地方而不是在你的应用和游戏代码中到处都是。(以及可能多余地重复)

主题对象不是必需有的,因为,你能手动设置羽毛UI库所有的组件皮肤,不管怎么样,主题对象还是提供了很多便利。你可以用一条代码实例化一个主题,主题可以被扩展,它有助于使你的应用的外观功能分开。

在【https://github.com/joshtynjala/feathers-examples feathers-examples】这里有许多有效主题的例子。在将来,在社区中征集可以编辑的主题对象,为开发者们提供多种多样的主题,他们不需要自己设计。

初始化一个主题

在下面的例子中,我们用到这个例子【https://github.com/joshtynjala/feathers-examples/tree/master/MetalWorksMobileTheme MetalWorksMobileTheme】

在你项目根对象starling显示对象中,添加“Event.ADDED_TO_STAGE”的事件监听。

public function Main()
{
	this.addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );
}
 
private function addedToStageHandler( event:Event ):void
{
	// more here later
}

下一步,让我们添加一个主题的变量。

private var theme:MetalWorksMobileTheme;

现在,在“addedToStageHandler()”函数内,首要事情是我们将实例一个主题,这需要是在我们应用中添加任何组件之前必须完成的。

this.theme = new MetalWorksMobileTheme( this.stage );

我们传入一个显示对象。这个显示对象将是我们应用的显示列表中最高级别的。在这里我们将看到一个新组件被添加时,通常情况下,这将是starling的舞台。 为了测试它,在我们创建主题后,我们在下一行创建一个按钮,

var button:Button = new Button();
button.label = "Click Me";
button.x = 200;
button.y = 150;
this.addChild( button );

就是它,当我们用"addChild()"添加一个按钮时,当前主题将检测这个按钮并给它一些皮肤。在我们添加别的按钮时也会设置同样的皮肤。 更多的使用主题的例子【https://github.com/joshtynjala/feathers-examples Feathers example apps】。仔细看看这些项目的源代码,在一个大型应用中,他们的主题是如何初始化的。

一个主题更新组件的皮肤是在什么时候?

一个主题皮肤的使用是在一个组件被添加到显示列表和组件在舞台上被使用的时候。用另一句话说,在组件的构造函数被执行时,组件不是立刻获得皮肤的。当你在“addChild()”函数中放入一个组件或者组件在舞台被使用时才开始设置皮肤。

在添加组件到显示列表之前,你任何属性的设置,都可能被主题中的内容替换。

定制一个特定的组件实例

如果你选择用一个主题,当你想定制一个特定的组件皮肤时,最好是在主题类结构内完成。看【扩展羽毛UI库组件】文挡,找到方法定义单个组件并看他和默认的有什么不同,它非常简单,它帮助你把所有的皮肤代码放在一个地方。 当不推荐使用主题时,但是在你创建独特组件时,你同样能够直接的改变它的皮肤和样式属性,你仅仅需要注意的是,它被添加在舞台上之后再去操作。如上所述,组件在被添加到舞台上之前的任何属性样式设置都会被主题对象替换。

备用皮肤名字

有些组件可能不只一个皮肤,例如,GroupedList组件有固定的皮肤,在头部和底部,看起来更像List组件,它往往是最好的组结构并有密切的关系,如按字母顺序排列的节点列表。组结构列表有一个备用的插入样式可以控制这个组结构的第一个和最后一个节点是否具有圆形边缘,以及组件边缘与节点渲染器之间有一些陪衬效果。这个样式设置更好的弱化了组结构的相关联的东西。ios使用同样的样式在设置屏幕里面这个样式使得每个组结构有区别多一点的地方。 看看两个样式之间有些什么不同,你可以观察GroupedList组件,在 Component Explorer这个组件例子中。在设置屏幕里面对于GroupedList组件来说,用“inset”样式改变组结构的样式。 使用备用皮肤是通过一个类暴露的公共的静态常量。例如GroupedList组件定义ALTERNATE_NAME_INSET_GROUPED_LIST 插入样式能够被使用,是通过添加一个常量到组结构列表里面。nameList, 象这样

var list:GroupedList = new GroupedList();
list.nameList.add( GroupedList.ALTERNATE_NAME_INSET_GROUPED_LIST );
this.addChild( list );

不是所有的主题对象都提供备用皮肤。然而,如果一个备用皮肤不可用,正常的皮肤将被应用由于没有额外的作用来自主题作者。你的组件可能没有一个创意的皮肤,但是它不会完全没有皮肤。

标准图标

羽毛ui组件库提供了一个类StandardIcons 关于主题可以提供常用的纹理图标。例如,StandardIcons.listDrillDownAccessoryTexture 代表性的提供一个箭头指示指向右边,表明你能选择列表节点操作下去进入更多详细数据。这个图标和列表节点一起被使用。 accessoryTextureField or accessoryTextureFunction. 不是所有的主题对象都提供这些图标,但是鼓励主题作者设计主题时包括这些图标。

文件尺寸警告

实例主题对象普遍地皮肤对组件非常有用在羽毛ui库里。这意思是说所有的羽毛ui库组件将被编辑进你的应用中,其中包含你不确定使用的某个组件。在你的应用程序的本地副本的主题中不使用的组件,占用了文件的尺寸,应该考虑取消对那些组件的引用。 显然,如果你为你的应用或者游戏创建一个主题custom theme,在你UI中你计划使用的组件,你才为他们定义皮肤。在这种情况下,文件的尺寸不会被额外无用的组件占用。

友情链接


更多教程 返回到Feathers Documentation.


翻译者:沙漠浪子

个人工具
名字空间

变换
操作
导航
Starling中文资料
Starling原创教程
论坛
友链
工具箱