Flex scroller皮肤的使用
Flex4 scroller 自定义皮肤
flex4里引入了sparkSkin, spark包里的可视控件可以通过指定skinClass的值来修改控件的默认皮肤。
下面是一个如何自定义某个scrollbar的外观的例子。
新建一个flex project, 名字假设为myScrollerbar, 编辑mxml内容:
<?xml version="1.0" encoding="utf-8"?> <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" width="300" height="400" ><fx:Declarations><!-- Place non-visual elements (e.g., services, value objects) here --></fx:Declarations> <s:Scroller percentWidth="100" percentHeight="100" id="scroller"><s:Group><s:Rect percentWidth="100" height="800"><s:fill><s:LinearGradient rotation='250'><s:GradientEntry color='0x000000' ratio='0'/><s:GradientEntry color='0xffffff' ratio='1'/></s:LinearGradient></s:fill></s:Rect></s:Group> </s:Scroller> </s:Application>
编译运行程序,截图如下:
假设我们现在想改变右边verticalScrollbar的样子, 并且已经准备好了所需要的图片:
up.png: 向上箭头的图片
down.png: 向下箭头的图片
thumb.png: 拖动条的图片
Scroller.verticalScrollbar 实际上是由4部分构成,
thumb: 拖动条 (对应的类为spark.components.Button)
track: 拖动条下面的那个轨道 (对应的类为spark.components.Button)
decrementButton: 向上箭头按钮(对应的类为spark.components.Button)
incrementButton: 向下箭头按钮(对应的类为spark.components.Button)
对整个verticalScrollbar我们需要一个mxml来定义其皮肤, 里面每个部分也分别需要一个mxml来定义皮肤,那么我们一共需要5个mxml文件
下面是这5个mxml皮肤文件的定义:
1. MyVScrollBarSkin.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:mx="library://ns.adobe.com/flex/mx" alpha.disabled="0.5" alpha.inactive="0.5"><s:states><s:State name="normal" /><s:State name="disabled" /><s:State name="inactive" /></s:states><fx:Metadata><![CDATA[ [HostComponent("spark.components.VScrollBar")] ]]></fx:Metadata> <s:Button id="track" top="30" bottom="30" focusEnabled="false" horizontalCenter="0" skinClass="skins.MyVScrollBarTrackSkin" /><s:Button id="thumb" focusEnabled="false" horizontalCenter="0" skinClass="skins.MyVScrollBarThumbSkin" /><s:Button id="decrementButton" top="0" focusEnabled="false" horizontalCenter="0" skinClass="skins.MyVScrollBarDecrementButtonSkin" /><s:Button id="incrementButton" bottom="0" focusEnabled="false" horizontalCenter="0" skinClass="skins.MyVScrollBarIncrementButtonSkin" /> </s:SparkSkin>
2.MyVScrollBarThumbSkin.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:pwg="com.perfectworld.gamelibs.pwgraphics.*"><fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata><s:states><s:State name="up" /><s:State name="over" /><s:State name="down" /><s:State name="disabled" /></s:states><mx:Image source="@Embed('thumb.png')" /></s:Skin>
3.MyVScrollBarTrackSkin.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:pwg="com.perfectworld.gamelibs.pwgraphics.*"><fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata><s:states><s:State name="up" /><s:State name="over" /><s:State name="down" /><s:State name="disabled" /></s:states><s:Rect top="0" bottom="0" width="29"><s:fill><s:SolidColor color="0x131313" alpha="0.3" /></s:fill></s:Rect></s:Skin>
4.MyVScrollBarDecrementButtonSkin.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:pwg="com.perfectworld.gamelibs.pwgraphics.*" ><fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata><s:states><s:State name="up" /><s:State name="over" /><s:State name="down" /><s:State name="disabled" /></s:states><mx:Image source="@Embed('up.png')"/> </s:Skin>
5. MyVScrollBarIncrementButtonSkin.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:pwg="com.perfectworld.gamelibs.pwgraphics.*" ><fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata><s:states><s:State name="up" /><s:State name="over" /><s:State name="down" /><s:State name="disabled" /></s:states><mx:Image source="@Embed('down.png')"/> </s:Skin>
皮肤文件定义好了,那么现在修改mySCrollbar.mxml为 scroller.verticalScrollbar指定skinClass:
<?xml version="1.0" encoding="utf-8"?> <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" width="300" height="400" creationComplete="init()"><fx:Declarations><!-- Place non-visual elements (e.g., services, value objects) here --></fx:Declarations><fx:Script><![CDATA[ import skins.MyVScrollBarSkin; private function init():void { scroller.verticalScrollBar.setStyle("skinClass", MyVScrollBarSkin); scroller.verticalScrollBar.setStyle( "fixedThumbSize", true); } ]]></fx:Script><s:Scroller percentWidth="100" percentHeight="100" id="scroller"><s:Group><s:Rect percentWidth="100" height="800"><s:fill><s:LinearGradient rotation='250'><s:GradientEntry color='0x000000' ratio='0'/><s:GradientEntry color='0xffffff' ratio='1'/></s:LinearGradient></s:fill></s:Rect></s:Group> </s:Scroller> </s:Application>
主要是加了这2行代码:
scroller.verticalScrollBar.setStyle("skinClass", MyVScrollBarSkin); scroller.verticalScrollBar.setStyle( "fixedThumbSize", true);
最后的样子如下:
转载于:https://www.cnblogs.com/jzm53550629/p/3245090.html
Flex scroller皮肤的使用相关推荐
- [转载] Flex 4 皮肤功能介绍
原文: http://www.adobe.com/devnet/flex/articles/flex4_skinning.html 转载:http://www.smithfox.com/?e=34 F ...
- Flex移动皮肤开发(三)
范例文件 mobile-skinning-part3 在关于创建Flex移动皮肤系列文章的第二部分里,我们讨论了屏幕密度(DPI)对组件皮肤以及移动应用布局所带来的影响. 我还展示了如何使用缩放应用, ...
- flex Scroller
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- Flex移动皮肤开发(一)
范例文件 mobile-skinning-part1.zip Flex 4.5提供的移动增强的皮肤特性,支持触摸交互.性能优良,并且考虑到了内存占用问题.尽管目前市场上有不少性能优异的设备,但典型的S ...
- Flex移动皮肤-第一部分:增强的皮肤功能基础
Flex 4.5提供的移动增强的皮肤特性,支持触摸交互.性能优良,并且考虑到了内存占用问题.尽管目前市场上有不少性能优异的设备,但典型的Spark皮肤(包括Flex 4引入的默认皮肤)却没有能够在移动 ...
- 很酷的一套 Flex/AIR 皮肤 (KingnareStyle)
原文地址: http://http//www.kingnare.com/auzn/article.asp?id=139 元件都在swf文件中,不过有几个如ComboBox有下拉箭头的组件可能会因为高度 ...
- Flex 4 皮肤设计资料
FXG的基本形状有三种,矩形(圆角矩形).椭圆(圆形).直线. Rect矩形(圆角矩形),以下是基本的一些属性: width <length>: 矩形的宽度. height <len ...
- 动态加载flex皮肤.
动态加载swf文件作为flex 的皮肤 There are lots of great resources out there on how to skin your Flex application ...
- [转]Flex 中的皮肤
Flex中的皮肤(一) 这里是第一篇,将讲述一下Flex中如何应用UI的皮肤,其实应用UI皮肤不难,你们在使用Flex的过程中是否觉得Flex中自带的皮肤样式不太好看? 或者是想自已做个比较有特色的? ...
最新文章
- 分布式任务队列 Celery — 应用基础
- 一篇不一样的docker原理解析 提高篇
- 机器学习实战-第12章Fpgrowth代码勘误+递归打印效果分析
- 【IntelliJ IDEA】添加一个新的tomcat,tomcat启动无法访问欢迎页面,空白页,404
- datatable使用groupby进行分组统计 .
- Scala类型系统的目的——Martin Odersky访谈(三)
- 什么浏览器好用_为什么国外的UC浏览器这么好用
- 实习成长之路: 重新认识IOC,你可能对IoC有些误会?
- 基于CXF的WebService的安全验证问题
- 性能测试之LoadRunner11安装步骤
- 政府信息化与电子政务
- java adt包_adt下载(Android开发工具)adt离线安装包大集合下载 - 3322软件站
- 六自由度机械臂的正运动学解with RTB
- 服务器要用sas硬盘,服务器硬盘如果不采用SAS硬盘会有什么影响
- 【Luogu】P8195 小智的疑惑
- usb驱动开发21——驱动生命线
- PostgreSQL12.3——pgAdmin4表格的创建
- Python lambda表达式用法
- 电脑系统常见进程-进程管理
- 三维旋转(根据转轴和角度)的公式。罗德里格旋转公式