面試官：怎麼加載巨圖不撐爆內存？打臉現場！

還記得當年面試一個面試官問我怎麼加載巨圖才能不撐爆內存，我沒回答上來，他說分片顯示，我尋思特麼分片能減少內存使用？？現在可以打他臉了！

Android開發中，有時候會有加載巨圖的需求，如何加載一個大圖而不產生OOM呢？

使用系統提供的BitmapRegionDecoder這個類可以很輕鬆的完成！

效果圖：

BitmapRegionDecoder：區域解碼器，可以用來解碼一個矩形區域的圖像，有了這個我們就可以自定義一塊矩形的區域，然後根據手勢來移動矩形區域的位置就能慢慢看到整張圖片了。

OK 核心原理就是這麼簡單，不過做起來還是有一些細節處理，下面就一步一步的完成一個加載大圖，支持拖動查看，雙擊放大，手勢縮放的的自定義View。

第一步，初始化變量

<code>private void init(){
    mOptions = new BitmapFactory.Options();
    //滑動器
    mScroller = new Scroller(getContext());
    //所放器
    mMatrix = new Matrix();
    //手勢識別
    mGestureDetector = new GestureDetector(getContext(),this);
    mScaleGestureDetector = new ScaleGestureDetector(getContext(),this);
}

/<code>

BitmapFactory.Options我們很熟悉，用來配置Bitmap相關的參數，比如獲取Bitmap的寬高，內存複用等參數。

GestureDetector用來識別雙擊事件，ScaleGestureDetector用來監聽手指的縮放事件，都是系統提供的類，比較方便使用。

第二步，設置需要加載的圖片

<code>public void setImage(InputStream is){
    mOptions.inJustDecodeBounds = true;
    BitmapFactory.decodeStream(is,null,mOptions);
    mImageWidth = mOptions.outWidth;
    mImageHeight = mOptions.outHeight;
    mOptions.inPreferredConfig = Bitmap.Config.RGB_565;
    mOptions.inJustDecodeBounds = false;
    try {
        //區域解碼器
        mRegionDecoder = BitmapRegionDecoder.newInstance(is,false);
    } catch (IOException e) {
        e.printStackTrace();
    }
    requestLayout();
}

/<code>

設置需要要加載的圖片，無論圖片放到哪裡都可以拿到圖片的一個輸入流，所以參數使用輸入流，通過BitmapFactory.Options拿到圖片的真實寬高。

inPreferredConfig這個參數默認是Bitmap.Config.ARGB_8888，這裡將它改成Bitmap.Config.RGB_565，去掉透明通道，可以減少一半的內存使用。最後初始化區域解碼器BitmapRegionDecoder。

ARGB_8888就是由4個8位組成即32位， RGB_565就是R為5位，G為6位，B為5位共16位

第三步，獲取View的寬高，計算縮放值

<code>@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mViewWidth = w;
    mViewHeight = h;
    mRect.top = 0;
    mRect.left = 0;
    mRect.right = (int) mViewWidth;
    mRect.bottom = (int) mViewHeight; 

    mScale = mViewWidth/mImageWidth;
    mCurrentScale = mScale;
}

/<code>

onSizeChanged方法在佈局期間，當此視圖的大小發生更改時，將調用此方法，第一次在onMeasure之後調用，可以方便的拿到View的寬高。

然後給我們自定義的矩形mRect的上下左右的邊界賦值。一般情況下我們使用這個自定義的View顯示大圖，都是佔滿這個View，所以這裡矩形初始大小就讓它跟View一樣大。

mScale用來記錄原始的所方比，mCurrentScale用來記錄當前的所方比，因為有雙擊放大和手勢縮放，mCurrentScale隨著手勢變化。

第四步，繪製

<code>@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if(mRegionDecoder == null){
        return;
    }
    //複用內存
    mOptions.inBitmap = mBitmap;
    mBitmap = mRegionDecoder.decodeRegion(mRect,mOptions);
    mMatrix.setScale(mCurrentScale,mCurrentScale);
    canvas.drawBitmap(mBitmap,mMatrix,null);
}

/<code>

繪製也很簡單，通過區域解碼器解碼一個矩形的區域，返回一個Bitmap對象，然後通過canvas繪製Bitmap。需要注意mOptions.inBitmap = mBitmap;這個配置可以複用內存，保證內存的使用一直只是矩形的這塊區域。

到這裡運行就能繪製出一部分圖片了，想要看全部的圖片，需要手指拖動來看，這就需要處理各種事件了。

第五步，分發事件

<code>@Override
public boolean onTouchEvent(MotionEvent event) {
    mGestureDetector.onTouchEvent(event);

    mScaleGestureDetector.onTouchEvent(event);
    return true;
}

/<code>

onTouchEvent中很簡單，事件都交給兩個手勢檢測器自己去處理。

第六步，處理GestureDetector中的事件

<code>@Override
public boolean onDown(MotionEvent e) {
    //如果正在滑動，先停止
    if(!mScroller.isFinished()){
        mScroller.forceFinished(true);
    }
    return true;
}

/<code>

當手指按下的時候，如果圖片正在飛速滑動，那麼停止

<code>@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    //滑動的時候，改變mRect顯示區域的位置
    mRect.offset((int)distanceX,(int)distanceY);
    //處理上下左右的邊界 

    if(mRect.left<0){
        mRect.left = 0;
        mRect.right = (int) (mViewWidth/mCurrentScale);
    }
    if(mRect.right>mImageWidth){
        mRect.right = (int) mImageWidth;
        mRect.left = (int) (mImageWidth-mViewWidth/mCurrentScale);
    }
    if(mRect.top<0){
        mRect.top = 0;
        mRect.bottom = (int) (mViewHeight/mCurrentScale);
    }
    if(mRect.bottom>mImageHeight){
        mRect.bottom = (int) mImageHeight;
        mRect.top = (int) (mImageHeight-mViewHeight/mCurrentScale);
    }
    invalidate();
    return false;
}

/<code>

onScroll中處理滑，根據手指移動的參數，來移動矩形繪製區域，這裡需要處理各個邊界點，比如左邊最小就為0，右邊最大為圖片的寬度，不能超出邊界否則就報錯了。

<code>@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
    mScroller.fling(mRect.left,mRect.top,-(int)velocityX,-(int)velocityY,0,(int)mImageWidth
            ,0,(int)mImageHeight);
    return false;
}

@Override
public void computeScroll() {
    super.computeScroll();
    if(!mScroller.isFinished()&&mScroller.computeScrollOffset()){
        if(mRect.top+mViewHeight/mCurrentScale<mimageheight>            mRect.top = mScroller.getCurrY();
            mRect.bottom = (int) (mRect.top + mViewHeight/mCurrentScale);
        }
        if(mRect.bottom>mImageHeight) {
            mRect.top = (int) (mImageHeight - mViewHeight/mCurrentScale);
            mRect.bottom = (int) mImageHeight;
        }
        invalidate(); 

    }
}

/<mimageheight>/<code>

在onFling方法中調用滑動器Scroller的fling方法來處理手指離開之後慣性滑動。慣性移動的距離在View的computeScroll()方法中計算，也需要注意邊界問題，不要滑出邊界。

第七步，處理雙擊事件

<code>@Override
public boolean onDoubleTap(MotionEvent e) {
    //處理雙擊事件
    if (mCurrentScale>mScale){
        mCurrentScale = mScale;
    } else {
        mCurrentScale = mScale*mMultiple;
    }
    mRect.right = mRect.left+(int)(mViewWidth/mCurrentScale);
    mRect.bottom = mRect.top+(int)(mViewHeight/mCurrentScale);
    //處理邊界
    if(mRect.left<0){
        mRect.left = 0;
        mRect.right = (int) (mViewWidth/mCurrentScale);
    }
    if(mRect.right>mImageWidth){
        mRect.right = (int) mImageWidth;
        mRect.left = (int) (mImageWidth-mViewWidth/mCurrentScale);
    }
    if(mRect.top<0){
        mRect.top = 0;
        mRect.bottom = (int) (mViewHeight/mCurrentScale);
    }
    if(mRect.bottom>mImageHeight){
        mRect.bottom = (int) mImageHeight;
        mRect.top = (int) (mImageHeight-mViewHeight/mCurrentScale);
    }

    invalidate();
    return true;
}

/<code>

mMultiple為雙擊之後放大幾倍，這裡設置3倍。第一次雙擊放大3倍，第二次雙擊返回原狀。縮放完成之後，需要根據當前的縮放比重新設置繪製區域的邊界。最後也需要重新定位一下邊界，因為如果使用兩個手指放大之後，這時候雙擊返回原狀，如果不處理邊界，位置會出錯。處理邊界的代碼可以抽取出來。

第八步，處理手指縮放事件

<code>@Override
public boolean onScale(ScaleGestureDetector detector) {
    //處理手指縮放事件
    //獲取與上次事件相比，得到的比例因子
    float scaleFactor = detector.getScaleFactor();
//        mCurrentScale+=scaleFactor-1;
    mCurrentScale*=scaleFactor;
    if(mCurrentScale>mScale*mMultiple){
        mCurrentScale = mScale*mMultiple;
    }else if(mCurrentScale<=mScale){
        mCurrentScale = mScale;
    }
    mRect.right = mRect.left+(int)(mViewWidth/mCurrentScale);
    mRect.bottom = mRect.top+(int)(mViewHeight/mCurrentScale);
    invalidate();
    return true;
}

@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
    //當 >= 2 個手指碰觸屏幕時調用，若返回 false 則忽略改事件調用
    return true;
}

/<code>

onScaleBegin方法需要返回true，否則無法檢測到手勢縮放。onScale方法中獲取縮放因子，這個縮放因子是跟上次事件相比的出來的。所以這裡使用*=，完成之後也需要重新設置繪製區域mRect的邊界。

到這裡各種功能就完成啦~

源碼

最後

對於程序員來說，要學習的知識內容、技術有太多太多，要想不被環境淘汰就只有不斷提升自己，從來都是我們去適應環境，而不是環境來適應我們！

這裡附上上述的面試題相關的幾十套字節跳動，京東，小米，騰訊、頭條、阿里、美團等公司19年的面試題。把技術點整理成了視頻和PDF（實際上比預期多花了不少精力），包含知識脈絡 + 諸多細節。

由於篇幅有限，這裡以圖片的形式給大家展示一小部分。

Android架構視頻+BAT面試專題PDF+學習筆記​

需要共享的小夥伴可以後臺私信我關鍵詞【視頻教程】或者【面試資料】，免費共享！

網上學習 Android的資料一大堆，但如果學到的知識不成體系，遇到問題時只是淺嘗輒止，不再深入研究，那麼很難做到真正的技術提升。希望這份系統化的技術體系對大家有一個方向參考。

技術進階之路很漫長，一起共勉吧~

閱讀更多 架構師的搖籃 的文章

關鍵字: 巨圖 Android 內存