【转adobe官网】 设置Button的图标

向外观添加组件

• 下载完整的样本应用程序 (ZIP, 223 KB)

代码

TestDrive.mxml

<?xml version="1.0" encoding="utf-8"?>
  <s:Application ... >
      (...)
      <s:Button label="Chart data" skinClass="ChartButtonSkin" .../> 
      (...)
  </s:Application>

ChartButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
 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
">
    <fx:Metadata>

        <![CDATA[ 
        [HostComponent
("spark.components.Button
")]
        ]]>
    </fx:Metadata>

    
    <fx:Script
 fb:purpose="styling
">
        <![CDATA[         
            static private const
 exclusions:Array = ["labelDisplay
"];   
            override public
 function
 get
 colorizeExclusions():Array {return
 exclusions;}
            override protected
 function
 initializationComplete():void
 { (...) }  
            override protected
 function
 updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

            { (...) }
            private
 var
 cornerRadius:Number = 2;
        ]]>
    </fx:Script>

    <s:states>

        <s:State
 name="up
" />
        <s:State
 name="over
" />
        <s:State
 name="down
" />
        <s:State
 name="disabled
" />
    </s:states>

    <!-- layer 1: shadow -->

    <s:Rect
 id="shadow
" left="-1
" right="-1
" top="-1
" bottom="-1
" radiusX="2
">
        <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 -->

    <s:Rect
 id="fill
" ... />

    <!-- layer 3: fill lowlight -->

    <s:Rect
 id="lowlight
".../>

    <!-- layer 4: fill highlight -->

    <s:Rect
 id="highlight
" .../>

    <!-- layer 5: highlight stroke (all states except down) -->

	 <s:Rect
 id="highlightStroke
" .../>

	 <!-- layer 6: highlight stroke (down state only) -->

	 <s:Rect
 id="hldownstroke1
" .../>

    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->

    <s:Rect 
id="border
" .../>


    <!-- layer 8: text -->

        <s:Group
 horizontalCenter="0
" verticalCenter="1
"
					left="10
" right="10
" top="2
" bottom="2
" >
			<s:layout>
				<s:HorizontalLayout
 verticalAlign="middle
"/>
			</s:layout>
			<s:Label
 id="labelDisplay
" textAlign="center
" maxDisplayedLines="1
"/>
			<s:BitmapImage
 source="@Embed('pieIcon.gif')
"/>
		</s:Group>
	</s:SparkSkin>

返回页首

教程

在本教程中，您将创建一个带有文本和图标的 Button。要做到这一点，您将根据默认的 Button 外观新建一个 Button 外观，然后修改它的布局并向它添加一个新的 BitmapImage 组件。

第 1 步：新建一个 Button 外观文件。

在 Design 模式中，选择 Departments 状态中的“Chart data”按钮，在 Properties 视图中，单击 Skin 字段旁的按钮并选择“Create Skin”（请参阅图 12）。在“New MXML Skin”对话框中，将它命名为 ChartButtonSkin 并将默认设置保持选中状态（请参阅图 13）。

图 12. 为 Chart Data Button 新建一个外观

图 13. 新建一个 ChartButtonSkin 作为默认 ButtonSkin 的副本。

在 TestDrive.mxml 中，切换到 Source 模式并查看 Chart Data Button。它的 skinClass 样式此时设置为新外观 ChartButtonSkin 的名称－此时与默认外观相同。（也可以通过样式表设置此样式。）

<s:Button includeIn="Departments" x="609" y="293" label="Chart data" skinClass="ChartButtonSkin"/>

第 2 步：查看外观类。

在 ChartButtonSkin.mxml 中，切换到 Source 模式并查看代码。

主机组件指定了此外观可应用于哪些组件：

[HostComponent("spark.components.Button")]

之后是几个函数，它们根据设置的任何样式值调整图形，然后指定状态。这些与主机组件 Button 的内容吻合。

之后可以看到图形标签，包括多个 Rect 和 LinearGradient 标签，它们绘制矩形和渐变－应用程序中所有 Button 的图形。

图 14. 查看图形代码。

最后可以看到一个 Label 控件。当您设置 Button 的 label 属性时，会设置这个组件的 text 属性。它称为外观部件。不同的属性指定了 Label 在 Button 上的显示位置。

<s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>

第 3 步：将 Label 放入使用水平布局的 Group 容器中。

将 Group 组件的 layout 属性设置为 HorizontalLayout 类的一个实例。在 Group 中移动 Label，酌情将布局属性从 Label 控件传递给 Group 或 HorizontalLayout。

您将创建一个带 HorizontalLayout 的 Group，因为您希望 Button 上的 Label 和图标（水平）相邻。

您的代码应当如下：

<s:Group horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2" >
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle"/>
    </s:layout>
    <s:Label id="labelDisplay" textAlign="center" maxDisplayedLines="1"/>
</s:Group>

为 TestDrive.mxml 运行应用程序或切换到 Design 模式。“Chart Data”按钮的外观应当与之前完全相同；您尚未更改它。

第 4 步：添加 BitmapImage 组件。

在 Group 中，添加一个 BitmapImage 组件并将它的 source 属性设置为项目文件夹中的一个嵌入图像 (pieIcon.gif)。

您也可以使用自己的图像或 Test Drive 文件随附的图像。要使用自己的图像，只需将它复制到项目 src 文件夹中，然后引用它即可。要使用 Test Drive 图标，请复制本单元样本文件 (ZIP, 223 KB) 中的 pieIcon.gif 文件，将它粘贴到项目 src 文件夹中。

您的代码应当如下：

<s:Group horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2" >
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle"/>
    </s:layout>
    <s:Label id="labelDisplay" textAlign="center" maxDisplayedLines="1"/>
    <s:BitmapImage source="@Embed('pieIcon.gif')"/>

</s:Group>

保存此文件。为 TestDrive.mxml 切换到 Design 模式。您的 Button 上应当可以看到该图标（请参阅图 15）。移动 Button，确保它们没有重叠在一起。

图 15. 查看 Chart Data Button 上的新图标。