利用 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即可

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值