About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Feb

    1

    Feathers3 皮肤资料备注

    • 0 Comments
    • Flash Platform
    • 发布:古树悬叶
    • 引用:0
    • 浏览:

    所有的 Feathers 组件都支持大量的样式属性以允许用户自定义设计。许多组件包含了多个状态的背景皮肤属性,还有不同的布局属性,如 padding、alignment、字体样式等。此外,还有一些组件在移动开发或桌面开发时分别会有不同的选项。

    实际上 Feathers 没有默认皮肤,它鼓励开发者自己开发设计独一无二的皮肤外观。但也为了方便开发者,Feathers 提供了几个不同风格的示例主题,如果有必要或为了方便开发,开发者也可以直接扩展这些示例主题自定义不同的皮肤。

    基本资料:

    所有的皮肤、布局选项、字体样式等其它有用的样式属性,都是以 public 的属性方式提供了 API。自定义样式化的皮肤和布局时就像设置属性一样简单。以一个按钮为例:

    var button:Button = new Button();
    button.label = "Click Me";
    button.defaultSkin = new Quad( 100, 30, 0xc4c4c4 );
    button.fontStyles = new TextFormat( "Helvetica", 20, 0x3c3c3c );
    this.addChild( button );

    这里只是一个基本示例,还有其它更多的布局或图标相关的样式属性,可以参考具体的 API 手册。其中, starling.text.TextFormat 可以为任何 Feathers 组件用于自定义字体样式,无论是使用位图字体、嵌入字体或设备字体等。

    组件有多个状态

    有些组件类似 Button、TextInput 等有多个状态,可以为不同的状态设置不同的皮肤外观。比如通过 setTextureForState() 设置不同状态时的背景皮肤纹理:

    var skin:ImageSkin = new ImageSkin( upTexture );
    skin.setTextureForState( ButtonState.DOWN, downTexture );
    button.defaultSkin = skin;

    传递一个默认皮肤纹理给 ImageSkin 构造函数,然后再通过 setTextureForState() 方法设置不同状态的纹理。如果我们没有为某个状态设置皮肤纹理,那么默认的皮肤纹理就会被使用,比如上面的代码中没有设置 HOVER 状态的皮肤,那么 HOVER 状态时就会显示默认的皮肤纹理。如果要设转上老母一个状态,可能类似的代码如下面这样子:

    var skin:ImageSkin = new ImageSkin( upTexture );
    skin.setTextureForState( ButtonState.DOWN, downTexture );
    skin.setTextureForState( ButtonState.HOVER, hoverTexture );
    skin.setTextureForState( ButtonState.DISABLED, disabledTexture );
    button.defaultSkin = skin;

    和上面设置不同状态的纹理类似,可以通过 setFontStylesForState() 方法设置不同状态的字体样式。

    var upFontStyles:TextFormat = new TextFormat( "Helvetica", 20, 0x3c3c3c );
    var downFontStyles:TextFormat = new TextFormat( "Helvetica", 20, 0xff0000 );

    button.fontStyles = upFontStyles;
    button.setFontStylesForState( ButtonState.DOWN, downFontStyles );

    如上代码中,fontStyles 是默认的字体样式,而 setFontStylesForState() 方法可以自定义不同状态的字体样式(new 一个 TextFormat 即可)。

    设置子组件的外观皮肤样式:

    一些“复杂的” Feathers 组件会包含其它 Feathers 组件作为子组件。例如一个 Panel 组件,包含了一个 header 对象,像这样的 header 子组件是可以设置样式的,但它的样式属性并不会直接通过父组件直接暴露给开发者。

    样式化一个子组件比较简单的方法是自定义工厂方法,直接返回一个样式化的子组件,如 Panel 的 header 对象是通过 headerFactory 属性的工厂方法创建的:

    var panel:Panel = new Panel();
    panel.headerFactory = function():IFeathersControl
    {
        var header:Header = new Header();
        header.backgroundSkin = new Quad( 200, 50, 0x3c3c3c );
        header.fontStyles = new TextFormat( "Helvetica", 20, 0xd4d4d4 );
        return header;
    };
    this.addChild( panel );

     如果开发者正在使用一个主题( theme) 文件,可能会希望将皮肤样式外观有关的代码都放在主题文件中,那样的话就不推荐使用生成子组件的工厂方法,而应该为子组件创建新的样式名称,然后将代码移动到主题文件中。

    复杂的组件允许开发者自定义子组件的样式名称。在这个 Panel 的例子中,可以设置 customHeaderStyleName 属性,如:

    var panel:Panel = new Panel();
    panel.customHeaderStyleName = "custom-panel-header";
    this.addChild( panel );

     在主题文件中,创建一个对应的方法用于对子组件进行样式化设置:

    private function setCustomPanelHeaderStyles( header:Header ):void
    {
        header.backgroundSkin = new Quad( 200, 50, 0x3c3c3c );
        header.fontStyles = new TextFormat( "Helvetica", 20, 0xd4d4d4 );
    }

     最后“告诉”主题文件,当子组件有自定义的样式名称时,对应的调用哪个方法:

    getStyleProviderForClass( Header ).setFunctionForStyleName( "custom-panel-header", setCustomPanelHeaderStyles );
    • Tags:
    • 2017 / 2 / 1
    相关文章:
      Post Comment.

      发表评论