style

现在gic也支持style了，你甚至可以将style以单独的文件引入。这样你就可以很容易的为您的app制作主题了。

在style里面，你可以为各种元素定义不同的样式(设置不同的属性)，然后给该元素设置一个style.name的附加属性，这样你就可以在后面的xml中直接以名字来引入样式。如果您没有为该元素设置style.name属性，那么该样式默认作用于所有同类元素上，该方式只有当您启用了默认样式以后才会生效，下面细说。在style里面，你也可以定义模板。

样式也是有作用域的概念的，只有在定义该样式的子孙节点才能引用，子孙节点也可以使用相同的style.name来覆盖父节点的样式，同样也是只能作用于该节点的子孙元素。

属性

名称 数据类型 介绍 是否支持绑定 是否支持动画
path String 引入本地单独style文件的path。 是 否

附加属性

名称 数据类型 介绍
style.name String 该元素作为样式的名称

例子

  1. 以附加属性style.name来引用。

    Step1:定义样式。为该样式设置一个style.name的属性

    1
    2
    3
    <style>
        <lable font-size="25" font-color="red" style.name="red-lable"/>
    </style>

    Step2:引用样式。在引用的地方添加一个style，属性，value即是上面定义的style.name的名称。

    1
    <lable text="style lable" space-before="10" style="red-lable"/>

  2. 元素的默认样式。

    由于考虑性能的问题(事实上，默认样式性能影响不大),gic默认是关闭默认样式的，因此你需要在启动的时候将默认样式启用。

    1
    2
    // 启用默认样式
    [GICXMLLayout enableDefualtStyle:YES];

    然后是定义样式。默认样式无需设置style.name。

    1
    2
    3
    <style>
        <lable font-size="25" font-color="red"/>
    </style>

    引用样式的地方也无需设置style属性，所有在定了该样式的元素下的同类子元素，都默认使用该样式。

    1
    <lable text="style lable" space-before="10"/>

引入样式

  1. 你可以在单独的一个xml文件中定义样式。比如添加一个叫做CommonStyle.xml的样式文件

    1
    2
    3
    <style>
        <lable font-size="25" font-color="red" style.name="red-lable"/>
    </style>

  2. 然后在需要使用该样式文件的地方引入。

    1
    <style path="CommonStyle.xml"/>

  3. 使用的方法跟上面的一样，比如：

    1
    <lable text="style lable" space-before="10" style="red-lable"/>

样式中添加模板

在样式文件中你也可以定义模板。里面定义的模板，在引入的时候会自动将样式中定义的模板添加到模板列表中。

  1. 基于上面CommonStyle.xml，添加模板

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        <lable font-size="25" font-color="red" style.name="red-lable"/>
        <templates>
            <template t-name="desc">
                <lable text="{{ }}" space-after="5" space-before="5" font-size="25" font-color="666666"/>
            </template>
            <template t-name="title">
                <lable text="{{ }}" space-after="10" font-size="25" font-color="blue"/>
            </template>
        </templates>
    </style>

  2. 引入样式表

    1
    <style path="CommonStyle.xml"/>

  3. 使用模板

    1
    <template-ref t-name="desc" data-context="我是样式模板1"/>

灵活的使用样式，可以实现为APP添加主题的功能，在切换主题的时候，只需要将改变引入的样式表就可以了。不过样式不支持绑定，因此这时候在切换主题的时候需要重新reload下xml文件。