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

     

    

转载于:https://www.cnblogs.com/MMLoveMeMM/articles/4204338.html