搜索
您的当前位置:首页正文

Android 添加自定义阴影

来源:二三娱乐
<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中,那么我们只能去牺牲一部分内存来保证颜色了。
五.效果


效果

最后还有一个问题,现在的阴影是从上到下都是一个颜色,不知道能有在阴影里加渐变的。这样在边缘的时候会更加协调。
注意:阴影颜色一定要带上透明度,否则有可能导致设置的颜色没有效果!
注意:阴影颜色一定要带上透明度,否则有可能导致设置的颜色没有效果!
注意:阴影颜色一定要带上透明度,否则有可能导致设置的颜色没有效果!

Top