Android开发：用Drawable XML绘制带阴影效果的圆形按钮

根据交互设计的需要，可以考虑用Drawable的XML绘制按钮，好处有：

• 矢量绘制，易于缩放；
• 字节数更少（一般而言）；
• 基于XML文本，属性值易于调整；
• Drawable组件间可嵌套，可重用；
• XML与项目其他源代码在一起，便于版本控制。

当然也有缺点：

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

• 下图是泡面管家的计时器，中间的圆形（包含镂空阴影效果）默认是表示计时器状态的icon，在计时器运行期间会变换为停止计时的按钮：

  
  

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

  
  

  上图中绿色方框中的标识的色块，从外到内可以划分成几个部分：

  1. Outer circle
  2. Inner shadow of outer circle
  3. Gap
  4. Outer shadow of center circle
  5. Center circle

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112

  & lt ; ? xml version = "1.0" encoding = "utf-8" ? & gt ; & lt ; layer - list xmlns : android = "http://schemas.android.com/apk/res/android" & gt ;      & lt ; ! -- outer circle -- & gt ;      & lt ; item & gt ;          & lt ; shape android : shape = "oval" & gt ;              & lt ; solid android : color = "#FFACB8C3" / & gt ;          & lt ; / shape & gt ;      & lt ; / item & gt ;        & lt ; ! -- inner shadow of outer circle -- & gt ;      & lt ; item          android : bottom = "2dp"          android : left = "2dp"          android : right = "2dp"          android :