Android 自定义阴影Shadow颜色，大小等样式

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

 <TextViewandroid: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"/>

android:elevation=""属性就是给View添加阴影，参数越大则阴影的大小越大，体现出当前view的悬浮高度越高。

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

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

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

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

<declare-styleable name="ShadowContainer"><attr name="containerShadowColor" format="color"/><attr name="containerShadowRadius" format="dimension"/><attr name="containerDeltaLength" format="dimension"/><attr name="containerCornerRadius" format="dimension"/><attr name="deltaX" format="dimension"/><attr name="deltaY" format="dimension"/>
</declare-styleable>

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

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

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

使用方式：

<example.chenj.com.apptest.ShadowContainerandroid: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"><Viewandroid:layout_width="80dp"android:layout_height="80dp"android:background="@drawable/shape_round_white"/></example.chenj.com.apptest.ShadowContainer>

效果图：

代码已上传至我的github:https://github.com/cjlemon/Shadow,感兴趣的同学可以看下，欢迎提出宝贵的建议。

Android 自定义阴影Shadow颜色，大小等样式相关推荐

android 自定义进度条水量,Android自定义带水滴的进度条样式（带渐变色效果）...
一.直接看效果二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; impo ...
android自定义主题背景颜色,Android 自定义SeekBar 实现分段显示不同背景颜色的示例代码...
在最近的开发工作中,要实现一个调色板的进度条,SeekBar要分成10段显示不同颜色,功夫不负有心人,终于实现了这个功能,下面分享给大家示例图: 1.自定义SeekBar import androi ...
Android 自定义阴影，自定义颜色样式
阴影效果样式: 实现方法: 1.创建自定义属性--attrs.xml文件 <?xml version="1.0" encoding="utf-8"?> ...
android 屏幕坐标色彩,Android自定义View实现颜色选取器
Android 自定义View 颜色选取器,可以实现水平.竖直选择颜色类似 SeekBar 的方式通过滑动选择颜色. 效果图 xml 属性 1.indicatorColor 指示点颜色 2.indic ...
android自定义阴影,Android自定义边框加阴影
一.前言 Android自定义边框,可以设置任意边框的角度和阴影.我下面分为四个角度设置边框.两个角度设置边框.半圆球设置边框加两层阴影等. 二.边框分类: 1.四个角度设置边框效果图: 图片.p ...
android code修改border颜色,Android自定义TextView边框颜色（动态改变边框颜色以及字体颜色）...
最近写了一个带边框的TextView,因为项目中有许多地方需要用到一个带边框的TextView,而且需要根据不同的状态显示不同的边框颜色,当时的第一反应就是用shape做,但后来转念一想这要需要定义多 ...
android自定义阴影的卡片布局,CardView卡片布局的简单使用
有时候我们见到过App上有那种和卡片一样的布局,自定义的话太麻烦,于是有了大佬给我们集成了第三方,CardView卡片式布局设计 CardView简介 CardView继承自FrameLayout类. ...
android spannable 设置字体颜色,安卓文本样式-Spannable的使用
本文转载自 lixin84915的博客 Android文本样式原文分为上下两部分,本文将上下整理成了一篇文章. 在android中,有时候需要对文本进行各种特别的设置,比如颜色.大小.首行缩进, ...
Android自定义通知栏/状态栏颜色
原文地址:http://blog.csdn.net/baiyuliang2013/article/details/46674735 适用版本谷歌是在4.4版本以后允许开发者自定义通知栏/状态栏背景颜 ...

Android 自定义阴影Shadow颜色，大小等样式

Android 自定义阴影Shadow颜色，大小等样式相关推荐

最新文章

热门文章