在XML中为layout设置阴影

1.写在前面

因为有这个需求，所以搜很多资料，也看到了很多方法为layout添加阴影但是最好的方法我感觉是如下两个
github地址，项目中使用
github地址，并没有用它
我使用的是第一个，原因主要两天：1.使用说明详细 2.star比第二个多很多 。但是比较蛋疼的是这个使用指南全是英文，所以一些添加阴影的属性不知道什么意思。所以我写了个demo测试了下这些属性。所以写这个博客主要是熟悉这些属性的含义还有希望帮到有同样需求的人。

2.干货

<declare-styleable name="ShadowLayout">
    <attr name="sl_cornerRadius" format="dimension"/>
    <attr name="sl_shadowRadius" format="dimension"/>
    <attr name="sl_shadowColor" format="color"/>
    <attr name="sl_dx" format="dimension"/>
    <attr name="sl_dy" format="dimension"/>
</declare-styleable>

这个库的自定义属性就这几个，一个个来看
首先上demo的xml，不含阴影的，很简单 就是个relativelayout

<RelativeLayout  android:background="@color/colorAccent" android:layout_width="match_parent" android:layout_height="80dp" >
        </RelativeLayout>

现在为这个layout添加阴影，代码如下

<com.dd.ShadowLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

                <RelativeLayout
                    android:background="@color/colorAccent"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    >
                </RelativeLayout>

        </com.dd.ShadowLayout>

运行后如下

可以看出来虽然我什么属性都没加，就是用这个控件包括，就已经添加好了阴影，说明设置了默认的阴影颜色和其他距离。并且仔细看可知 这个阴影是四周都加了，因为这个有颜色的布局左右缩进了 所以已经带了阴影了。这上下两条边就不用说了 明显带了阴影了。

现在一个个设置属性，为这个控件添加如下属性

app:sl_shadowColor="@color/colorPrimary"

这个其实很明显 是个设置阴影的颜色。至于我添加的这个颜色就是生成项目自带的那个蓝色横条actionbar颜色。然后运行发现如下

可以看到 虽然上下左右都缩进了，但是并没有阴影的效果。然后看了下 发现这个颜色并没有带上透明度，现在我对这个颜色修改下，颜色不变 但是透明度设置50%，如下

app:sl_shadowColor="#803F51B5"

注意这里为什么将颜色抽出来，没有引用，因为 theme colorPrimary 不能使用带有alpha的颜色值，不然会报错。这不是重点。只要知道这个colorPrimary颜色就是#3F51B5就行了

嗯 又带阴影了 但是可以发现这颜色并没有什么用 起作用的还是透明度 因为不管什么颜色 红色 黑色 蓝色 透明度为50%都是这样的。

这个测试完了，我将颜色修改成这个库使用指南中的颜色 测试第二个属性，在添加如下

app:sl_shadowRadius="4dp"

运行出来如下

好像看不出什么 数量大点，继续修改这个属性

app:sl_shadowRadius="14dp"

运行结果如下

可以看到四周上下左右缩进了很多 导致这个布局大小面积小了很多。所以我认为这个属性应该是设置阴影高度的。

将 app:sl_shadowRadius=”4dp”还原成4dp。并且添加如下两个属性

app:sl_dx="2dp"
app:sl_dy="2dp"

运行如下

首先可以看出来 为下边和右边添加了阴影 并且整体看起来比上面的几种效果好看多了。但是其实仔细看 会发现 左边和上边还是有阴影的 。
再修改 将下面这条属性删除,并且将sl_dx修改成6dp

app:sl_dy="2dp"

运行出来如图

这就是布局阴影高度为2dp，布局右边阴影6dp
所以

sl_dx  
sl_dy

就是为布局右边和下边设置阴影偏移的属性。可能有人想问 要为上边或者左边设置阴影偏移怎么办 很简单 设置偏移量带上 - 就可以了 比如将代码修改如下

app:sl_dx="-6dp"

OK,其实还有个属性

app:sl_cornerRadius="xxxdp"

·但是我试了很久还是看不出这个是什么意思。添加上去并没有效果 所以如果有知道可以说一声。最后再次感谢dai佬的这个库
github地址