浅析flex UI层实现

二

上一章我对我们项目的登录界面做了一次浅析，接下来，我就把上次所讲的分解一下，首先，要讲到的就是按钮皮肤的制作。
众所周知，设计一套比较好的皮肤，可以增加项目的可观赏性，但是设计皮肤从何入手呢？
作为一个新手，我在学习设计皮肤的时候，是新建一个皮肤文件，然后在此基础之上改善，熟练的同志可以直接设计皮肤，这里我拿Button的皮肤做示例：
? ? <s:states>
? ? ? ? <s:State name="up" />
? ? ? ? <s:State name="over" />
? ? ? ? <s:State name="down" />
? ? ? ? <s:State name="disabled" />
</s:states>
这些是生成按钮的四个状态，根据它可以设置按钮的不同显示状态；

 <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2"
			x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
			x.down="0" y.down="0" width.down="61" height.down="25"
			x.over="0" y.over="0" width.over="61" height.over="25"
			x.up="0" y.up="0" width.up="61" height.up="25">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF"
                                 alpha="0.01"
                                 alpha.down="0" />
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF" 
                                 alpha="0.07"
                                 alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

这个地方是按钮的阴影设置，这个地方可以根据自己对色调的把握来设置；

?<!-- layer 2: fill -->
? ? <!--- @private -->
? ? <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
? ? ? ? <s:fill>
? ? ? ? ? ? <s:LinearGradient rotation="90">
? ? ? ? ? ? ? ? <s:GradientEntry color="0xFFFFFF"?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?color.over="0xBBBDBD"?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?color.down="0xAAAAAA"?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alpha="0.85" />
? ? ? ? ? ? ? ? <s:GradientEntry color="0xD8D8D8"?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?color.over="0x9FA0A1"?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?color.down="0x929496"?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alpha="0.85" />
? ? ? ? ? ? </s:LinearGradient>
? ? ? ? </s:fill>
? ? </s:Rect>

这个地方是填充设置，当然，这里除了可以设置背景颜色之外，还可以根据对应状态来设置按钮的样子，下面是我自己定义的按钮的填充：
?<!-- layer 2: fill -->
? ? <!--- @private -->
? ? <s:Rect id="fill" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
? ? ? ? <s:fill>
? ? ? ? ? ? <s:BitmapFill source.up="@Embed('assets/main/apply-normal.png')"
?source.over="@Embed('assets/main/apply-over.png')"
?source.down="@Embed('assets/main/apply-click.png')"
?source.disabled="@Embed('assets/main/apply-disabled.png')"/>
? ? ? ? </s:fill>
? ? </s:Rect>
第三步就是设置它的低亮度了，下面是系统自动生成的：
?<!-- layer 3: fill lowlight -->
? ? <!--- @private -->
? ? <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2"
x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
x.down="0" y.down="0" width.down="61" height.down="25"
x.over="0" y.over="0" width.over="61" height.over="25"
x.up="0" y.up="0" width.up="61" height.up="25">
? ? ? ? <s:fill>
? ? ? ? ? ? <s:LinearGradient rotation="270">
? ? ? ? ? ? ? ? <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
? ? ? ? ? ? ? ? <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
? ? ? ? ? ? ? ? <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
? ? ? ? ? ? </s:LinearGradient>
? ? ? ? </s:fill>
? ? </s:Rect>
对于这块，如果把握的不够好的话可以切换到设计界面来调节，第四步是设置高亮度，和第三步类似。
其实在设计皮肤的时候，没有完全必要按照这个步骤，只要你美工足够专业，在设计背景图片的时候就可以把这些效果直接做进图片里面，我们只需要进行第二步的fill操作就够了，其余的地方就是第八步的label如果你不确定要放什么，可以直接删掉，通过前端调的时候再给它赋值，皮肤的引用办法如下：
<s:Button skinClass="你皮肤所在的包" label="自己发挥"/>
其余的皮肤设计和这个类似，建议利用系统可以生成的优点，首先读懂该段代码是做什么用的，然后根据自己的需要有选择的去修改，一个好的皮肤需要的是你自己对色调的把握，把握的好，皮肤做的就比较好看，当然这也不是一时间可以做到的，需要的是自己勤加练习。

附：自己设计Button的皮肤

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5" width.up="61" height.up="25"
			 width.over="61" height.over="25" width.down="61" height.down="25"
			 width.disabled="61" height.disabled="25">
     
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2"
			x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
			x.down="0" y.down="0" width.down="61" height.down="25"
			x.over="0" y.over="0" width.over="61" height.over="25"
			x.up="0" y.up="0" width.up="61" height.up="25">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF"
                                 alpha="0.01"
                                 alpha.down="0" />
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF" 
                                 alpha="0.07"
                                 alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" radiusX="2"
			x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
			x.down="0" y.down="0" width.down="61" height.down="25"
			x.over="0" y.over="0" width.over="61" height.over="25"
			x.up="0" y.up="0" width.up="61" height.up="25">
        <s:fill>
            <s:BitmapFill source.up="@Embed('assets/main/apply-normal.png')"
						  source.over="@Embed('assets/main/apply-over.png')"
						  source.down="@Embed('assets/main/apply-click.png')"
						  source.disabled="@Embed('assets/main/apply-disabled.png')"/>
        </s:fill>
    </s:Rect>

    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2"
			x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
			x.down="0" y.down="0" width.down="61" height.down="25"
			x.over="0" y.over="0" width.over="61" height.over="25"
			x.up="0" y.up="0" width.up="61" height.up="25">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 4: fill highlight -->
    <!--- @private -->
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2"
			x.disabled="0" y.disabled="0" width.disabled="61" height.disabled="25"
			x.down="0" y.down="0" width.down="61" height.down="25"
			x.over="0" y.over="0" width.over="61" height.over="25"
			x.up="0" y.up="0" width.up="61" height.up="25">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.0"
                                 alpha="0.33" 
                                 alpha.over="0.22" 
                                 alpha.down="0.12"/>
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48"
                                 alpha="0.33"
                                 alpha.over="0.22"
                                 alpha.down="0.12" />
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48001"
                                 alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
</s:SparkButtonSkin>