浅谈Flex自定义Accordion头部

2012-12-4 17:30:10

下面是完整代码

main.mxml：

下面是skins/CustomAccordionHeaderSkin.mxml的代码：

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:SparkSkin name="CustomAccordionHeaderSkin"
3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
4.         xmlns:s="library://ns.adobe.com/flex/spark"
5.         minWidth="21" minHeight="21"
6.         alpha.disabled="0.5">
7.     <!-- states -->
8.     <s:states>
9.         <s:State name="up" />
10.         <s:State name="over" />
11.         <s:State name="down" />
12.         <s:State name="disabled" />
13.         <s:State name="selectedUp" />
14.         <s:State name="selectedOver" />
15.         <s:State name="selectedDown" />
16.         <s:State name="selectedDisabled" />
17.     </s:states>
18.  
19.     <!-- layer 3: fill -->
20.     <s:Rect left="1" right="1" top="1" bottom="1">
21.         <s:fill>
22.             <s:SolidColor color="white"
23.                     color.up="red"
24.                     color.over="haloOrange"
25.                     color.down="yellow"
26.                     color.selectedUp="haloGreen"
27.                     color.selectedOver="haloBlue"
28.                     color.selectedDown="purple" />
29.         </s:fill>
30.     </s:Rect>
31.  
32.     <!-- layer 4: fill lowlight -->
33.     <s:Rect left="1" right="1" bottom="1" height="9">
34.         <s:fill>
35.             <s:LinearGradient rotation="90">
36.                 <s:GradientEntry color="0x000000" alpha="0.0099" />
37.                 <s:GradientEntry color="0x000000" alpha="0.0627" />
38.             </s:LinearGradient>
39.         </s:fill>
40.     </s:Rect>
41.  
42.     <!-- layer 5: fill highlight -->
43.     <s:Rect left="1" right="1" top="1" height="9">
44.         <s:fill>
45.             <s:SolidColor color="0xFFFFFF"
46.                         alpha="0.33"
47.                         alpha.over="0.22"
48.                         alpha.down="0.12" />
49.         </s:fill>
50.     </s:Rect>
51.  
52.     <!-- layer 6: highlight stroke (all states except down) -->
53.     <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
54.         <s:stroke>
55.             <s:LinearGradientStroke rotation="90">
56.                 <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
57.                 <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
58.             </s:LinearGradientStroke>
59.         </s:stroke>
60.     </s:Rect>
61.  
62.     <!-- layer 6: highlight stroke (down state only) -->
63.     <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
64.         <s:fill>
65.             <s:SolidColor color="0x000000" alpha="0.07" />
66.         </s:fill>
67.     </s:Rect>
68.     <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
69.         <s:fill>
70.             <s:SolidColor color="0x000000" alpha="0.07" />
71.         </s:fill>
72.     </s:Rect>
73.     <s:Rect left="1" top="1" right="1" height="1" includeIn="down">
74.         <s:fill>
75.             <s:SolidColor color="0x000000" alpha="0.25" />
76.         </s:fill>
77.     </s:Rect>
78.     <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
79.         <s:fill>
80.             <s:SolidColor color="0x000000" alpha="0.09" />
81.         </s:fill>
82.     </s:Rect>
83.  
84.     <!-- layer 2: border -->
85.     <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
86.         <s:stroke>
87.             <s:SolidColorStroke color="0x696969"
88.                         alpha="1"
89.                         alpha.over="1"
90.                         alpha.down="1" />
91.         </s:stroke>
92.     </s:Rect>
93.  
94. </s:SparkSkin>

文章来源：http://www.hulian.top，转载请注明！