About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Feb

    1

    Feathers3 “主题”(themes)的一些备注

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

    Feathers 主题或者主题文件(themes)是一个类,集中在同一个文件位置实现多个组件的皮肤样式设置与管理。在主题文件中提供的样式是全局的,任何 Feathers 组件初始化的时候,会自动设置样式。在应用开发时使用主题文件是非常容易、方便和有用的,它可以使用相同的样式皮肤化任何组件。如果想要特殊化一个组件的样式,而不同于默认全局的样式,也可以非常方便的从主题文件中“排除”,如果喜欢默认样式,但想有一些微小的调整,都可以轻松实现。

    主题文件并不是必须的,可以通过 Feathers 组件直接逐个的设置每个组件的样式属性。但使用主题文件会带来很大的好处,就是可以将皮肤样式外观的设置集中到一处,而不会影响其它具体的业务逻辑,减少代码混乱。也可以使用预制的主题(样例主题),进行前期的快速功能开发,后期再调换成自己设计的主题,对其余的部份不会有什么影响。

    初始化主题:

    使用 Feathers UI 库中的示例主题 MetalWorksMobileTheme 类为例,在 Starling 的根容器中立即实例化主题:

    import starling.display.Sprite;
    import feathers.themes.MetalWorksMobileTheme;

    public class Main extends Sprite
    {
        public function Main()
        {
            new MetalWorksMobileTheme();
            super();
        }
    }

    实例化主题的代码在 super() 方法前,如有必要情况,主题就可以对根容器也进行皮肤样式化处理(根容器不一定就是直接扩展 Starling 的 Sprite 类,可能就是实现了一个自定义的 Feathers 组件)。

    此后,当 Feathers 组件被 addChild 到舞台时,主题文件就会自动检测添加的组件,自动给组件添加皮肤。

    自定义特定组件实例:

    1、如果使用主题文件,那么最好将样式化相关的代码都放在主题文件内(脱藕性),但也可以在任何组件上自定义样式,以使其与默认的皮肤样式不同。如自定义一个按钮的标签字体样式: 

    var button:Button = new Button();
    button.label = "Click Me";
    button.fontStyles = new TextFormat( "_sans", 20, 0x4c4c4c );
    this.addChild(button);

    如上代码,样例按钮的背景皮肤、padding 等会按着主题文件中的样式进行设置,但 fontStyles 会以这个自定义的 starling.text.TextFormat 样式进行设置。

    相比较而言,在旧版本的 Feathers 中,在主题文件外自定义样式有一些麻烦。如上面的代码,这样直接简单的设置样式有可能会被主题文件替换。但从 Feathers 3.1 开始,这样直接设置样式属性不会再和主题文件中的代码冲突。

    2、还有一些情况,某个组件就是不想使用主题文件中的任何样式,是完完全全自定义的。有下面几种方法可以实现:

    a、清除样式提供者。最直接暴力的方法就是将 styleProvider 属性设为 null,告诉组件不使用主题。

    var button:Button = new Button();
    button.styleProvider = null; //不使用主题文件中的代码!
    button.label = "Click Me";
    button.fontStyles = new TextFormat( "_sans", 20, 0x4c4c4c );
    button.defaultSkin = new Quad( 100, 30, 0xcccccc );
    button.padding = 10;
    this.addChild(button);

    当 styleProvider 属性设为 null 时,按钮的所有样式属性如背景纹理、padding、 layouts、字体等等都需要手动设置了,因为它不会再接受主题文件中的样式代码。

    b、使用扩展的自定义样式名称(相对于前面的方法,这是比较推荐的方法)。这通常会涉及到主题类的扩展,将皮肤样式相关的代码集中放在主题文件中,可以让代码更清晰。

    内置的可交替使用的(备用)样式名称(Built-in alternate style names):

    一些组件提供了一组内置的备用样式名称(style names),样式名称可以被添加到 styleNameList 属性中,用以通知主题文件特定实例的皮肤与默认的皮肤应该有所不同。备用的皮肤在不改变组件功能的基础上,用以在视觉上区分组件实例。例如,希望某个按钮比其它按钮更明显,给它一个名为“call-to-action”的样式名称,让主题给它更明显的颜色用以在视觉上区分其它按钮。

    另一个例子,如 GroupedList 组件有一个标准的普通外观皮肤,看起来就像是 List 组件,但它有 headers 与 footers。还有一个 “inset” 样式,控制组中第一个和最后一个项渲染器的外观带有圆角。如果希望观看两种不同的风格样式,可以在 Component Explorer 中浏览 GroupedList 组件。

    Component Explorer 是类似 Feathers 移动版本的组件 DEMO,使用了 MetalWorksMobileTheme 主题。

    备用的样式名称一般是直接在组件定义的类上定义为 public 的静态常量,如 GroupedList 类定义了 ALTERNATE_STYLE_NAME_INSET_GROUPED_LIST 常量。inset 样式就可以被添加到 styleNameList 中,如:

    var list:GroupedList = new GroupedList();
    list.styleNameList.add( GroupedList.ALTERNATE_STYLE_NAME_INSET_GROUPED_LIST );
    this.addChild( list );

    如果正在使用的主题文件没有为组件的备用样式名称提供对应的皮肤,组件并不会因为找不到皮肤而看不到或产生异常,而是主题会自动回退到显示默认的皮肤。主题文件的程序员并不需要编写特别的代码,它已经是主题系统的核心部分。这样只是为了确保开发者在切换不同的主题文件时,可以让组件的功能正常运行,而不产生问题。如果自定义自己的主题文件,确保为每个备用样式名称提供对应的皮肤是最好的做法。

    文件大小警告:

    示例主题文件包含了每个可用的 feathers 组件,这意味着如果使用示例主题文件,所有的羽毛组件不管用到的还是没用到的都将被编译到正在开发的应用中去。如果要保存文件大小,应该考虑修改主题文件的源代码,以删除项目中未使用的所有组件的引用。另一种更好的方式就是完完全全的从头开始创建一个自定义的主题文件

    • Tags:
    • 2017 / 2 / 1
    相关文章:
      Post Comment.

      发表评论