Android使用XML Shape绘制带阴影效果的圆形按钮

众所周知，在Android开发里，为了优化在各种分辨率设备上的显示效果，同一份图片素材往往要提供mdpi、hdpi、xhdpi三种（以前还有ldpi），尤其是按钮类的素材，考虑到normal、pressed、focused更是需要至少3×3=9张图片。NinePatch技术虽然可以解决一部分尺寸灵活性的问题，但大部分修改和适配还是要再次制作一批图片的。

根据交互设计的需要，可以考虑用Drawable的XML绘制按钮，好处有：
* 矢量绘制，易于缩放；
* 字节数更少（一般而言）；
* 基于XML文本，属性值易于调整；
* Drawable组件间可嵌套，可重用；
* XML与项目其他源代码在一起，便于版本控制。

当然也有缺点：
* 没有可视化的编辑器，编辑不够直观；
* 受限于基本的图形和填充方式；
* 美工人员很难上手。

以本站开发的习作《泡面管家》（参见这里）为例。
下图是泡面管家的计时器，中间的圆形（包含镂空阴影效果）默认是表示计时器状态的icon，在计时器运行期间会变换为停止计时的按钮：

这里icon的背景是用Drawable XML绘制的。在Android中，Drawable XML并不支持阴影，参考了网上诸多例子，一般都是以额外绘制的渐变或者边框来实现阴影。这里是用叠加shape的方式来绘制的。

上图中绿色方框中的标识的色块，从外到内可以划分成几个部分：
* Outer circle
* Inner shadow of outer circle
* Gap
* Outer shadow of center circle
* Center circle

使用<layer-list/>，从最底层开始，画对应最外部分的、最大的圆形，然后逐层的、边扩大padding边叠加圆形，圆形的填充颜色要对应到相应的色块。res/drawable/timer_center_bg.xml代码如下：

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <!-- outer circle -->  
4.     <item>  
5.         <shape android:shape="oval" >  
6.             <solid android:color="#FFACB8C3" />  
7.         </shape>  
8.     </item>  
9.    
10.     <!-- inner shadow of outer circle -->  
11.     <item  
12.         android:bottom="2dp"  
13.         android:left="2dp"  
14.         android:right="2dp"  
15.         android:top="2dp">  
16.         <shape android:shape="oval">  
17.             <solid android:color="#FFbdcad6" />  
18.         </shape>  
19.     </item>  
20.     <item  
21.         android:bottom="3dp"  
22.         android:left="3dp"  
23.         android:right="3dp"  
24.         android:top="3dp">  
25.         <shape android:shape="oval">  
26.             <solid android:color="#FFc3cfd9" />  
27.         </shape>  
28.     </item>  
29.     <item  
30.         android:bottom="4dp"  
31.         android:left="4dp"  
32.         android:right="4dp"  
33.         android:top="4dp">  
34.         <shape android:shape="oval">  
35.             <solid android:color="#FFcbd6df" />  
36.         </shape>  
37.     </item>  
38.     <item  
39.         android:bottom="5dp"  
40.         android:left="5dp"  
41.         android:right="5dp"  
42.         android:top="5dp">  
43.         <shape android:shape="oval">  
44.             <solid android:color="#FFd4dee5" />  
45.         </shape>  
46.     </item>  
47.    
48.     <!-- gap -->  
49.     <item  
50.         android:bottom="6dp"  
51.         android:left="6dp"  
52.         android:right="6dp"  
53.         android:top="6dp">  
54.         <shape android:shape="oval" >  
55.             <solid android:color="#FFdae2e8" />  
56.         </shape>  
57.     </item>  
58.    
59.     <!-- outer shadow of center circle -->  
60.     <item  
61.         android:bottom="10dp"  
62.         android:left="10dp"  
63.         android:right="10dp"  
64.         android:top="10dp">  
65.         <shape android:shape="oval">  
66.             <solid android:color="#FFced5dc" />  
67.         </shape>  
68.     </item>  
69.     <item  
70.         android:bottom="12dp"  
71.         android:left="12dp"  
72.         android:right="12dp"  
73.         android:top="12dp">  
74.         <shape android:shape="oval">  
75.             <solid android:color="#FFbcc4c9" />  
76.         </shape>  
77.     </item>  
78.     <item  
79.         android:bottom="13dp"  
80.         android:left="13dp"  
81.         android:right="13dp"  
82.         android:top="13dp">  
83.         <shape android:shape="oval">  
84.             <solid android:color="#FFb4bbc0" />  
85.         </shape>  
86.     </item>  
87.     <item  
88.         android:bottom="14dp"  
89.         android:left="14dp"  
90.         android:right="14dp"  
91.         android:top="14dp">  
92.         <shape android:shape="oval">  
93.             <solid android:color="#FFacb3b8" />  
94.         </shape>  
95.     </item>  
96.    
97.     <!-- center circle -->  
98.     <item  
99.         android:bottom="15dp"  
100.         android:left="15dp"  
101.         android:right="15dp"  
102.         android:top="15dp">  
103.         <shape android:shape="oval">  
104.             <stroke android:width="1dp" android:color="#FFFCFCFC"/>  
105.             <gradient  
106.                 android:angle="270"  
107.                 android:endColor="#FFCFD7DD"  
108.                 android:startColor="#FFF0F5F9" />  
109.         </shape>  
110.     </item>  
111.    
112. </layer-list>  

从以上代码中可以看出，只是简单的圆形的叠加，就可以绘制出具有立体感的按钮。
要注意上边只是按钮的背景。文章开头也讲过，Drawable XML的特征之一就是可复用。继续看res/drawable/stop_timer_btn.xml的代码：

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.    
4.     <!-- normal -->  
5.     <item android:state_enabled="true" android:state_focused="false" android:state_pressed="false">  
6.         <layer-list>  
7.             <item android:drawable="@drawable/timer_center_bg" />  
8.             <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp">  
9.                 <shape android:shape="oval">  
10.                     <stroke android:width="1dp" android:color="#FFFCFCFC" />  
11.                     <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" />  
12.                 </shape>  
13.             </item>  
14.         </layer-list>  
15.     </item>  
16.    
17.     <!-- pressed -->  
18.     <item android:state_enabled="true" android:state_pressed="true">  
19.         <layer-list>  
20.             <item android:drawable="@drawable/timer_center_bg" />  
21.             <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp">  
22.                 <shape android:shape="oval">  
23.                     <stroke android:width="2dp" android:color="#FFf8f640" />  
24.                     <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" />  
25.                 </shape>  
26.             </item>  
27.         </layer-list>  
28.     </item>  
29.    
30.     <!-- selected -->  
31.     <item android:state_enabled="true" android:state_focused="true" android:state_pressed="false">  
32.         <layer-list>  
33.             <item android:drawable="@drawable/timer_center_bg" />  
34.             <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp">  
35.                 <shape android:shape="oval">  
36.                     <stroke android:width="2dp" android:color="#FFf8f640" />  
37.                     <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" />  
38.                 </shape>  
39.             </item>  
40.         </layer-list>  
41.     </item>  
42.    
43.     <!-- ...... -->  
44. </selector>  

上述代码以看出，<selector/>中每个<item/>都是一个<layer-list/>，将@drawable/timer_center_bg作为背景在前景叠加圆形以区分不同状态。

最后要说明的是，决定一个按钮应该是否用Drawable XML渲染，应考虑以下几个因素：
* App是否要支持多分辨率；
* App是否有瘦身的需要；
* 图案是否足够简单；
* 图案需要自由缩放；
* 设计开发工作流程是否容许开发人员跨界；
* 开发人力相对于设计人力更充足。

否则，应该考虑以图片方式渲染。