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

来源：互联网发布：淘宝护肤品店铺编辑：程序博客网时间：2024/06/18 09:01

思路：

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

关系图

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

res/drawable-hdpi/shadow1.xml

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

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

效果图：

0 0