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

• 思路：

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

  

  关系图

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

  res/drawable-hdpi/shadow1.xml

   

  view sourceprint?

  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 sourceprint?

  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>
  
  效果图：