Android 自定义阴影

最近在项目碰到一个比较头疼的项目，设计师需要给ui图中的一些按钮之类的东西添加阴影。乍一看设计图，这没啥嘛，咱们Android中不是有这个属性嘛，于是撸起袖子开搞：

android:id="@+id/btn_test_performance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="5dp"
android:text="@string/hello"
android:background="@drawable/shape_round_white"
android:padding="20dp"
android:layout_marginTop="10dp"
android:layout_gravity="center"/>

图1

代码敲完跑起来看一下效果图，恩，效果还可以。于是把所有需要阴影的控件全部加上android:elevation属性，美滋滋，有api就是好。事情发展得很顺利，直到我们设计师找到我，“你是Android设计师吧，你这个颜色有点不对啊，我们标记的颜色比较淡，你这个颜色有点深”。。。瞬间凌乱，wtf,这个颜色是系统自带的啊，我怎么控制。于是上网google一下，怎样修改elevation的颜色属性。一顿搜索后，无果。祸不单行，我们测试工程师也找了过来，“你这个页面不对啊，我们设计图上这里有阴影，你这里啥也没有”。？？？什么鬼，不可能啊，我这里都有的，你这个包有问题吧。于是把测试的测试机拿过来自己装上一个一跑。。。尼玛，什么鬼，真没有。回头再看一遍自己的代码发现在android:elevation上有一个黄色的警告，之前没注意，鼠标放上去一看，

图2

。。原来是版本适配问题，看来是api是不能用了，只能通过一些其他的手段去实现了。经过漫长的思考人生后，想出下面几个思路：

自定义shape.xml drawable文件去给控件设置背景，使用Gradient渐变色属性实现阴影样式。
找ui设计师，让他们切一个带阴影的图给我们（找ui能解决的都不是事~）
自己代码实现一个带背景的自定义view

经过不停地自我推翻以及方案被否定后还是留下了第三个方案，主要原因如下：

第一个方案的渐变色不支持四周向中间的渐变，只能支持线性或者环装形式渐变，这两种都不满足需要，因为阴影本身是一个四周一层很淡的颜色包围，在一个矩形框的层面上颜色大概一致，所以这个思路无法实现这个需求，抛弃。
第二个方案询问了一下我们ui。。他们给出的结果是如果使用切图的话那标注的话很难标，身为一个优秀的设计师大多对像素点都和敏感，界面上的像素点有一点不协调那都是无法容忍的。。
那么就只剩下第三个方案了

经过资料查询，发现有两个方式用来写阴影很合适。在我们Android中自定义view的时候有以下两个方法，我们可能用的都不是很多：

paint.setShadowLayer(float radius, float dx, float dy, int shadowColor);
这个方法可以达到这样一个效果，在使用canvas画图时给视图顺带上一层阴影效果。
简单介绍一下这几个参数：
radius: 阴影半径，主要可以控制阴影的模糊效果以及阴影扩散出去的大小。
dx：阴影在X轴方向上的偏移量
dy: 阴影在Y轴方向上的偏移量
shadowColor：阴影颜色。
终于找到了设置颜色的，通过设置shadowColor来控制视图的阴影颜色。
我们试一下使用paint.setShadowLayer(10, 0, 0, Color.RED)的效果：

图3

这个是在4.1的设备上的效果图，上面的hello world使用elevation，可以看到丝毫没有效果。下面是使用自定义view的方式画出来的一个图，可以看到效果是很nice的，这个也实现了颜色的可调整性，完美解决。

这里也顺带说下第二种思路，这边我试了一下效果没这边好，有可能是我没调整好，个人觉得应该也是能实现这种效果的， paint还有一个方法是paint.setMaskFilter();这里通过设置BlurMaskFilter()应该也能达到这种效果。

对于第一种方案，经过思考决定封装成一个Viewgroup比较合适，将需要设置阴影的视图放到Viewgroup里面。其中涉及到几个属性，阴影的宽度，view到Viewgroup的距离，如果视图和父布局一样大的话，那阴影就不好显示，如果要能够显示出来就必须设置clipChildren=false。还有就是视图自带的圆角，大部分背景都是有圆角的，比如上图中的圆角，需要达到高度还原阴影的效果就是的阴影的圆角和背景保持一致。
这里把这几个属性抽成自定义属性：

containerShadowColor:设置阴影颜色
containerShadowRadius:设置阴影的扩展距离
containerDeltaLength:设置子View到ShadowContainer的距离
containerCornerRadius:设置子View背景的圆角大小
deltaX: 设置阴影向下移动距离
deltaY: 设置阴影在Y轴移动距离

图4

这里使用画图的方式解释一下这几个参数：
图中的红色区域是需要设置阴影的View，外部黑色边框包裹的区域是ShadowContainer，中间的白色部分是阴影展示的区域，这块的大小根据设置的containerDeltaLength控制。这里打个比方，如果目标view需要距离左边20dp的话，而中间的containerdeltaLength为10dp，则只需要将ShadowContainer的marginLeft设置为10dp就可以了，这样可以完美控制子view的位置。

此外，containerShadowRadius影响的是阴影在空白区域的占比情况，如果containerShadowRadius小一点的话阴影倒是不大, 但是如果太大的话那么空白区域可能装不下阴影面积。这里需要看情况调整。

使用方式：

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_gravity="center"
app:containerCornerRadius="5dp"
app:containerDeltaLength="5dp"
app:containerShadowColor="#f00"
app:containerShadowRadius="5dp">
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/shape_round_white"/>

效果图：

图5

更多相关文章

随机推荐