看到這個(gè)需求的時(shí)候其實(shí)我內(nèi)心是拒絕的。因?yàn)槲矣X得原生的陰影其實(shí)挺好的懦砂。雖然不能自己定義顏色但是看起來舒服蜒犯。一番討論之后還是決定采用UI的設(shè)計(jì)。好吧荞膘》Ｋ妫回頭上網(wǎng)查了很多資料看看有什么比較合適的方案去把這個(gè)事情做好。網(wǎng)上有很多自定義shape來處理的陰影羽资。但是實(shí)際使用的時(shí)候感覺效果不滿意就pass掉了淘菩。后來看到了ShadowLayout，也正是這篇文章的主題屠升。
ShadowLayout的項(xiàng)目地址：https://github.com/dmytrodanylyk/shadow-layout
一.ShadowLayout的原理
ShadowLayout通過子控件的視圖大小來繪制一張圖片在子控件的底層潮改，通過設(shè)置的偏移量來達(dá)到陰影的效果。
二.ShadowLayout的使用方法
在XML中把你需要陰影的View作為子控件放在ShadowLayout中腹暖。
以Button為例汇在，大家都知道在5.0以后的系統(tǒng)版本按鈕是自帶陰影效果的，既然我們選擇自定義的陰影脏答，那么我們要不系統(tǒng)的陰影去掉糕殉。
讓Button使用style="?android:attr/borderlessButtonStyle"就可以讓系統(tǒng)的陰影消失掉。
自定義屬性解釋：
1.sl_cornerRadius：陰影圓角光滑度
2.sl_dx:相對(duì)X軸的偏移量
3.sl_dy:相對(duì)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坐標(biāo)多少
**/
private floatmDx;
/**
* 陰影偏離原位置y坐標(biāo)多少
**/
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)黄绩，在項(xiàng)目中有些按鈕是在輸入完成前不可點(diǎn)擊的赡磅，就是置灰狀態(tài)，在這個(gè)狀態(tài)是不需要有陰影的宝与。但是有些按鈕的狀態(tài)是一直可以點(diǎn)擊的。如果我在初始化的設(shè)置了顏色冶匹，那么在我需要修改的時(shí)候习劫，我們傳進(jìn)去的顏色并且通知視圖重繪并沒有起作用。所以我的做法就是初始化的時(shí)候設(shè)置顏色嚼隘，在代碼中動(dòng)態(tài)去設(shè)置顏色诽里。
2.reDraw(int id)，在recyclerView中的按鈕可能在復(fù)用中按鈕的狀態(tài)不同飞蛹，導(dǎo)致本不該有陰影的按鈕出現(xiàn)了陰影谤狡。使用這個(gè)放在在adapter中從新根據(jù)按鈕的狀態(tài)繪制一次陰影灸眼。
四.遇到的坑
在最開始設(shè)置陰影顏色的時(shí)候我并沒有想太多，按照UI設(shè)計(jì)的顏色方上去額墓懂，但是運(yùn)行的時(shí)候并沒有看到預(yù)想的效果焰宣，檢查了一下代碼并沒有什么問題。試了一下Color中的灰色捕仔。運(yùn)行之后有效果匕积。知道是自己代碼的問題了，開始排查榜跌∩了簦看下面這行代碼
Bitmap output = Bitmap.createBitmap(shadowWidth,shadowHeight,Bitmap.Config.ARGB_8888);
問題就出在了Bitmap.Config.ARGB_8888這里了。
源碼中的參數(shù)是Bitmap.Config.ALPHA_8钓葫。
這樣的設(shè)置并不支持各種花樣顏色悄蕾。在修改了這個(gè)參數(shù)之后我終于看見了我想要的效果。通過這個(gè)參數(shù)我們可以看出础浮，作者是為了盡量讓這個(gè)陰影占用少量的內(nèi)存帆调。但是如果你需要的顏色并不在Bitmap.Config.ALPHA_8中，那么我們只能去犧牲一部分內(nèi)存來保證顏色了霸旗。
五.效果
效果
最后還有一個(gè)問題贷帮，現(xiàn)在的陰影是從上到下都是一個(gè)顏色，不知道能有在陰影里加漸變的诱告。這樣在邊緣的時(shí)候會(huì)更加協(xié)調(diào)撵枢。
注意：陰影顏色一定要帶上透明度，否則有可能導(dǎo)致設(shè)置的顏色沒有效果精居！
注意：陰影顏色一定要帶上透明度锄禽，否則有可能導(dǎo)致設(shè)置的顏色沒有效果！
注意：陰影顏色一定要帶上透明度靴姿，否則有可能導(dǎo)致設(shè)置的顏色沒有效果沃但！
