Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android圓角圓形圖(支持各種scaleType 二)

Android圓角圓形圖(支持各種scaleType 二)

編輯:關於Android編程

接著上一篇的問題來研究研究:
**問題來了:效果是有了,但有發現麼?我設置的scaleType只有fitxy
是有效果的,其他的都沒有效果了。設置為其他的scaleType都變成matrix那種效果了,也就是圖片默認從控件的左上角開始擺放。**

我們先看看ImageView的scaleType

以下內容來自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
這裡寫圖片描述vcTYo788L3N0cm9uZz48YnIgLz4NCs7Sw8e/tL+0SW1hZ2VWaWV31LTC6zwvcD4NCjxwcmUgY2xhc3M9"brush:java;"> 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

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved