flex ProgressBar skin修正
5758 ワード
f 3の形式でborderを修正する:
このうちbarSkinは外枠スタイルであり、MyProgressTrackSkinはmxを継承する.skins.halo.ProgressBarSkin;
trackSkinは精度バーをロードするスタイルMyProgressTrackSkinがmxを継承する.skins.halo.ProgressTrackSkin;
_progressBar.setStyle("trackSkin",com.skin.MyProgressTrackSkin); _progressBar.setStyle("barSkin",com.skin.MyProgressBarSkin);
f 4形式skin
barskin.mxml:
2.trackSkin.mxml
このうちbarSkinは外枠スタイルであり、MyProgressTrackSkinはmxを継承する.skins.halo.ProgressBarSkin;
trackSkinは精度バーをロードするスタイルMyProgressTrackSkinがmxを継承する.skins.halo.ProgressTrackSkin;
_progressBar.setStyle("trackSkin",com.skin.MyProgressTrackSkin); _progressBar.setStyle("barSkin",com.skin.MyProgressBarSkin);
f 4形式skin
barskin.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" >
<fx:Script>
override protected function initializationComplete():void {
useChromeColor = true; super.initializationComplete();
}
</fx:Script>
<!-- layer 1: fill -->
<s:Rect left="2" right="2" top="2" bottom="2" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x154c87" alpha="1" />
<s:GradientEntry color="0x154c87" alpha="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: border -->
<s:Rect left="2" right="2" top="2" bottom="2" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0x154c87" alpha=".9" />
<s:GradientEntry color="0x154c87" alpha="0.5" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 3: right edge -->
<s:Rect right="1" top="2" bottom="2" width="1" >
<s:fill>
<s:SolidColor color="0xffffff" alpha="0.55" />
</s:fill>
</s:Rect>
</s:SparkSkin>
2.trackSkin.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" minHeight="13" >
<fx:Script>
override protected function initializationComplete():void {
useChromeColor = true; super.initializationComplete();
}
</fx:Script>
<!-- layer 1: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="199" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha=".12" />
<s:GradientEntry color="0xFFFFFF" alpha="0.8" />
</s:LinearGradientStroke> </s:stroke>
</s:Rect>
<!-- layer 2: inner border -->
<s:Rect left="1" right="1" top="1" bottom="1" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:stroke>
<s:SolidColorStroke color="0x939393" alpha="1" />
</s:stroke>
</s:Rect>
<!-- layer 3: fill -->
<s:Rect left="2" right="2" top="2" bottom="2" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xeeeeee" alpha="1" />
<s:GradientEntry color="0xeeeeee" alpha="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: inner shadow -->
<s:Rect left="2" top="2" bottom="2" width="1" >
<s:fill>
<s:SolidColor color="0x000000" alpha="0.12" />
</s:fill>
</s:Rect>
<s:Rect right="2" top="2" bottom="2" width="1" >
<s:fill>
<s:SolidColor color="0x000000" alpha="0.12" />
</s:fill>
</s:Rect>
<s:Rect left="3" top="2" right="3" height="1" >
<s:fill>
<s:SolidColor color="0x000000" alpha="0.12" />
</s:fill>
</s:Rect>
</s:SparkSkin>