效果

?
第二張和第三張圖是加入了陰影效果的，是不是覺得立體感很強(qiáng)，感覺圖片是浮在屏幕上。這個(gè)效果也可以用Google 提供擴(kuò)展包下的CardView控件來實(shí)現(xiàn)，而這篇文章是帶大家自己來實(shí)現(xiàn)這樣一個(gè)效果。

原理

我們仔細(xì)觀察上圖，可以發(fā)現(xiàn)，有帶陰影效果的圖和沒帶陰影效果的圖，其實(shí)就一個(gè)地方不同，就是在圖片的底下繪制了陰影效果，而圖片的大小都沒變。所以我們要做的就是給子 View 繪制陰影。那么陰影部分怎么繪制呢？這里是整個(gè)效果實(shí)現(xiàn)的一個(gè)難點(diǎn)；陰影部分其實(shí)就是一張 bitmap 圖片，而接下來的工作就是如何生成一張這樣效果的 bitmap 圖，還有就是 bitmap 圖片繪制位置的確定。

實(shí)現(xiàn)

1、陰影效果的 bitmap 圖片的生成?
最簡單的辦法叫美工做一張，我們把他轉(zhuǎn)化成.9圖片，這是一種方法；還有一種方法就是用代碼生成這樣一張 bitmap，要實(shí)現(xiàn)這樣的效果，我們需要用到 Paint 畫筆中的一個(gè)屬性

public MaskFilter setMaskFilter(MaskFilter maskfilter) { //... }

?

這個(gè) MaskFilter有一個(gè)子類BlurMaskFilter就能實(shí)現(xiàn)這樣的效果，一般把它叫為毛玻璃效果。這個(gè)類的實(shí)現(xiàn)需要傳兩個(gè)參數(shù)

public BlurMaskFilter(float radius, Blur style) {//...}

?

radius：漸變效果的距離。

style：模式，這里有四中模式

public enum Blur {/*** Blur inside and outside the original border.*/NORMAL(0),/** * Draw solid inside the border, blur outside. */ SOLID(1), /** * Draw nothing inside the border, blur outside. */ OUTER(2), /** * Blur inside the border, draw nothing outside. */ INNER(3); Blur(int value) { native_int = value; } final int native_int; }

?

這幾種模式到底是怎么的呢？來看看下面那張圖?

以上圖形是通過

public void drawRect(RectF rect, Paint paint) {;}

?

看到這張圖加上上面幾種模式的注解，應(yīng)該很清楚了。?
這里有一個(gè)注意點(diǎn)是：我們繪制矩形的時(shí)候，如果沒有設(shè)置這種模糊效果，這繪制的圖形的大小就是矩形的大小，如果繪制了模糊效果，則圖形的大小需要加上實(shí)例化BlurMaskFilter時(shí)候的radius，就是漸變的距離。?
創(chuàng)建 bitmap 的代碼如下：

//設(shè)置畫筆的 stylemPaint.setStyle(Paint.Style.FILL);//設(shè)置畫筆的模糊效果mPaint.setMaskFilter(new BlurMaskFilter(BLUR_WIDTH, BlurMaskFilter.Blur.NORMAL)); //設(shè)置畫筆的顏色 mPaint.setColor(Color.BLACK); //創(chuàng)建 bitmap 圖片 mShadowBitmap = Bitmap.createBitmap(mOriginRect.width(), mOriginRect.height(), Bitmap.Config.ARGB_8888); //綁定到畫布上 Canvas canvas = new Canvas(mShadowBitmap); //讓畫布平移，這里為什么要平移，看了前面圖片就知道 canvas.translate(BLUR_WIDTH,BLUR_WIDTH); //繪制陰影效果 canvas.drawRoundRect(mDesRecF, mRadius, mRadius, mPaint);

2、bitmap 圖片繪制位置的確定?
bitmap 的繪制，是放在

protected void dispatchDraw(Canvas canvas) { //... }

?

這里有各地方需要注意，需要先繪制 bitmap，在調(diào)用

super.dispatchDraw(canvas);

?

為什么？很好理解了，因?yàn)閟uper.dispatchDraw(canvas);是分發(fā)繪制機(jī)制，Layout 的所有子類的繪制都需要通過它來分發(fā)，如果先繪制子類，那么 bitmap 陰影部分就會(huì)顯示在子類的上面，會(huì)把子類覆蓋。?
代碼如下：

@Overrideprotected void dispatchDraw(Canvas canvas) {int N = getChildCount() ;for (int i = 0; i < N ; i ++){View view = getChildAt(i) ;if (view.getVisibility() == GONE ||view.getVisibility() == INVISIBLE|| view.getAlpha() == 0){ continue; } int left = view.getLeft() ; int top = view.getTop() ; /*保存畫布的位置*/ canvas.save() ; /*平移畫布*/ canvas.translate(left + (1-mDepth)*80,top + (1-mDepth)*80); /*設(shè)置繪制陰影畫筆的透明度*/ mAlphaPaint.setAlpha((int) (125 + 100 * (mDepth))); /*獲取陰影的繪制寬度*/ mDesRecF.right = view.getWidth() ; /*獲取陰影的繪制高度*/ mDesRecF.bottom = view.getHeight() ; /*繪制陰影*/ canvas.drawBitmap(mShadowBitmap, mOriginRect, mDesRecF, mAlphaPaint); /*還原畫筆*/ canvas.restore(); } super.dispatchDraw(canvas); }

?

到這里整個(gè)效果的 Layout 布局就寫完了，代碼非常簡潔，總共100行代碼不到，索性就全部貼出來吧

/*** Created by moon.zhong on 2015/3/25.*/ public class ShadowLayout extends RelativeLayout { private float mDepth = 0.5f; private Bitmap mShadowBitmap; private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); private final int BLUR_WIDTH = 5 ; private final Rect mOriginRect = new Rect(0,0,150+ 2*BLUR_WIDTH,150+2*BLUR_WIDTH) ; private RectF mDesRecF = new RectF(0,0,150,150) ; private int mRadius = 6 ; private Paint mAlphaPaint ; public ShadowLayout(Context context) { super(context); initView(context); } public ShadowLayout(Context context, AttributeSet attrs) { super(context, attrs); initView(context); } public ShadowLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initView(context); } private void initView(Context context) { setWillNotDraw(false); //設(shè)置畫筆的 style mPaint.setStyle(Paint.Style.FILL); //設(shè)置畫筆的模糊效果 mPaint.setMaskFilter(new BlurMaskFilter(BLUR_WIDTH, BlurMaskFilter.Blur.NORMAL)); //設(shè)置畫筆的顏色 mPaint.setColor(Color.BLACK); //創(chuàng)建 bitmap 圖片 mShadowBitmap = Bitmap.createBitmap(mOriginRect.width(), mOriginRect.height(), Bitmap.Config.ARGB_8888); //綁定到畫布上 Canvas canvas = new Canvas(mShadowBitmap); //讓畫布平移，這里為什么要平移，看了前面圖片就知道 canvas.translate(BLUR_WIDTH,BLUR_WIDTH); //繪制陰影效果 canvas.drawRoundRect(mDesRecF, mRadius, mRadius, mPaint); mAlphaPaint = new Paint(Paint.ANTI_ALIAS_FLAG) ; } public void setDepth(float depth){ mDepth = depth ; invalidate(); } @Override protected void dispatchDraw(Canvas canvas) { int N = getChildCount() ; for (int i = 0; i < N ; i ++){ View view = getChildAt(i) ; if (view.getVisibility() == GONE ||view.getVisibility() == INVISIBLE|| view.getAlpha() == 0){ continue; } int left = view.getLeft() ; int top = view.getTop() ; /*保存畫布的位置*/ canvas.save() ; /*平移畫布*/ canvas.translate(left + (1-mDepth)*80,top + (1-mDepth)*80); /*設(shè)置繪制陰影畫筆的透明度*/ mAlphaPaint.setAlpha((int) (125 + 100 * (mDepth))); /*獲取陰影的繪制寬度*/ mDesRecF.right = view.getWidth() ; /*獲取陰影的繪制高度*/ mDesRecF.bottom = view.getHeight() ; /*繪制陰影*/ canvas.drawBitmap(mShadowBitmap, mOriginRect, mDesRecF, mAlphaPaint); /*還原畫筆*/ canvas.restore(); } super.dispatchDraw(canvas); } }

?

再來看一下動(dòng)態(tài)的效果圖?

總結(jié)

整體實(shí)現(xiàn)不是特別難，最主要的是 Paint類中 的

mPaint.setMaskFilter(new BlurMaskFilter(BLUR_WIDTH, BlurMaskFilter.Blur.NORMAL));

?

在創(chuàng)建 bitmap 的時(shí)候，bitmap 的大小一定要加上2倍的BLUR_WIDTH也就是

private final Rect mOriginRect = new Rect(0,0,150+ 2*BLUR_WIDTH,150+2*BLUR_WIDTH) ;

?

至于為什么前面已經(jīng)講了。

?

http://blog.csdn.net/jxxfzgy/article/details/44644799

轉(zhuǎn)載于:https://www.cnblogs.com/shanzei/p/4654225.html

總結(jié)

以上是生活随笔為你收集整理的阴影效果 ShadowLayout 布局实现（让控件实现立体效果）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。