android中圖型的陰影製作效果（shadow-effect-with-custom-shapes）

標籤：blog   lin   msu   apk   img   tom   article   effect   encoding   

思路：

在自己定義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）