圖片基礎知識梳理(1) ImageView 的 ScaleType 屬性解析

澤毛發表於2017-12-21
原文網址 : https://juejin.im/post/5a30fa7ff265da4304069d5b
View

一、概述

在使用ImageView的過程當中，經常需要通過scaleType來對原始的影象進行處理，使得它能在空間中合理地展示。

二、scaleType的分類

首先，我們簡單介紹一下scaleType的分類：

2.1 通過Matrix設定

這種情況下，對應的模式只有一種：

  • ScaleType.MATRIX

最終，在這種情況下，我們可以同setImageMatrix(Matrix matrix)來改變。

2.2 填充型別

這一類屬性的特點就是通過拉伸或者壓縮圖片，使得原圖片中所有元素都能夠展現，並且至少填滿控制元件x,y軸的其中一個。 一共有四類：

  • ScaleType.FIX_XY：不考慮原圖的比例，拉伸或者壓縮使得它等於控制元件的寬高。

下面三種都會維持原圖的比例，使得它們的x,y都小於等於控制元件的寬高，只是最終的圖形放的位置不同。

  • ScaleType.FIT_START：放置在左上角。
  • ScaleType.FIT_CENTER：放置在中間。
  • ScaleType.FIT_END：放置在右下角。

2.3 中心重合型別

下面的三種型別都會使得控制元件的中心和圖片中心重合：

  • ScaleType.CENTER 要求一點：

  • 原圖的中心和控制元件的中心重合

  • ScaleType.CENTER_CROP 要求三點：

  • 整個控制元件能夠被填滿

  • 原圖的比例不變

  • 原圖的中心和控制元件的中心重合。

  • 保證原圖的x,y軸上的元素至少有一個在控制元件中能被完全展示，那麼有一下兩種情況，在下面的操作做完之後，裁剪掉多餘的部分：

    • 如果原圖沒有填滿控制元件，那麼會慢慢按比例放大，直到填滿控制元件；
    • 如果原圖已經填滿控制元件，那麼它會慢慢縮小，直到某一邊和控制元件重合。

  • ScaleType.CENTER_INSIDE 要求三點：

  • 原圖的所有畫素位於控制元件內部

  • 原圖的比例不變

  • 圖片的中心和控制元件的中心重合。

它不要求原始圖片填滿x,y軸的任意一個，因此，如果原圖的長寬都小於等於控制元件的長寬，不會進行放大操作，這也是它和ScaleType.FIT_CENTER的區別。

三、示例

下面，我們通過一個簡單的Demo來展示一下各種型別的具體表現，我們有兩個大小一樣的ImageView和兩個大小不同的原圖，其中左邊的ImageView要比原圖小，右邊的ImageView要比原圖大。

  • ScaleType.FIX_XY：
    圖片基礎知識梳理(1) ImageView 的 ScaleType 屬性解析
  • ScaleType.FIT_START：
    圖片基礎知識梳理(1) ImageView 的 ScaleType 屬性解析
  • ScaleType.FIT_CENTER
    圖片基礎知識梳理(1) ImageView 的 ScaleType 屬性解析
  • ScaleType.FIT_END
    圖片基礎知識梳理(1) ImageView 的 ScaleType 屬性解析
  • ScaleType.CENTER
    圖片基礎知識梳理(1) ImageView 的 ScaleType 屬性解析
  • ScaleType.CENTER_CROP
    圖片基礎知識梳理(1) ImageView 的 ScaleType 屬性解析
  • ScaleType.CENTER_INSIDE
    圖片基礎知識梳理(1) ImageView 的 ScaleType 屬性解析

四、原始碼分析

4.1 給ImageVIew設定src的介面

在ImageView當中，設定圖片的介面主要有下面幾個函式：

public void setImageBitmap(Bitmap bm)
public void setImageResource(@DrawableRes int resId)
public void setImageURI(@Nullable Uri uri)
public void setImageDrawable(@Nullable Drawable drawable)
複製程式碼

4.2 setImageBitmap的流程

我們就以平時常用的setImageBitmap為例，分析一下它整個的流程：

  • 第一步：當我們呼叫setImageBitmap之後，它會把Bitmap封裝在BitmapDrawable當中，之後呼叫了setImageDrawable(Drawable drawable)方法：
    public void setImageBitmap(Bitmap bm) {
        mDrawable = null;
        if (mRecycleableBitmapDrawable == null) {
            mRecycleableBitmapDrawable = new BitmapDrawable(mContext.getResources(), bm);
        } else {
            mRecycleableBitmapDrawable.setBitmap(bm);
        }
        setImageDrawable(mRecycleableBitmapDrawable);
    }
複製程式碼
  • 第二步：呼叫setImageDrawable
    public void setImageDrawable(@Nullable Drawable drawable) {
        //如果不是同一個資源.
        if (mDrawable != drawable) {
            mResource = 0;
            mUri = null;
            //舊的寬高.
            final int oldWidth = mDrawableWidth;
            final int oldHeight = mDrawableHeight;
            //關鍵方法
            updateDrawable(drawable);
            //如果寬高不同，才請求重新佈局.
            if (oldWidth != mDrawableWidth || oldHeight != mDrawableHeight) {
                requestLayout();
            }
            //只要替換了資源就需要重新繪製.
            invalidate();
        }
    }
複製程式碼

上面的關鍵方法在updateDrawable當中：

    private void updateDrawable(Drawable d) {
        //....
        if (d != null) {
            //...
            //這裡面根據scaleType配置mDrawMatrix.
            configureBounds();
        } else {
            mDrawableWidth = mDrawableHeight = -1;
        }
    }
複製程式碼

4.3 configureBounds改變Matrix

在configureBounds裡就會根據我們所配置的scaleType來決定mDrawable如何顯示，在這裡面有一個重要的變數mDrawMatrix，我們前面說到的所有變換都是通過它來實現的，當然，我們除了可以讓系統自己根據scaleType來生成matrix，也可以通過setImageMatrix手動的指定自己的變換：

    private void configureBounds() {
        if (mDrawable == null || !mHaveFrame) {
            return;
        }
　     //1.得到原始資源的寬高.
        final int dwidth = mDrawableWidth;
        final int dheight = mDrawableHeight;
        //2.得到控制元件的寬高，這裡去掉了控制元件的padding.
        final int vwidth = getWidth() - mPaddingLeft - mPaddingRight;
        final int vheight = getHeight() - mPaddingTop - mPaddingBottom;

        //3.表示原始資源已經能夠填滿控制元件.
        final boolean fits = (dwidth < 0 || vwidth == dwidth)
                && (dheight < 0 || vheight == dheight);

        //4.假如有一邊是wrap_content，或者是FIX_XY，那麼填滿整個控制元件.
        if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {
            mDrawable.setBounds(0, 0, vwidth, vheight);
            mDrawMatrix = null;
        } else {
            mDrawable.setBounds(0, 0, dwidth, dheight);
            //如果scaleType是matrix.
            if (ScaleType.MATRIX == mScaleType) {
                //單位矩陣的情況，設為null.
                if (mMatrix.isIdentity()) {
                    mDrawMatrix = null;
                } else {
                    //否則最後的DrawMatrix就是我們傳入的Matrix.
                    mDrawMatrix = mMatrix;
                }
            } else if (fits) {
                //如果原始資源已經填滿控制元件，那麼不需要考慮其它的變換了.
                mDrawMatrix = null;
            } else if (ScaleType.CENTER == mScaleType) {
                //當scaleType為center的時候.
                mDrawMatrix = mMatrix;
                //移動到中心，初始時候，控制元件和原始資源的(0,0)點是重合的.
                mDrawMatrix.setTranslate(Math.round((vwidth - dwidth) * 0.5f), Math.round((vheight - dheight) * 0.5f));
            } else if (ScaleType.CENTER_CROP == mScaleType) {
                mDrawMatrix = mMatrix;
                //當scaleType是centerCrop的時候.
                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) {
                //當scaleType是centetInside時
                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 {
                //設定兩個區域的大小.
                mTempSrc.set(0, 0, dwidth, dheight);
                mTempDst.set(0, 0, vwidth, vheight);
                mDrawMatrix = mMatrix;
                //這裡處理FIX_START,FIX_END,FIX_CENTER的情況.
                mDrawMatrix.setRectToRect(mTempSrc, mTempDst, scaleTypeToScaleToFit(mScaleType));
            }
        }
    }
複製程式碼

4.4 onDraw中進行繪製

那麼這個mDrawMatrix是在什麼時候使用的呢，我們看一下onDraw方法：

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        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);
            }
            //移動到去掉padding的左上角.
            canvas.translate(mPaddingLeft, mPaddingTop);
            //根據mDrawMatrix進行變換.
            if (mDrawMatrix != null) {
                canvas.concat(mDrawMatrix);
            }
            //再在這個變換上面繪製我們的資源.
            mDrawable.draw(canvas);
            //把合成完成的圖片繪製上去.
            canvas.restoreToCount(saveCount);
        }
    }
複製程式碼

4.5 小結

我們總結一下，整個scaleType的原理就是在configureBounds中配置了mDrawMatrix，而在onDraw當中會根據mDrawMatrix來對圖層進行變換，在這個變換之後的圖層上進行繪製mDrawable，之後再恢復圖層。

五、ImageView的src和background的區別

上面，我們看到的都是src設定的效果，我們回憶一下，通過設定android:background也可以設定一個圖片給它，其實background是View的屬性，在我們之前分析View的繪製流程的時候，draw(canvas)中有一步就是繪製背景：

    private void drawBackground(Canvas canvas) {
        //1.設定背景的邊界.
        setBackgroundBounds();
       //2.如果有滾動，那麼背景需要相應的滾動.
        final int scrollX = mScrollX;
        final int scrollY = mScrollY;
        if ((scrollX | scrollY) == 0) {
            background.draw(canvas);
        } else {
            canvas.translate(scrollX, scrollY);
            //3.繪製背景.
            background.draw(canvas);
            canvas.translate(-scrollX, -scrollY);
        }
    }
複製程式碼

我們來看一下設定背景的邊界的函式，可以看到，這裡沒有考慮padding值，也就是說我們通過background設定的圖片是填滿整個控制元件，並且不考慮padding的：

    void setBackgroundBounds() {
        if (mBackgroundSizeChanged && mBackground != null) {
            //沒有考慮padding部分.
            mBackground.setBounds(0, 0, mRight - mLeft, mBottom - mTop);
            mBackgroundSizeChanged = false;
            rebuildOutline();
        }
    }
複製程式碼

最後再結合一下第四節的知識，我們是先繪製背景，然後才在ImageView的onDraw函式當中在canvas上繪製的，因此，src的圖片一定會繪製在backgroud之上。

相關文章