`
wptc
  • 浏览: 22574 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

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

阅读更多

向外观添加组件


代码

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)。

为 Chart Data Button 新建一个外观

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

新建一个 ChartButtonSkin 作为默认 ButtonSkin 的副本

图 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 的内容吻合。

之后可以看到图形标签,包括多个 RectLinearGradient 标签,它们绘制矩形和渐变-应用程序中所有 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,确保它们没有重叠在一起。

查看 Chart Data Button 上的新图标。

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

分享到:
评论

相关推荐

    如何制作图标button

    - **BackGroundImageLayout**:设置BackGroundImageLayout属性为Zoom,这样可以使图标在Button中以居中缩放的形式展示,确保图标完整且清晰。 - **去除边框**:如果希望Button没有边框,可以在FlatAppearance属性...

    C# 精美图标大全

    - 对于控件如按钮或菜单项,可以通过`Button.Image`或`ToolStripMenuItem.Image`属性设置图标。 3. 图标的设计原则: - 清晰易识:图标应简洁明了,一眼就能辨认出其含义。 - 一致性:应用中的所有图标应保持...

    修改工具栏图标及大小

    例如,在JavaFX中,可以使用`Image`类加载图片,再用`Button`的`setGraphic()`方法设置图标。 三、调整图标大小 图标大小的调整需要考虑兼容性和可读性。通常,图标大小应与工具栏的整体风格和尺寸协调。以下是一些...

    VC在按钮上显示图标

    4. **设置按钮图标**:在`OnInitDialog`函数中,调用`m_button.SetIcon`函数,传入图标资源的句柄。这个句柄可以通过`LoadIcon`函数获得,代码如下: ```cpp HICON hIcon = AfxGetApp()-&gt;LoadIcon(IDI_ICON1); // ...

    .NET 开发常用图标

    2. **显示图标**:在WinForms应用中,你可以将图标设置为Form的Icon属性,或者将其显示在控件如Button、MenuStrip、ToolBar等上。在WPF中,可以使用Image控件结合BitmapSource来显示图标。 3. **图标资源管理**:...

    qt-Txt编辑器图标

    在实际开发中,开发者可能使用像Adobe Illustrator或Inkscape这样的矢量图形软件来创建SVG图标,确保图标可以在不同尺寸下不失真。此外,为了支持不同操作系统和设备,开发者还需要提供不同格式和尺寸的图标。 为了...

    图标.rar Winform 窗体程序用到的图标

    或者为Button等控件设置图标: ```csharp button1.Image = Properties.Resources.myButtonIcon; ``` 总的来说,"图标.rar"提供了一套全面的Winform应用图标资源,对于那些需要提升其应用程序视觉效果的开发者来说...

    工具菜单栏图标集

    2. **Winform开发中的图标使用**:在Winform开发中,图标可以通过设置控件的属性来应用,如MenuStrip、ToolBar或Button的Image属性。这些图标可以作为按钮的背景,或者在菜单项旁显示,以便用户一目了然地识别功能。...

    extjs icon小图标

    例如,`&lt;button class="icon-save"&gt;保存&lt;/button&gt;`,其中`icon-save`是一个预定义的CSS类,它设置按钮的背景图像为“保存”图标。 2. SVG图标:现代浏览器支持SVG格式的图标,这提供了更好的清晰度和缩放效果。图标...

    程序开发应用图标icon程序开发应用图标icon

    6. **图标的设计工具**:常用的图标设计工具包括Adobe Illustrator、Sketch、Figma以及专门的图标设计软件如IconJar、Glyphish等。这些工具提供丰富的图形资源和编辑功能,帮助开发者创建出高质量的应用图标。 7. *...

    .net 图标 绝对经典 (评论还分)

    - 控件如Button、MenuStrip、ToolStrip等,可以设置`Button.Image`、`ToolStripMenuItem.Icon`等属性来展示图标。 - 在WinForms中,`Control.BackgroundImage`和`Control.BackgroundImageLayout`可以用来设置背景...

    c#小图标让你的设计更加美观

    对于其他控件如Button,可以在`Image`或`BackgroundImage`属性中设置图标。 - **WPF**:在XAML代码中,可以使用`Icon`属性为Window设置图标,例如 `&lt;Window Icon="path_to_icon.ico"&gt;`。对于其他控件,如Button,...

    c# 工具图标

    - 然后,通过`Properties`窗口设置控件的`Icon`属性,或者在代码中使用如`button1.Icon = Properties.Resources.myIcon;`这样的语句。 4. **图标库(Library)**:在开发过程中,使用预定义的图标库可以提高效率,...

    VB能用的编程ICO图标集合

    5. **自定义图标设计**:如果提供的图标集合中没有满意的图标,开发者还可以使用图形编辑工具(如Adobe Photoshop、GIMP等)设计自己的ICO图标,然后将其转换为VB6可用的格式。 总之,这个"VB能用的编程ICO图标集合...

    Java编程小图标

    这里的"标志.abr"文件可能是一个Adobe Brush文件,通常用于存储画笔预设。在Java编程中,我们不会直接使用这种格式的文件,但设计师可能会用它来创建图标的源图像。如果你需要将abr中的图案转化为图标,通常需要借助...

    iconbutton_src.rar_图标按钮

    "IconButton",正如标题"iconbutton_src.rar_图标按钮"所示,是一种在软件或网站中常见且重要的设计元素,它将功能和美学相结合,使得用户可以通过点击带有特定图标的按钮来执行操作。在本案例中,我们有一个名为...

    icons-ltalk-max-button

    - 这些图标可能使用了Adobe Illustrator、Sketch、Figma等专业图形设计软件创建。 7. **编程集成**: - 在实际的应用程序中,这些图标会被编程语言如JavaScript、Swift、Java等集成,并与事件处理函数绑定,实现...

    收集vb 能有的图标

    然后,在需要使用图标的控件属性(如Form的Icon属性或Button的Image属性)中设置这些资源。 6. **优化图标大小**:描述中提到,这些图标体积小,这意味着它们可能已经过优化,降低了文件大小,不会过多占用项目的...

    带图标的工具栏代码.rar

    - **JavaFX**:JavaFX提供了`ToolBar`类,可以通过添加`Button`对象(带有`graphic`属性来设置图标)来构建工具栏。 - **Qt**:在Qt中,可以使用`QToolBar`和`QAction`,`QAction`可以关联图标,并添加到`QToolBar...

Global site tag (gtag.js) - Google Analytics