Android项目中遇到的坑之（Android圆角圆形图 二）

接着上一篇的问题来研究研究：
**问题来了：效果是有了，但有发现么？我设置的scaleType只有fitxy
是有效果的，其他的都没有效果了。设置为其他的scaleType都变成matrix那种效果了，也就是图片默认从控件的左上角开始摆放。**

我们先看看ImageView的scaleType

以下内容来自http://www.2cto.com/kf/201411/348601.html

让我们看看scaleType的各类效果图:
ImageView的scaleType的属性有好几种，分别是matrix（默认）、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fitXY

android:scaleType=”center”

保持原图的大小，显示在ImageView的中心。当原图的size大于ImageView的size，超过部分裁剪处理。

android:scaleType=”centerCrop”

以填满整个ImageView为目的，将原图的中心对准ImageView的中心，等比例放大原图，直到填满ImageView为止（指的是ImageView的宽和高都要填满），原图超过ImageView的部分作裁剪处理。

android:scaleType=”centerInside”

以原图完全显示为目的，将图片的内容完整居中显示，通过按比例缩小原图的size宽(高)等于或小于ImageView的宽(高)。如果原图的size本身就小于ImageView的size，则原图的size不作任何处理，居中显示在ImageView。

android:scaleType=”matrix”

不改变原图的大小，从ImageView的左上角开始绘制原图，原图超过ImageView的部分作裁剪处理。

android:scaleType=”fitCenter”

把原图按比例扩大或缩小到ImageView的ImageView的高度，居中显示

android:scaleType=”fitEnd”

把原图按比例扩大(缩小)到ImageView的高度，显示在ImageView的下部分位置

android:scaleType=”fitStart”

把原图按比例扩大(缩小)到ImageView的高度，显示在ImageView的上部分位置

android:scaleType=”fitXY”

把原图按照指定的大小在View中显示，拉伸显示图片，不保持原比例，填满ImageView.

下面附上效果图：

原图为Pocoyo的头像，上图为原图的size大于ImageView的size，下图为原图的size小于ImageView的size

已经展示的很清楚了，也就是说我们的RoundImageView只支持fitxy跟martrix两种方式，我们看看ImageView的源码找找原因

问题1：为什么只支持fitxy跟matrix方式呢？
我们看看ImageView源码

 private void configureBounds() {        if (mDrawable == null || !mHaveFrame) {            return;        }        final int dwidth = mDrawableWidth;        final int dheight = mDrawableHeight;        final int vwidth = getWidth() - mPaddingLeft - mPaddingRight;        final int vheight = getHeight() - mPaddingTop - mPaddingBottom;        final boolean fits = (dwidth < 0 || vwidth == dwidth)                && (dheight < 0 || vheight == dheight);        if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {            /* If the drawable has no intrinsic size, or we're told to                scaletofit, then we just fill our entire view.            */            mDrawable.setBounds(0, 0, vwidth, vheight);            mDrawMatrix = null;        } else {            ......        }   }

我们看到这么一行代码：

mDrawable.setBounds(0, 0, vwidth, vheight);

当为fitxy的时候给mDrawable(也就是我们设置的那张图片)设置了bounds为vwidth，vheight，也就是控件的宽高。所以fitxy时才会铺满整个屏幕的。

搞懂了fitxy，那么matrix又是怎么样的呢？
我们看看onDraw方法：

@Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if (mDrawable == null) {            return; // couldn't resolve the URI        }        if (mDrawableWidth == 0 || mDrawableHeight == 0) {            return;     // nothing to draw (empty bounds)        }        if (mDrawMatrix == null && mPaddingTop == 0 && mPaddingLeft == 0) {            mDrawable.draw(canvas);        } else {            final int saveCount = canvas.getSaveCount();            canvas.save();            if (mCropToPadding) {                final int scrollX = mScrollX;                final int scrollY = mScrollY;                canvas.clipRect(scrollX + mPaddingLeft, scrollY + mPaddingTop,                        scrollX + mRight - mLeft - mPaddingRight,                        scrollY + mBottom - mTop - mPaddingBottom);            }            canvas.translate(mPaddingLeft, mPaddingTop);            if (mDrawMatrix != null) {                canvas.concat(mDrawMatrix);            }            mDrawable.draw(canvas);            canvas.restoreToCount(saveCount);        }    }

有点长，我们看到有一行代码：

if (mDrawMatrix != null) {                canvas.concat(mDrawMatrix);            }

canvas.concat(mDrawMatrix);是指给canvas做一些改变，比如缩放、平移…… 也就是说源码中通过我们设置的scaleType来通过算法计算mDrawMatrix ，然后再onDraw方法中赋给了canvas，但是我们重写了onDraw方法，也就是说mDrawMatrix 压根就不起作用了，所以当我们在RoundImageView中执行

//最后把我们准备好的Bitmap画在canvas上        canvas.drawBitmap(bitmap,0,0,null);

的时候，图片就是默认不缩放，原图从控件的左上角开始摆放的。
到此，我们终于弄懂了我们遇到的问题，既然遇到了，那我们就解决下问题。

我们看看ImageView到底是怎么缩放图片的：

 private void configureBounds() {        if (mDrawable == null || !mHaveFrame) {            return;        }        final int dwidth = mDrawableWidth;        final int dheight = mDrawableHeight;        final int vwidth = getWidth() - mPaddingLeft - mPaddingRight;        final int vheight = getHeight() - mPaddingTop - mPaddingBottom;        final boolean fits = (dwidth < 0 || vwidth == dwidth)                && (dheight < 0 || vheight == dheight);        if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {            /* If the drawable has no intrinsic size, or we're told to                scaletofit, then we just fill our entire view.            */            mDrawable.setBounds(0, 0, vwidth, vheight);            mDrawMatrix = null;        } else {            // We need to do the scaling ourself, so have the drawable            // use its native size.            mDrawable.setBounds(0, 0, dwidth, dheight);            if (ScaleType.MATRIX == mScaleType) {                // Use the specified matrix as-is.                if (mMatrix.isIdentity()) {                    mDrawMatrix = null;                } else {                    mDrawMatrix = mMatrix;                }            } else if (fits) {                // The bitmap fits exactly, no transform needed.                mDrawMatrix = null;            } else if (ScaleType.CENTER == mScaleType) {                // Center bitmap in view, no scaling.                mDrawMatrix = mMatrix;                mDrawMatrix.setTranslate(Math.round((vwidth - dwidth) * 0.5f),                                         Math.round((vheight - dheight) * 0.5f));            } else if (ScaleType.CENTER_CROP == mScaleType) {                mDrawMatrix = mMatrix;                float scale;                float dx = 0, dy = 0;                if (dwidth * vheight > vwidth * dheight) {                    scale = (float) vheight / (float) dheight;                    dx = (vwidth - dwidth * scale) * 0.5f;                } else {                    scale = (float) vwidth / (float) dwidth;                    dy = (vheight - dheight * scale) * 0.5f;                }                mDrawMatrix.setScale(scale, scale);                mDrawMatrix.postTranslate(Math.round(dx), Math.round(dy));            } else if (ScaleType.CENTER_INSIDE == mScaleType) {                mDrawMatrix = mMatrix;                float scale;                float dx;                float dy;                if (dwidth <= vwidth && dheight <= vheight) {                    scale = 1.0f;                } else {                    scale = Math.min((float) vwidth / (float) dwidth,                            (float) vheight / (float) dheight);                }                dx = Math.round((vwidth - dwidth * scale) * 0.5f);                dy = Math.round((vheight - dheight * scale) * 0.5f);                mDrawMatrix.setScale(scale, scale);                mDrawMatrix.postTranslate(dx, dy);            } else {                // Generate the required transform.                mTempSrc.set(0, 0, dwidth, dheight);                mTempDst.set(0, 0, vwidth, vheight);                mDrawMatrix = mMatrix;                mDrawMatrix.setRectToRect(mTempSrc, mTempDst, scaleTypeToScaleToFit(mScaleType));            }        }    }

就是我们上面所说的，先通过我们设置的scaleType计算mDrawMatrix，
然后再onDraw方法中赋给canvans，再贴一遍ImageView的onDraw方法。

@Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if (mDrawable == null) {            return; // couldn't resolve the URI        }        if (mDrawableWidth == 0 || mDrawableHeight == 0) {            return;     // nothing to draw (empty bounds)        }        if (mDrawMatrix == null && mPaddingTop == 0 && mPaddingLeft == 0) {            mDrawable.draw(canvas);        } else {            final int saveCount = canvas.getSaveCount();            canvas.save();            if (mCropToPadding) {                final int scrollX = mScrollX;                final int scrollY = mScrollY;                canvas.clipRect(scrollX + mPaddingLeft, scrollY + mPaddingTop,                        scrollX + mRight - mLeft - mPaddingRight,                        scrollY + mBottom - mTop - mPaddingBottom);            }            canvas.translate(mPaddingLeft, mPaddingTop);            if (mDrawMatrix != null) {                canvas.concat(mDrawMatrix);            }            mDrawable.draw(canvas);            canvas.restoreToCount(saveCount);        }    }

我们自己重写了onDraw方法，也就是我们只需要像ImageView一样，把configureBounds方法搬到我们的控件中就可以了，好了，我们试试：

@Override    protected void onDraw(Canvas canvas) {        Bitmap bitmap = mWeakReference==null?null:mWeakReference.get();        if(bitmap==null || bitmap.isRecycled()){            //获取一下设置的图片资源            Drawable drawable=getDrawable();            if(drawable!=null){                //创建一个空白画布，用来画模板跟原图                bitmap=Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);                ////修改过的代码                Matrix matrix=null;                Canvas dstCanvas=new Canvas(bitmap);                dstCanvas.save();                if (getScaleType()==ScaleType.FIT_XY){                    drawable.setBounds(0,0,getWidth(),getHeight());                    matrix=null;                }else{                    matrix=new Matrix();                    configureBounds(drawable,matrix);                }                if(matrix!=null){                    dstCanvas.concat(matrix);                }                drawable.draw(dstCanvas);                dstCanvas.restore();                ////修改过的代码                //画模板                if(mMaskBitmap==null||mMaskBitmap.isRecycled()){                    mMaskBitmap=getShapeBitmap();                }                dstCanvas.drawBitmap(mMaskBitmap,0,0,mPaint);                mPaint.setXfermode(null);            }        }        //最后把我们准备好的Bitmap画在canvas上        canvas.drawBitmap(bitmap,0,0,null);    }

private void configureBounds(Drawable drawable, Matrix matrix) {        ScaleType mScaleType = getScaleType();        //获取图片的宽高        int dwidth = drawable.getIntrinsicWidth();        int dheight = drawable.getIntrinsicHeight();        int vwidth =getWidth();        int vheight = getHeight();        if (ScaleType.MATRIX == mScaleType) {            /////        } else if (ScaleType.CENTER_CROP == mScaleType) {            float scale;            float dx = 0, dy = 0;            if (dwidth * vheight > vwidth * dheight) {                scale = (float) vheight / (float) dheight;                dx = (vwidth - dwidth * scale) * 0.5f;            } else {                scale = (float) vwidth / (float) dwidth;                dy = (vheight - dheight * scale) * 0.5f;            }            matrix.setScale(scale, scale);            matrix.postTranslate(Math.round(dx), Math.round(dy));        } else if (ScaleType.CENTER_INSIDE == mScaleType) {            float scale;            float dx;            float dy;            if (dwidth <= vwidth && dheight <= vheight) {                scale = 1.0f;            } else {                scale = Math.min((float) vwidth / (float) dwidth,                        (float) vheight / (float) dheight);            }            dx = Math.round((vwidth - dwidth * scale) * 0.5f);            dy = Math.round((vheight - dheight * scale) * 0.5f);            matrix.setScale(scale, scale);            matrix.postTranslate(dx, dy);        } else {            matrix.setRectToRect(new RectF(drawable.getBounds()), new RectF(0, 0, getWidth(), getHeight()), scaleTypeToScaleToFit(mScaleType));        }    }

直接拖的ImageView的源码，不要问我算法为什么是这样，我也研究了蛮久，数学不好(^__^) 嘻嘻……

到这又郁闷了，scaleTypeToScaleToFit方法没法copy了，怎么办？ 反射呗！说干咱就干。

 private Matrix.ScaleToFit scaleTypeToScaleToFit(ScaleType mScaleType) {        Class mClass=ImageView.class;        try {            Method method = mClass.getDeclaredMethod("scaleTypeToScaleToFit", new Class[]{ScaleType.class});            method.setAccessible(true);            if(method!=null){                Matrix.ScaleToFit fit = (Matrix.ScaleToFit) (method.invoke(null, new Object[]{mScaleType}));                return fit;            }        } catch (Exception e) {            e.printStackTrace();        }        return Matrix.ScaleToFit.FILL;    }

不懂的童鞋自己去脑补下javase的东西哈！！

到此算是写完了，我们再次运行代码：

终于是完美的呈现了，从来没写过这么长的博客，小伙伴默默点个赞哈，大牛勿喷！！(^__^) 嘻嘻……

最后附上github地址：https://github.com/913453448/CircleViewDemo