Feathers:extending-themes

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

扩展羽毛组件的主题

有时，你想使用一个已经存在的羽毛组件主题theme，但是你想给创建的组件不同于默认样式的皮肤。有时，你能恰好的去修改你负责的组件属性。但经常，你将需要去扩展主题和应用不同的皮肤和样式通过主题文件。 文章Creating Custom Feathers Themes主动提供详细的关于主题文档。下面会出现一个更精简和有针对性的解释为扩展的主题，但是你可明确的读上面的文章 custom themes去明白它是如何完整的工作的。

命名

在 Introduction to Feathers themes，你学习关于alternate skin names.当你扩展主题创建不同于默认样式的组件样式时，你将创建你自己的备用皮肤名。 添加一个名字到组件， 你使用这个属性alternate skin names.

var button:Button = new Button();
button.nameList.add( "my-custom-button" );
this.addChild( button );

在上面的代码里，我们添加"my-custom-button" 这个名字到按钮组件里。当我们创建我们扩展的主题时我们现在能够使用这个名字了。

快速和不清晰

如果你提供自己的材质和其他资源，和你不需要任何来自主题的现有的材质，你能够简单的替换主题默认的材质，并执行这个方法传入你应用组件的皮肤到这个方法。让我们使用之前创建的正确的按钮组件名：

var theme:MetalWorksMobileTheme = new MetalWorksMobileTheme();
theme.setInitializerForClass( Button, myCustomButtonInitializer, "my-custom-button" );

这时，初始化者看起来像这样：

private function myCustomButtonInitializer( button:Button ):void
{
	button.defaultSkin = new Image( upTexture );
	button.downSkin = new Image( downTexture );
	button.hoverSkin = new Image( hoverTexture );
 
	button.defaultLabelProperties.textFormat = new TextFormat( "fontName", 18, 0xffffff );
}

那是更多的基础方法去扩展主题。这是最好的例子，不依靠主题已经使用过的材质和其他的资源为简单的改变。在下个例子中，让我们看下更多的格式。

使用子类

一般，扩展主题，最好是为它创建一个子类。 这个方法，你能进入它的材质，字体和其他属性变量和方法。通常，你可能想改变一个或者其他组件背景的皮肤和字体，但主题其他剩余的组件还是相同。

让我们开始创建一个子类：

package com.example.themes
{
	import feathers.themes.MetalWorksMobileTheme;
    import starling.display.DisplayObjectContainer;
 
 
	public class ExtendedMetalWorksTheme extends MetalWorksMobileTheme
	{
		public function ExtendedMetalWorksTheme( root:DisplayObjectContainer, scaleToDPI:Boolean = true )
		{
			super( root, scaleToDPI );
		}
 
		override protected function initialize():void
		{
			super.initialize();
 
			// set new initializers here
		}
	}
}

下一步，让我们制作我们习惯的名字到静态常量里，以便我们能获得编译时的检查：

public static const ALTERNATE_NAME_MY_CUSTOM_BUTTON:String = "my-custom-button";

这时，我们能够添加它到我们按钮组件的名字列表中，象这样：

button.nameList.add( ExtendedMetalWorksTheme.ALTERNATE_NAME_MY_CUSTOM_BUTTON );

任何其他的按钮组件在你的应用里也能够使用相同的名字。那是非常漂亮的主题文档。

在主题initialize()初始化方法里面，我们能够添加我们的初始化者方法：

override protected function initialize():void
{
	super.initialize();
 
	this.setInitializerForClass( Button, myCustomButtonInitializer, ALTERNATE_NAME_MY_CUSTOM_BUTTON );
}

这时，我们也添加一个初始化者到我们的主题类中。

private function myCustomButtonInitializer( button:Button ):void
{
	button.defaultSkin = new Image( upTexture );
	button.downSkin = new Image( downTexture );
	button.hoverSkin = new Image( hoverTexture );
 
	button.defaultLabelProperties.textFormat = this.smallUIDarkTextFormat;
	button.disabledLabelProperties.textFormat = this.smallUIDisabledTextFormat;
	button.selectedDisabledLabelProperties.textFormat = this.smallUIDisabledTextFormat;
}

注意那些自定义的皮肤材质仍然像上面那样被使用，但我使用了一些在父类中定义的文本格式使其余部分与主题相匹配。

就是它！ 更多详细关于主题文档，和其他的例子，通过阅读 Creating Custom Feathers Themes.

Related Links

• Introduction to Feathers Themes
• Creating Custom Feathers Themes

For more tutorials, return to the Feathers Documentation.

---

翻译者：沙漠浪子