android实现单边阴影

1,053 阅读1分钟

第一种方式

1.纯代码编写:

private fun setShadow() {
    //阴影颜色
    val shadowColor = Color.RED
    val drawable1 = ShapeDrawable().apply {
        //12圆角
        shape = RoundRectShape(floatArrayOf(12f, 12f, 12f, 12f, 12f, 12f, 12f, 12f), null, null)
        //偏移量 就是阴影的高度
        setPadding(0, 0, 0, 2)
        paint.color = shadowColor
    }
    //背景颜色
    val bgColor = Color.WHITE
    val drawable2 = ShapeDrawable().apply {
        //12圆角
        shape = RoundRectShape(floatArrayOf(12f, 12f, 12f, 12f, 12f, 12f, 12f, 12f), null, null)
        paint.color = bgColor
    }

    view.background = LayerDrawable(arrayOf(drawable1,drawable2))
}

2.XML方式:

在drawable文件夹中新建一个shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>
            <corners android:radius="12px" />
            <solid android:color="#ff0000" />
            <!--这里是底部阴影,上下左右都可以实现-->
            <padding android:bottom="2px" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="12px" />
            <solid android:color="#ffffff" />
            />
        </shape>
    </item>
</layer-list>

效果如图所示:

微信截图_20211123225623.png

我这里没有实现渐变的效果,如果需要渐变效果可以多添加几个<item></item>颜色透明度逐渐降低就可以实现阴影渐变效果,简单举个例子:

`

<item>
    <shape>
        <corners android:radius="12px" />
        <solid android:color="#f4f4f4" />
        <padding android:bottom="5px" />
    </shape>
</item>
<item>
    <shape>
        <corners android:radius="12px" />
        <solid android:color="#f5f5f5" />
        <padding android:bottom="4px" />
    </shape>
</item>
  <item>
    <shape>
        <corners android:radius="12px" />
        <solid android:color="#f6f6f6" />
         <padding android:bottom="3px" />
    </shape>
</item>
  <item>
    <shape>
        <corners android:radius="12px" />
        <solid android:color="#f7f7f7" />
         <padding android:bottom="2px" />
    </shape>
</item>
<!--省略-->

`

需要注意的是最上面的item是最底部的,相当于是叠罗汉,一层一层叠起来的。

网上也有很多种实现阴影的方式,但是没找到只实现单边阴影的文章,要不就是四周都有阴影,要么就是两边阴影;

第二种方式

直接让UI切一张.9的图片,只有单边阴影的图片即可,非常简单

如果有更好的实现方式欢迎大家评论留言。