首页 > Flash开发技术分享 > Flex > Flex4 Skin 组件皮肤_Skinning Spark containers_学习笔记
2015
11-11

Flex4 Skin 组件皮肤_Skinning Spark containers_学习笔记

1.概述
spark定义了两种类型的容器
Skinnable 容器
Non-Skinnable容器
两种类型容器都属于spark.components.*包。绝大多数容器都是skinnable的。
具体参见《简化的Flex4结构图》。

设置container skins大小
有两种方法设置容器的大小
约束值(top=0, bottom=0, left=0, right=0)
百分比大小(height=100%, width=100%)
通常,skin会在host component调整大小之后重新调整大小。skin会默认设置left和right属性。为了指定默认大小,也可以设置width属性。

spark的group是不带皮肤的容器,他们提供了轻量级的布局例子。为了修改spart group可视效果,你可以使用带皮肤的SkinnableContainer。所有的MX容器都是带皮肤的。

容器的皮肤与其它组件皮肤一样,它们定义了一个Group用于放置子组件。这个元素的ID是contentGroup,所有的皮肤容器都有一个content group。所有的子容器放置在这个content group中,并使用布局规则显示。

2.调整spark容器皮肤的大小
定义spark容器的皮肤的主要通过添加一个图形元素来完成,比如用一个矩形定义容器的背景色。你可以通过使用限定的属性或百分比值来设置其大小。设置方法如下

  • 限制属性(top=0, bottom=0, left=0, right=0)
  • 百分比值(height=100%, width=100%)

当组件第一次渲染,限定属性优先起作用。但是,如果你设置了限定属性的值,接着在运行时设置了百分比值,比如percentHeight=100,FLEX执行新的设置。
通常,host component改变大小时,skin重新调整大小。到底是采用百分比,还是限定属性信赖于重新调整的场景。比如,如果你想一个label总是在skin中的宽度为其一半,可以设置width=50%。如果你想设置一个label总是间隔5像素,可以设置left和right属性为5。
在默认的spark皮肤中,可调整大小的skin元素总是设置left和right属性。为了描述其默认大小,它们也设置width属性,这样的话,如果组件的大小没有在application中设置,元素的width将采用skin中的默认大小。
下面的ButtonSkin.mxml,显示了Button控件的默认大小为skin中的默认大小。width=69,height=20:

<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2"> 
    <s:stroke> 
        <s:LinearGradientStroke rotation="90" weight="1"> 
            <s:GradientEntry color="0x000000" alpha="0.5625" alpha.down="0.6375" /> 
            <s:GradientEntry color="0x000000" alpha="0.75" alpha.down="0.85" /> 
        </s:LinearGradientStroke> 
    </s:stroke> 
</s:Rect>

3.给spark container添加边框
自定义 Spark skin的通常用法是给container加边框,可以定义阴影、边的样式、角的弧度和其它属性。
为了给container添加一个矩形边框skin,需要添加一个Rect对象,并设置height和widht为100%,或者设置限制属性都为0。

下面是一个为container添加一个1point黑线边框的例子

<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/SimpleContainerBorderExample.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">

    <s:SkinnableContainer id="myContainer" height="200" width="200" skinClass="mySkins.ContainerBorderSkin">
        <s:Button label="Click Me"/>
        <s:Button label="Click you"/>
        <s:Button label="Click us"/>
    </s:SkinnableContainer>

</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/SimpleContainerBorderExample.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">

    <s:SkinnableContainer id="myContainer" height="200" width="200" skinClass="mySkins.ContainerBorderSkin">
        <s:Button label="Click Me"/>
        <s:Button label="Click you"/>
        <s:Button label="Click us"/>
    </s:SkinnableContainer>

</s:Application>

其皮肤代码如下

<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/mySkins/ContainerBorderSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">

    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
   
    <s:Group id="contentGroup" left="4" right="4" top="4" bottom="4">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
    </s:Group>
   
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="0x000000" weight="1"/>
        </s:stroke>
    </s:Rect>

</s:Skin>

contentGroup的left, right, top和bottom 的值为1。这样可以显示container容器中组件的外边框。s:Rect left=”0″ right=”0″ top=”0″ bottom=”0″表示用于设置container边框。

效果如下
Flex4 Skin 组件皮肤_Skinning Spark containers_学习笔记 - 第1张  | 长流技术

为了创建圆角边,可以设置Rect对象的radiusX和radiusY。下面给出了一个例子

 

<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/RoundedContainerBorderExample.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">

    <s:SkinnableContainer id="myContainer" height="200" width="200" skinClass="mySkins.ContainerRoundedBorderSkin">
        <s:Button label="Click Me"/>
    </s:SkinnableContainer>

</s:Application>

皮肤例子如下

 

<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/mySkins/ContainerRoundedBorderSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">

    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <s:Group id="contentGroup" left="10" right="10" top="10" bottom="10">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
    </s:Group>

    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10">
        <s:stroke>
            <s:SolidColorStroke color="0x000000" weight="1"/>
        </s:stroke>
    </s:Rect>

</s:Skin>

 

效果如下
Flex4 Skin 组件皮肤_Skinning Spark containers_学习笔记 - 第2张  | 长流技术

你可以使用BorderContainer添加一个边框。BorderContainer是SkinnableContainer的一个子类。可以使用CSS样式和类的属性控制BorderContainer类的外观,而不用创建一个自定义皮肤。

下面给了一个BorderContainer ,使用了cornerRadius, borderColor, borderVisible, 和borderAlpha样式。

 

<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/BorderContainerExample.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <s:BorderContainer width="200" height="200" borderColor="0x000000" borderAlpha="1" cornerRadius="10" borderWeight="1">
        <s:layout>
            <s:HorizontalLayout paddingLeft="15" paddingRight="15" paddingTop="15" paddingBottom="15"/>
        </s:layout>

        <s:Button label="Click Me"/>
    </s:BorderContainer>
</s:Application>

通过CSS也可以定义所有BorderContainer 对象的样式,例子如下

<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/BorderContainerStyleExample.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        
        s|BorderContainer {
            borderColor:#000000; 
            borderAlpha:1; 
            cornerRadius:10; 
            borderWeight:1;
        } 
    </fx:Style> 

    <s:BorderContainer width="200" height="200">
        <s:layout>
            <s:HorizontalLayout paddingLeft="15" paddingRight="15" paddingTop="15" paddingBottom="15"/>
        </s:layout>
        <s:Button label="Click Me"/>
    </s:BorderContainer>
    
</s:Application>

我们也可以使用组合的方式代替皮肤,但皮肤可以将显示组件与内容组件更好的分离。

<?xml version="1.0"?> 
<!-- SparkSkinning/SimpleBorderExampleNoSkin.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <s:Group>
        <!-- border/background graphics -->
        <s:Rect width="100%" height="100%">
               <s:stroke>
                   <s:SolidColorStroke color="0x000000" weight="2"/>
               </s:stroke>
        </s:Rect>

        <!-- content of container -->
        <s:VGroup left="10" top="10" right="10" bottom="10">
            <s:Button label="Click Me"/>
            <s:Button label="Click Me"/>
        </s:VGroup>
    </s:Group>
 
</s:Application>

向容器中添加滚动条

<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/mySkins/ScrollBarContainerSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">

    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 
    
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>

    <s:Scroller height="100%" width="100%"> 
        <s:Group id="contentGroup">
            <s:layout>
                <s:BasicLayout/>
            </s:layout>
        </s:Group>
    </s:Scroller>
</s:Skin>

应用程序代码

 <s:SkinnableContainer id="myContainer" height="50%" width="50%" skinClass="mySkins.ScrollBarContainerSkin"> 
            <s:Image source="@Embed(source='../assets/myImage.jpg')"/> 
    </s:SkinnableContainer>

为容器添加一个背景颜色

<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning/mySkins/LinearBackgroundFillSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">

    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <!-- layer 1: border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <mx:SolidColorStroke color="0" alpha="0.50" weight="1"/>
        </s:stroke>
    </s:Rect>

    <!-- 填充背景颜色 -->
    <s:Rect id="background" left="1" top="1" right="1" bottom="1">
        <s:fill>
            <s:LinearGradient>
                <s:entries>
                    <s:GradientEntry color="0xFFAABB" ratio="0" alpha="1"/>
                    <s:GradientEntry color="0xFFCCDD" ratio=".33" alpha="1"/>
                    <s:GradientEntry color="0xFFFFFF" ratio=".66" alpha="1"/>
                </s:entries>
            </s:LinearGradient> 
        </s:fill>
    </s:Rect>
    
    <s:Group id="contentGroup" left="10" right="10" top="10" bottom="10">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
    </s:Group>
</s:Skin>

 

效果图
Flex4 Skin 组件皮肤_Skinning Spark containers_学习笔记 - 第3张  | 长流技术

为容器添加背景图片
部分代码如下

 

<!-- background fill -->
    <s:Rect id="background" left="3" top="3" right="3" bottom="3" alpha=".25">
        <s:fill>
            <s:BitmapFill source="@Embed(source='../../assets/myImage.jpg')"/>
        </s:fill>
    </s:Rect>

 

参考文献
1.Skinning Spark containers.

http://help.adobe.com/en_US/flex/using/WS422719A4-7849-4921-AF39-57FF567B483B.html
http://help.adobe.com/en_US/flex/using/WSA95C9644-B650-4783-B5C0-D2C7F95A23E3.html
http://help.adobe.com/en_US/flex/using/WS422719A4-7849-4921-AF39-57FF567B483B.html

最后编辑:
作者:细水长流
关注互联网+ 关注o2o 关注创业创新领域

留下一个回复