浅析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>