Android項目實戰（三十六）：給背景加上陰影效果

 

圓角背景大家應該經常用：

一個drawable資源文件  里面控制corner圓角 和solid填充色 

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dp_2"></corners>
    <solid android:color="@color/standard_main"></solid>
</shape>

 

 那么在此基礎上 ， 實現帶陰影效果的圓角背景  

 代碼如下

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 陰影部分 -->
<!-- 個人覺得更形象的表達：top代表下邊的陰影高度，left代表右邊的陰影寬度。其實也就是相對應的offset，solid中的顏色是陰影的顏色，也可以設置角度等等 -->
<item
    android:left="4dp"
    android:top="4dp">
    <shape android:shape="rectangle" >

        <gradient
            android:angle="270"
            android:endColor="#0F000000"
            android:startColor="#0F000000" />

        <corners
            android:bottomLeftRadius="@dimen/dp_4"
            android:bottomRightRadius="@dimen/dp_14"
            android:topLeftRadius="@dimen/dp_4"
            android:topRightRadius="@dimen/dp_4" />
    </shape>
</item>

<!-- 背景部分 -->
<!-- 形象的表達：bottom代表背景部分在上邊緣超出陰影的高度，right代表背景部分在左邊超出陰影的寬度（相對應的offset） -->
<item
    android:bottom="3dp"
    android:left="@dimen/dp_0.5"
    android:top="@dimen/dp_0.5"
    android:right="3dp">
    <shape android:shape="rectangle" >
        <gradient
            android:angle="270"
            android:endColor="#FFFFFF"
            android:startColor="#FFFFFF" />

        <corners
            android:bottomLeftRadius="@dimen/dp_4"
            android:bottomRightRadius="@dimen/dp_14"
            android:topLeftRadius="@dimen/dp_4"
            android:topRightRadius="@dimen/dp_4" />
    </shape>
</item>

</layer-list>

 效果： 可以看到 右側和下側都有一個小范圍的灰色陰影效果。

 

 

在實際產品中作為列表item的背景效果：

 

 是不是實現了一種類似cardview的效果 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------

 

附：四周陰影實現

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#0DCCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#10CCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#15CCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#20CCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#30CCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>