利用 layer-list 實現 view 的陰影效果

首先創建 layer-list :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />

            <solid android:color="@color/shadowColor10" />

        </shape>
    </item>
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />
            <solid android:color="@color/shadowColor20" />

        </shape>
    </item>
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />
            <solid android:color="@color/shadowColor30" />

        </shape>
    </item>
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />
            <solid android:color="@color/shadowColor40" />

        </shape>
    </item>
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />
            <solid android:color="@color/shadowColor50" />
        </shape>
    </item>
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />
            <solid android:color="@color/shadowColor60" />
        </shape>
    </item>
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />
            <solid android:color="@color/shadowColor70" />
        </shape>
    </item>
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />
            <solid android:color="@color/shadowColor80" />
        </shape>
    </item>
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />
            <solid android:color="@color/shadowColor90" />
        </shape>
    </item>
    <item>
        <shape>
            <corners
                android:bottomLeftRadius="@dimen/shadowCorners"
                android:bottomRightRadius="@dimen/shadowCorners"
                android:topLeftRadius="@dimen/shadowCorners"
                android:topRightRadius="@dimen/shadowCorners" />
            <padding
                android:bottom="@dimen/shadowPaddingBottom"
                android:left="@dimen/shadowPaddingLeft"
                android:right="@dimen/shadowPaddingRight"
                android:top="@dimen/shadowPaddingTop" />
            <solid android:color="@color/shadowColor00" />
        </shape>
    </item>
    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/shadowBgColor" />
            <corners android:radius="@dimen/shadowCorners" />
        </shape>
    </item>
</layer-list>

統一設置顏色,陰影大小,設置控件Style

    <color name="shadowBgColor">#ffffff</color>
    <color name="shadowColor10">#10cccccc</color>
    <color name="shadowColor20">#20cccccc</color>
    <color name="shadowColor30">#30cccccc</color>
    <color name="shadowColor40">#40cccccc</color>
    <color name="shadowColor50">#50cccccc</color>
    <color name="shadowColor60">#60cccccc</color>
    <color name="shadowColor70">#70cccccc</color>
    <color name="shadowColor80">#80cccccc</color>
    <color name="shadowColor90">#90cccccc</color>
    <color name="shadowColor00">#00cccccc</color>

    <dimen name="shadowCorners">5dp</dimen>
    <!--shadowPadding中請輸入0-1的數值-->
    <dimen name="shadowPaddingLeft">0dp</dimen>
    <dimen name="shadowPaddingTop">0dp</dimen>
    <dimen name="shadowPaddingRight">0.5dp</dimen>
    <dimen name="shadowPaddingBottom">0.5dp</dimen>
    <!--該值是解決陰影占位問題,layoutPadding = shadowPadding * 10-->
    <dimen name="shadowPaddingLeftLayout">12dp</dimen>
    <dimen name="shadowPaddingTopLayout">12dp</dimen>
    <dimen name="shadowPaddingRightLayout">17dp</dimen>
    <dimen name="shadowPaddingBottomLayout">17dp</dimen>


    <style name="ShadowStyle" parent="MyStyle">
        <item name="android:paddingLeft">@dimen/shadowPaddingLeftLayout</item>
        <item name="android:paddingTop">@dimen/shadowPaddingTopLayout</item>
        <item name="android:paddingRight">@dimen/shadowPaddingRightLayout</item>
        <item name="android:paddingBottom">@dimen/shadowPaddingBottomLayout</item>
        <item name="android:background">@drawable/shadow</item>
    </style>

直接在xml中使用Style即可

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章