在Flex4 Spark Application中设置图片背景解决方案汇总
2013-06-27 10:50
501 查看
问题:如何在 Flex4 Spark Application 中添加图片背景? 方案1:自定义含有BitmapGraphic的皮肤类,然后在MXML,CSS,AS中设置skinClass的皮肤样式 <?xml version="1.0" encoding="utf-8"?> <s:Application name="Spark_Application_skinClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" skinClass="skins.CustomApplicationSkin"> <s:layout> <s:BasicLayout /> </s:layout> </s:Application> 自定义皮肤类, skins/CustomApplicationSkin.mxml代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Skin name="CustomApplicationSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" > <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Application")] ]]> </fx:Metadata> <!-- fill --> <s:BitmapImage id="img" source="@Embed('image1.jpg')" smooth="true" left="0" right="0" top="0" bottom="0" /> <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" /> </s:Skin> 你也可以通过外部.css样式表文件或者使用<Style/>标签来设置使用skinClass样式 <?xml version="1.0" encoding="utf-8"?> <s:Application name="Spark_Application_skinClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:layout> <s:BasicLayout /> </s:layout> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; s|Application { skinClass: ClassReference("skins.CustomApplicationSkin"); } </fx:Style> </s:Application> 或者你可以使用ActionScript来设置skinClass样式,代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application name="Spark_Application_skinClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"creationComplete=”init();”> <fx:Script> <![CDATA[ import skins.CustomApplicationSkin; protected function init():void { setStyle("skinClass", CustomApplicationSkin); } ]]> </fx:Script> </s:Application> 方案2:在运行时embedded图片到BitmapFill对象中,修改Application皮肤的backgroundRect皮肤部分的填充属性。代码如下: <?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:ho="library://ns.adobe.com/flex/halo" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"creationComplete="init();"> <fx:Script> <![CDATA[ import mx.graphics.BitmapFill; import mx.graphics.BitmapFillMode; import spark.skins.spark.ApplicationSkin; [Embed("style/background.jpg")] protected const BgImg:Class; protected function init():void { var bmpFill : BitmapFill = new BitmapFill(); bmpFill.source = BgImg; bmpFill.fillMode = BitmapFillMode.SCALE; ApplicationSkin(skin).backgroundRect.fill=bmpFill; } ]]> </fx:Script> </s:Application> 方案3:扩展默认的Spark包 中Application 皮肤,并通过embedded图片来覆盖backgroundRect皮肤部分的填充属性,代码如下: <?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:ho="library://ns.adobe.com/flex/halo" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" skinClass="skins.CustomBitmapApplicationSkin"> </s:Application> 扩展的自定义的应用程序皮肤类,skins/CustomBitmapApplicationSkin.as如下: package skins { import mx.graphics.BitmapFill; import mx.graphics.BitmapFillMode; import spark.skins.spark.ApplicationSkin; public class CustomBitmapApplicationSkin extends ApplicationSkin { [Embed("style/background.jpg")] protected const BgImg:Class; public function CustomBitmapApplicationSkin() { super(); var bmpFill:BitmapFill = new BitmapFill(); bmpFill.source=BgImg; bmpFill.fillMode = BitmapFillMode.SCALE; backgroundRect.fill = bmpFill; } } } 方案4:自定义皮肤类(有别于方案一,不需要BitmapGraphic)实现代码如下: <?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:ho="library://ns.adobe.com/flex/halo" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" skinClass="skins.CustomBitmapApplicationSkin2"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; s|Application { backgroundImage: Embed("style/background.jpg"); } </fx:Style> </s:Application> 自定义的应用程序皮肤类,skins/CustomBitmapApplicationSkin2.as如下: <?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:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5"> <s:states> <s:State name="normal" /> <s:State name="disabled" stateGroups="disabledStates" /> <s:State name="normalWithControlBar" stateGroups="controlBarStates" /> <s:State name="disabledWithControlBar" stateGroups="disabledStates,controlBarStates" /> </s:states> <fx:Metadata> [HostComponent("spark.components.Application")] </fx:Metadata> <fx:Script fb:purpose="styling"> <![CDATA[ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { backgroundRect.setStyle("backgroundAlpha", getStyle("backgroundAlpha")); backgroundRect.setStyle("backgroundColor", getStyle("backgroundColor")); if (getStyle("backgroundImage")) { backgroundRect.setStyle("backgroundImage", getStyle("backgroundImage")); backgroundRect.setStyle("backgroundImageFillMode", "repeat"); } super.updateDisplayList(unscaledWidth, unscaledHeight); } ]]> </fx:Script> <!-- fill --> <!--- A rectangle with a solid color fill that forms the background of the application. The color of the fill is set to the Application's backgroundColor property. --> <s:BorderContainer id="backgroundRect" backgroundColor="#FFFFFF" borderVisible="false" left="0" right="0" top="0" bottom="0" /> <s:Group left="0" right="0" top="0" bottom="0"> <s:layout> <s:VerticalLayout gap="0" horizontalAlign="justify" /> </s:layout> <!--- Application Control Bar --> <s:Group id="topGroup" minWidth="0" minHeight="0" includeIn="controlBarStates" > <!-- layer 0: control bar highlight --> <s:Rect left="0" right="0" top="0" bottom="1" > <s:stroke> <s:LinearGradientStroke rotation="90" weight="1"> <s:GradientEntry color="0xFFFFFF" /> <s:GradientEntry color="0xD8D8D8" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <!-- layer 1: control bar fill --> <s:Rect left="1" right="1" top="1" bottom="2" > <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0xEDEDED" /> <s:GradientEntry color="0xCDCDCD" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 2: control bar divider line --> <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55"> <s:fill> <s:SolidColor color="0x000000" /> </s:fill> </s:Rect> <!-- layer 3: control bar --> <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0"> <s:layout> <s:H 4000 orizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" /> </s:layout> </s:Group> </s:Group> <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" /> </s:Group> </s:Skin>
相关文章推荐
- [转]在Flex4 Spark Application中设置图片背景解决方案汇总
- 在Flex4 Spark Application中设置图片背景解决方案汇总
- 在Flex4 Spark Application中设置图片背景解决方案汇总
- [转]在Flex4 Spark Application中设置图片背景解决方案汇总
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案一
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案二
- 随笔-IOS 在IOS6中设置navigationBar背景图片 会有一条 黑色阴影 --- 解决方案
- iOS 为 self.view 设置背景图片被切割的解决方案
- IOS 在IOS6中设置navigationBar背景图片 会有一条 黑色阴影 --- 解决方案
- IOS 在IOS6中设置navigationBar背景图片 会有一条 黑色阴影 --- 解决方案
- 关于js设置标签样式来显示图片背景无效的解决方案
- IOS 在IOS6中设置navigationBar背景图片 会有一条 黑色阴影 --- 解决方案
- Flex4的Application中设置背景图像
- 设置tabBar的背景图片,选中文字颜色
- java中button背景图片大小设置,JFrame.getContentPane().add(pane)与JFrame.add(pane)区别
- iphone iPhone开发中为UINavigationBar设置背景图片方法
- 设置透明背景图片
- ImageView设置背景图片后置灰探究
- Swing控件(JPanel,Container等)设置背景图片
- QT中关于QWidget的背景颜色和背景图片的设置