首页 > 代码库 > android中图型的阴影效果(shadow-effect-with-custom-shapes)

android中图型的阴影效果(shadow-effect-with-custom-shapes)

思路:

在自己定义shape中添加一层或多层,并错开。就可以显示阴影效果。为添加立体感,button按下的时候,仅仅设置一层。我们能够通过top, bottom, right 和 left 四个參数来控制阴影的方向和大小。

技术分享

关系图

下面自己定义两种阴影效果:

res/drawable-hdpi/shadow1.xml

<?xml version="1.0" encoding="utf-8"?

> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <layer-list> <item android:left="4dp" android:top="4dp"><shape> <solid android:color="#ff58bb52" /> <corners android:radius="30dip" /> </shape></item> </layer-list> </item> <item> <layer-list> <!-- 第一层 --> <item android:left="4dp" android:top="4dp"><shape> <solid android:color="#66000000" /> <corners android:radius="30dip" /> <!-- 描边 --> <stroke android:width="1dp" android:color="#ffffffff" /> </shape></item> <!-- 第二层 --> <item android:bottom="4dp" android:right="4dp"><shape> <solid android:color="#ff58bb52" /> <corners android:radius="30dip" /> <!-- 描边 --> <stroke android:width="1dp" android:color="#ffffffff" /> </shape></item> </layer-list></item> </selector>


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

<?

xml version="1.0" encoding="utf-8"?

> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 点击之后 --> <item android:state_pressed="true"> <layer-list> <item android:left="4dp" android:top="4dp"> <shape> <solid android:color="#ff58bb52" /> <corners android:radius="3dp" /> </shape> </item> </layer-list></item> <!-- 正常状态 --> <item> <layer-list> <!-- 第一层 --> <item android:left="2dp" android:top="2dp"> <shape> <solid android:color="#66000000" /> <corners android:radius="3dp" /> </shape> </item> <!-- 第二层 --> <item android:bottom="4dp" android:right="4dp"> <shape> <solid android:color="#ff58bb52" /> <corners android:radius="3dp" /> </shape> </item> <!-- 第三层 --> <item android:bottom="6dp" android:right="6dp"> <shape> <solid android:color="#ffcccccc" /> <corners android:radius="3dp" /> </shape> </item> </layer-list> </item> </selector>


效果图:

技术分享

android中图型的阴影效果(shadow-effect-with-custom-shapes)