看到这个需求的时候其实我内心是拒绝的。因为我觉得原生的阴影其实挺好的。虽然不能自己定义颜色但是看起来舒服。一番讨论之后还是决定采用UI的设计。好吧。回头上网查了很多资料看看有什么比较合适的方案去把这个事情做好。网上有很多自定义shape来处理的阴影。但是实际使用的时候感觉效果不满意就pass掉了。后来看到了ShadowLayout，也正是这篇文章的主题。
ShadowLayout的项目地址：https://github.com/dmytrodanylyk/shadow-layout
一.ShadowLayout的原理
ShadowLayout通过子控件的视图大小来绘制一张图片在子控件的底层，通过设置的偏移量来达到阴影的效果。
二.ShadowLayout的使用方法
在XML中把你需要阴影的View作为子控件放在ShadowLayout中。
以Button为例，大家都知道在5.0以后的系统版本按钮是自带阴影效果的，既然我们选择自定义的阴影，那么我们要不系统的阴影去掉。
让Button使用style="?android:attr/borderlessButtonStyle"就可以让系统的阴影消失掉。
自定义属性解释：
1.sl_cornerRadius：阴影圆角光滑度
2.sl_dx:相对X轴的偏移量
3.sl_dy:相对Y轴的偏移量
4.sl_shadowColor：阴影的颜色
5.sl_shadowRadius：阴影范围的大小
<com.haili.finance.widget.ShadowLayout
android:id="@+id/shadow_btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="24dp"
android:layout_below="@+id/tv_forget_password"
app:sl_cornerRadius="800dp"
app:sl_dx="0dp"
app:sl_dy="3dp"
app:sl_shadowColor="@color/transparent"
app:sl_shadowRadius="5dp">
<Button
style="?android:attr/borderlessButtonStyle"
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="@drawable/bg_btn_home_pro2"
android:elevation="5dp"
android:text="@string/login"
android:textColor="@color/white"
android:textSize="18sp" />
</com.haili.finance.widget.ShadowLayout>
三.ShadowLayout源码
public classShadowLayoutextendsFrameLayout {
/**
* /** 阴影颜色
**/
private intmShadowColor;
/**
* 阴影范围大小
**/
private floatmShadowRadius;
/**
* 阴影圆角光滑度
**/
private floatmCornerRadius;
/**
* 阴影偏离原位置x坐标多少
**/
private floatmDx;
/**
* 阴影偏离原位置y坐标多少
**/
private floatmDy;
private intw;
private inth;
private booleanisChange=true;
publicShadowLayout(Context context) {
super(context);
initView(context, null);
}
publicShadowLayout(Context context,AttributeSet attrs) {
super(context,attrs);
initView(context,attrs);
}
publicShadowLayout(Context context,AttributeSet attrs, intdefStyleAttr) {
super(context,attrs,defStyleAttr);
initView(context,attrs);
}
@Override
protected voidonSizeChanged(intw, inth, intoldw, intoldh) {
super.onSizeChanged(w,h,oldw,oldh);
if(w >0&& h >0) {
this.w= w;
this.h= h;
setBackgroundCompat(w,h);
}
}
private voidinitView(Context context,AttributeSet attrs) {
initAttributes(context,attrs);
/** x偏离量 **/
intxPadding = (int) (mShadowRadius+ Math.abs(mDx));
/** y偏离量 **/
intyPadding = (int) (mShadowRadius+ Math.abs(mDy));
/** 设置偏离量，分别为left,top,right,bottom **/
setPadding(xPadding,yPadding,xPadding,yPadding);
}
@SuppressWarnings("deprecation")
private voidsetBackgroundCompat(intw, inth) {
Bitmap bitmap = createShadowBitmap(w,h,mCornerRadius,mShadowRadius,mDx,mDy,mShadowColor,Color.TRANSPARENT);
BitmapDrawable drawable =newBitmapDrawable(getResources(),bitmap);
//判断版本，设置背景
if(Build.VERSION.SDK_INT<= Build.VERSION_CODES.JELLY_BEAN) {
setBackgroundDrawable(drawable);
}else{
setBackground(drawable);
}
}
/**
* 初始化 initAttributes
*
*@paramcontext
*@paramattrs
*/
private voidinitAttributes(Context context,AttributeSet attrs) {
TypedArray attr = getTypedArray(context,attrs,R.styleable.ShadowLayout);
if(attr ==null) {
return;
}
try{
mCornerRadius= attr.getDimension(R.styleable.ShadowLayout_sl_cornerRadius,4f);
mShadowRadius= attr.getDimension(R.styleable.ShadowLayout_sl_shadowRadius,4f);
mDx= attr.getDimension(R.styleable.ShadowLayout_sl_dx,0);
mDy= attr.getDimension(R.styleable.ShadowLayout_sl_dy,0);
if(!isChange) {
mShadowColor= attr.getColor(R.styleable.ShadowLayout_sl_shadowColor,getResources().getColor(R.color.transparent));
}
}finally{
attr.recycle();
}
}
/**
* 获取TypedArray
*
*@paramcontext
*@paramattributeSet
*@paramattr
*@return
*/
privateTypedArraygetTypedArray(Context context,AttributeSet attributeSet, int[] attr) {
returncontext.obtainStyledAttributes(attributeSet,attr,0,0);
}
/**
* 产生阴影Bitmap
*
*@paramshadowWidth
*@paramshadowHeight
*@paramcornerRadius
*@paramshadowRadius
*@paramdx
*@paramdy
*@paramshadowColor
*@paramfillColor
*@return
*/
privateBitmapcreateShadowBitmap(intshadowWidth, intshadowHeight, floatcornerRadius, floatshadowRadius,
floatdx, floatdy, intshadowColor, intfillColor) {
Bitmap output = Bitmap.createBitmap(shadowWidth,shadowHeight,Bitmap.Config.ARGB_8888);
Canvas canvas =newCanvas(output);
RectF shadowRect =newRectF(
shadowRadius,
shadowRadius,
shadowWidth - shadowRadius,
shadowHeight - shadowRadius);
if(dy >0) {
shadowRect.top+= dy;
shadowRect.bottom-= dy;
}else if(dy <0) {
shadowRect.top+= Math.abs(dy);
shadowRect.bottom-= Math.abs(dy);
}
if(dx >0) {
shadowRect.left+= dx;
shadowRect.right-= dx;
}else if(dx <0) {
shadowRect.left+= Math.abs(dx);
shadowRect.right-= Math.abs(dx);
}
if(dx ==0) {
shadowRect.left= shadowRect.left+5;
shadowRect.right= shadowRect.right-5;
}
Paint shadowPaint =newPaint();
shadowPaint.setAntiAlias(true);
shadowPaint.setColor(fillColor);
shadowPaint.setStyle(Paint.Style.FILL);
if(!isInEditMode()) {
setLayerType(LAYER_TYPE_SOFTWARE, null);
shadowPaint.setShadowLayer(shadowRadius,dx,dy,shadowColor);
}
canvas.drawRoundRect(shadowRect,cornerRadius,cornerRadius,shadowPaint);
returnoutput;
}
public void setShadowColor(int id) {
isChange=true;
mShadowColor= id;
}
public void reDraw(int id) {
mShadowColor= id;
if(w>0&&h>0) {
setBackgroundCompat(w,h);
}
}
}
我在源码的基础上修改了一些东西来适应我的需求。
1.setShadowColor(int id)，在项目中有些按钮是在输入完成前不可点击的，就是置灰状态，在这个状态是不需要有阴影的。但是有些按钮的状态是一直可以点击的。如果我在初始化的设置了颜色，那么在我需要修改的时候，我们传进去的颜色并且通知视图重绘并没有起作用。所以我的做法就是初始化的时候设置颜色，在代码中动态去设置颜色。
2.reDraw(int id)，在recyclerView中的按钮可能在复用中按钮的状态不同，导致本不该有阴影的按钮出现了阴影。使用这个放在在adapter中从新根据按钮的状态绘制一次阴影。
四.遇到的坑
在最开始设置阴影颜色的时候我并没有想太多，按照UI设计的颜色方上去额，但是运行的时候并没有看到预想的效果，检查了一下代码并没有什么问题。试了一下Color中的灰色。运行之后有效果。知道是自己代码的问题了，开始排查。看下面这行代码
Bitmap output = Bitmap.createBitmap(shadowWidth,shadowHeight,Bitmap.Config.ARGB_8888);
问题就出在了Bitmap.Config.ARGB_8888这里了。
源码中的参数是Bitmap.Config.ALPHA_8。
这样的设置并不支持各种花样颜色。在修改了这个参数之后我终于看见了我想要的效果。通过这个参数我们可以看出，作者是为了尽量让这个阴影占用少量的内存。但是如果你需要的颜色并不在Bitmap.Config.ALPHA_8中，那么我们只能去牺牲一部分内存来保证颜色了。
五.效果
效果
最后还有一个问题，现在的阴影是从上到下都是一个颜色，不知道能有在阴影里加渐变的。这样在边缘的时候会更加协调。
注意：阴影颜色一定要带上透明度，否则有可能导致设置的颜色没有效果！
注意：阴影颜色一定要带上透明度，否则有可能导致设置的颜色没有效果！
注意：阴影颜色一定要带上透明度，否则有可能导致设置的颜色没有效果！
