Android 添加自定義陰影

看到這個需求的時候其實我內(nèi)心是拒絕的。因為我覺得原生的陰影其實挺好的。雖然不能自己定義顏色但是看起來舒服。一番討論之后還是決定采用UI的設(shè)計。好吧?；仡^上網(wǎng)查了很多資料看看有什么比較合適的方案去把這個事情做好。網(wǎng)上有很多自定義shape來處理的陰影。但是實際使用的時候感覺效果不滿意就pass掉了。后來看到了ShadowLayout，也正是這篇文章的主題。
ShadowLayout的項目地址：https://github.com/dmytrodanylyk/shadow-layout
一.ShadowLayout的原理
ShadowLayout通過子控件的視圖大小來繪制一張圖片在子控件的底層，通過設(shè)置的偏移量來達到陰影的效果。
二.ShadowLayout的使用方法
在XML中把你需要陰影的View作為子控件放在ShadowLayout中。
以Button為例，大家都知道在5.0以后的系統(tǒng)版本按鈕是自帶陰影效果的，既然我們選擇自定義的陰影，那么我們要不系統(tǒng)的陰影去掉。
讓Button使用style="?android:attr/borderlessButtonStyle"就可以讓系統(tǒng)的陰影消失掉。
自定義屬性解釋：
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));
/** 設(shè)置偏離量，分別為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);
//判斷版本，設(shè)置背景
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);
}
/**
* 產(chǎn)生陰影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);
}
}
}

我在源碼的基礎(chǔ)上修改了一些東西來適應(yīng)我的需求。
1.setShadowColor(int id)，在項目中有些按鈕是在輸入完成前不可點擊的，就是置灰狀態(tài)，在這個狀態(tài)是不需要有陰影的。但是有些按鈕的狀態(tài)是一直可以點擊的。如果我在初始化的設(shè)置了顏色，那么在我需要修改的時候，我們傳進去的顏色并且通知視圖重繪并沒有起作用。所以我的做法就是初始化的時候設(shè)置顏色，在代碼中動態(tài)去設(shè)置顏色。
2.reDraw(int id)，在recyclerView中的按鈕可能在復(fù)用中按鈕的狀態(tài)不同，導(dǎo)致本不該有陰影的按鈕出現(xiàn)了陰影。使用這個放在在adapter中從新根據(jù)按鈕的狀態(tài)繪制一次陰影。
四.遇到的坑
在最開始設(shè)置陰影顏色的時候我并沒有想太多，按照UI設(shè)計的顏色方上去額，但是運行的時候并沒有看到預(yù)想的效果，檢查了一下代碼并沒有什么問題。試了一下Color中的灰色。運行之后有效果。知道是自己代碼的問題了，開始排查?？聪旅孢@行代碼

Bitmap output = Bitmap.createBitmap(shadowWidth,shadowHeight,Bitmap.Config.ARGB_8888);

問題就出在了Bitmap.Config.ARGB_8888這里了。
源碼中的參數(shù)是Bitmap.Config.ALPHA_8。
這樣的設(shè)置并不支持各種花樣顏色。在修改了這個參數(shù)之后我終于看見了我想要的效果。通過這個參數(shù)我們可以看出，作者是為了盡量讓這個陰影占用少量的內(nèi)存。但是如果你需要的顏色并不在Bitmap.Config.ALPHA_8中，那么我們只能去犧牲一部分內(nèi)存來保證顏色了。
五.效果


效果

最后還有一個問題，現(xiàn)在的陰影是從上到下都是一個顏色，不知道能有在陰影里加漸變的。這樣在邊緣的時候會更加協(xié)調(diào)。
注意：陰影顏色一定要帶上透明度，否則有可能導(dǎo)致設(shè)置的顏色沒有效果！
注意：陰影顏色一定要帶上透明度，否則有可能導(dǎo)致設(shè)置的顏色沒有效果！
注意：陰影顏色一定要帶上透明度，否則有可能導(dǎo)致設(shè)置的顏色沒有效果！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容