Android中图型的阴影效果（shadow-effect-with-custom-shapes）

• 思路：

  在自定义shape中增加一层或多层，并错开，即可显示阴影效果。为增加立体感，按钮按下的时候，只设置一层。我们可以通过top, bottom, right 和 left 四个参数来控制阴影的方向和大小。

  
  

  关系图

  以下自定义两种阴影效果：

  res/drawable-hdpi/shadow1.xml
  

  view source print ?

  01. <?xml version="1.0" encoding="utf-8"?>

  02. <selector xmlns:android="http://schemas.android.com/apk/res/android">

  03. <item 

  04. android:state_pressed="true">

  05. <layer-list>

  06. <item android:left="4dp" android:top="4dp"><shape>

  07. <solid android:color="#ff58bb52" />

  08. <corners android:radius="30dip" />

  09. </shape></item>

  10. </layer-list>

  11. </item>

  12. <item>

  13. <layer-list>

  14. <!-- 第一层 -->

  15. <item android:left="4dp" android:top="4dp"><shape>

  16. <solid android:color="#66000000" />

  17. <corners android:radius="30dip" />

  18. <!-- 描边 -->

  19. <stroke android:width="1dp" android:color="#ffffffff" />

  20. </shape></item>

  21. <!-- 第二层 -->

  22. <item android:bottom="4dp" android:right="4dp"><shape>

  23. <solid android:color="#ff58bb52" />

  24. <corners android:radius="30dip" />

  25. <!-- 描边 -->

  26. <stroke android:width="1dp" android:color="#ffffffff" />

  27. </shape></item>

  28. </layer-list></item>

  29. </selector>
  
  

  /TestAA/res/drawable-hdpi/shadow2.xml
  

  view source print ?

  01. <?xml version="1.0" encoding="utf-8"?>

  02. <selector xmlns:android="http://schemas.android.com/apk/res/android">

  03. <!-- 点击之后 -->

  04. <item android:state_pressed="true">

  05. <layer-list>

  06. <item 

  07. android:left="4dp"

  08. android:top="4dp">

  09. <shape>

  10. <solid 

  11. android:color="#ff58bb52" />

  12. <corners 

  13. android:radius="3dp" />

  14. </shape>

  15. </item>

  16. </layer-list></item>

  17. <!-- 正常状态 -->

  18. <item>

  19. <layer-list>

  20. <!-- 第一层 -->

  21. <item 

  22. android:left="2dp"

  23. android:top="2dp">

  24. <shape>

  25. <solid 

  26. android:color="#66000000" />

  27. <corners

  28. android:radius="3dp" />

  29. </shape>

  30. </item>

  31. <!-- 第二层 -->

  32. <item 

  33. android:bottom="4dp"

  34. android:right="4dp">

  35. <shape>

  36. <solid 

  37. android:color="#ff58bb52" />

  38. <corners 

  39. android:radius="3dp" />

  40. </shape>

  41. </item>

  42. <!-- 第三层 -->

  43. <item 

  44. android:bottom="6dp"

  45. android:right="6dp">

  46. <shape>

  47. <solid 

  48. android:color="#ffcccccc" />

  49. <corners 

  50. android:radius="3dp" />

  51. </shape>

  52. </item>

  53. </layer-list>

  54. </item>

  55. </selector>
  
  效果图：