碼個蛋(codeegg) 第 838 次推文
鏈接：https://juejin.im/post/5dfcc561f265da33dd2f60d8
碼妞看世界
你瞅啥？還不趕快寫改bug！
寫在前面
Android開發中，有時候會有加載巨圖的需求，如何加載一個大圖而不產生OOM呢，使用系統提供的BitmapRegionDecoder這個類可以很輕鬆的完成。
效果圖：
BitmapRegionDecoder：區域解碼器，可以用來解碼一個矩形區域的圖像，有了這個我們就可以自定義一塊矩形的區域，然後根據手勢來移動矩形區域的位置就能慢慢看到整張圖片了。
OK 核心原理就是這麼簡單，不過做起來還是有一些細節處理，下面就一步一步的完成一個加載大圖，支持拖動查看，雙擊放大，手勢縮放的的自定義View。
第一步，初始化變量
<code>private void init{/<code><code> mOptions = new BitmapFactory.Options;/<code><code> //滑動器/<code><code> mScroller = new Scroller(getContext);/<code><code> //所放器/<code><code> mMatrix = new Matrix;/<code><code> //手勢識別/<code><code> mGestureDetector = new GestureDetector(getContext,this);/<code><code> mScaleGestureDetector = new ScaleGestureDetector(getContext,this);/<code><code>}/<code>BitmapFactory.Options我們很熟悉，用來配置Bitmap相關的參數，比如獲取Bitmap的寬高，內存複用等參數。
GestureDetector用來識別雙擊事件，ScaleGestureDetector用來監聽手指的縮放事件，都是系統提供的類，比較方便使用。
第二步，設置需要加載的圖片
<code>public void setImage(InputStream is){/<code><code> mOptions.inJustDecodeBounds = true;/<code><code> BitmapFactory.decodeStream(is,,mOptions);/<code><code> mImageWidth = mOptions.outWidth;/<code><code> mImageHeight = mOptions.outHeight;/<code><code> mOptions.inPreferredConfig = Bitmap.Config.RGB_565;/<code><code> mOptions.inJustDecodeBounds = false;/<code><code> try {/<code><code> //區域解碼器/<code><code> mRegionDecoder = BitmapRegionDecoder.newInstance(is,false);/<code><code> } catch (IOException e) {/<code><code> e.printStackTrace;/<code><code> }/<code><code> requestLayout;/<code><code>}/<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/<code><code>protected void onSizeChanged(int w, int h, int oldw, int oldh) {/<code><code> super.onSizeChanged(w, h, oldw, oldh);/<code><code> mViewWidth = w;/<code><code> mViewHeight = h;/<code><code> mRect.top = 0;/<code><code> mRect.left = 0;/<code><code> mRect.right = (int) mViewWidth;/<code><code> mRect.bottom = (int) mViewHeight;/<code><code> mScale = mViewWidth/mImageWidth;/<code><code> mCurrentScale = mScale;/<code><code>}/<code>onSizeChanged方法在佈局期間，當此視圖的大小發生更改時，將調用此方法，第一次在onMeasure之後調用，可以方便的拿到View的寬高。
然後給我們自定義的矩形mRect的上下左右的邊界賦值。一般情況下我們使用這個自定義的View顯示大圖，都是佔滿這個View，所以這裡矩形初始大小就讓它跟View一樣大。
mScale用來記錄原始的所方比，mCurrentScale用來記錄當前的所方比，因為有雙擊放大和手勢縮放，mCurrentScale隨著手勢變化。
第四步，繪製
<code>@Override/<code><code>protected void onDraw(Canvas canvas) {/<code><code> super.onDraw(canvas);/<code><code> if(mRegionDecoder == ){/<code><code> return;/<code><code> }/<code><code> //複用內存/<code><code> mOptions.inBitmap = mBitmap;/<code><code> mBitmap = mRegionDecoder.decodeRegion(mRect,mOptions);/<code><code> mMatrix.setScale(mCurrentScale,mCurrentScale);/<code><code> canvas.drawBitmap(mBitmap,mMatrix,);/<code><code>}/<code>繪製也很簡單，通過區域解碼器解碼一個矩形的區域，返回一個Bitmap對象，然後通過canvas繪製Bitmap。需要注意mOptions.inBitmap = mBitmap;這個配置可以複用內存，保證內存的使用一直只是矩形的這塊區域。
到這裡運行就能繪製出一部分圖片了，想要看全部的圖片，需要手指拖動來看，這就需要處理各種事件了。
第五步，分發事件
<code>@Override/<code><code>public boolean onTouchEvent(MotionEvent event) {/<code><code> mGestureDetector.onTouchEvent(event);/<code>
<code> mScaleGestureDetector.onTouchEvent(event);/<code><code> return true;/<code><code>}/<code>onTouchEvent中很簡單，事件都交給兩個手勢檢測器自己去處理。
第六步，處理GestureDetector中的事件
<code>@Override/<code><code>public boolean onDown(MotionEvent e) {/<code><code> //如果正在滑動，先停止/<code><code> if(!mScroller.isFinished){/<code><code> mScroller.forceFinished(true);/<code><code> }/<code><code> return true;/<code><code>}/<code> 當手指按下的時候，如果圖片正在飛速滑動，那麼停止
<code>@Override/<code><code>public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {/<code><code> //滑動的時候，改變mRect顯示區域的位置/<code><code> mRect.offset((int)distanceX,(int)distanceY);/<code><code> //處理上下左右的邊界/<code><code> if(mRect.left<0){/<code><code> mRect.left = 0;/<code><code> mRect.right = (int) (mViewWidth/mCurrentScale);/<code><code> }/<code><code> if(mRect.right>mImageWidth){/<code><code> mRect.right = (int) mImageWidth;/<code><code> mRect.left = (int) (mImageWidth-mViewWidth/mCurrentScale);/<code><code> }/<code><code> if(mRect.top<0){/<code><code> mRect.top = 0;/<code><code> mRect.bottom = (int) (mViewHeight/mCurrentScale);/<code><code> }/<code><code> if(mRect.bottom>mImageHeight){/<code><code> mRect.bottom = (int) mImageHeight;/<code><code> mRect.top = (int) (mImageHeight-mViewHeight/mCurrentScale);/<code><code> }/<code><code> invalidate;/<code><code> return false;/<code><code>}/<code>onScroll中處理滑，根據手指移動的參數，來移動矩形繪製區域，這裡需要處理各個邊界點，比如左邊最小就為0，右邊最大為圖片的寬度，不能超出邊界否則就報錯了。
<code>@Override/<code><code>public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {/<code><code> mScroller.fling(mRect.left,mRect.top,-(int)velocityX,-(int)velocityY,0,(int)mImageWidth/<code><code> ,0,(int)mImageHeight);/<code><code> return false;/<code><code>}/<code>
<code>@Override/<code><code>public void computeScroll {/<code><code> super.computeScroll;/<code><code> if(!mScroller.isFinished&&mScroller.computeScrollOffset){/<code><code> if(mRect.top+mViewHeight/mCurrentScale<mimageheight><code> mRect.top = mScroller.getCurrY;/<code><code> mRect.bottom = (int) (mRect.top + mViewHeight/mCurrentScale);/<code><code> }/<code><code> if(mRect.bottom>mImageHeight) {/<code><code> mRect.top = (int) (mImageHeight - mViewHeight/mCurrentScale);/<code><code> mRect.bottom = (int) mImageHeight;/<code><code> }/<code><code> invalidate;/<code><code> }/<code><code>}/<code>/<mimageheight>/<code>在onFling方法中調用滑動器Scroller的fling方法來處理手指離開之後慣性滑動。慣性移動的距離在View的computeScroll方法中計算，也需要注意邊界問題，不要滑出邊界。
第七步，處理雙擊事件
<code>@Override/<code><code>public boolean onDoubleTap(MotionEvent e) {/<code><code> //處理雙擊事件/<code><code> if (mCurrentScale>mScale){/<code><code> mCurrentScale = mScale;/<code><code> } else {/<code><code> mCurrentScale = mScale*mMultiple;/<code><code> }/<code><code> mRect.right = mRect.left+(int)(mViewWidth/mCurrentScale);/<code><code> mRect.bottom = mRect.top+(int)(mViewHeight/mCurrentScale);/<code><code> //處理邊界/<code><code> if(mRect.left<0){/<code><code> mRect.left = 0;/<code><code> mRect.right = (int) (mViewWidth/mCurrentScale);/<code><code> }/<code><code> if(mRect.right>mImageWidth){/<code><code> mRect.right = (int) mImageWidth;/<code><code> mRect.left = (int) (mImageWidth-mViewWidth/mCurrentScale);/<code><code> }/<code><code> if(mRect.top<0){/<code><code> mRect.top = 0;/<code><code> mRect.bottom = (int) (mViewHeight/mCurrentScale);/<code><code> }/<code><code> if(mRect.bottom>mImageHeight){/<code><code> mRect.bottom = (int) mImageHeight;/<code><code> mRect.top = (int) (mImageHeight-mViewHeight/mCurrentScale);/<code><code> }/<code><code> invalidate;/<code><code> return true;/<code><code>}/<code>mMultiple為雙擊之後放大幾倍，這裡設置3倍。第一次雙擊放大3倍，第二次雙擊返回原狀。縮放完成之後，需要根據當前的縮放比重新設置繪製區域的邊界。最後也需要重新定位一下邊界，因為如果使用兩個手指放大之後，這時候雙擊返回原狀，如果不處理邊界，位置會出錯。處理邊界的代碼可以抽取出來。
第八步，處理手指縮放事件
<code>@Override/<code><code>public boolean onScale(ScaleGestureDetector detector) {/<code><code> //處理手指縮放事件/<code><code> //獲取與上次事件相比，得到的比例因子/<code><code> float scaleFactor = detector.getScaleFactor;/<code><code>// mCurrentScale+=scaleFactor-1;/<code><code> mCurrentScale*=scaleFactor;/<code><code> if(mCurrentScale>mScale*mMultiple){/<code><code> mCurrentScale = mScale*mMultiple;/<code><code> }else if(mCurrentScale<=mScale){/<code><code> mCurrentScale = mScale;/<code><code> }/<code><code> mRect.right = mRect.left+(int)(mViewWidth/mCurrentScale);/<code><code> mRect.bottom = mRect.top+(int)(mViewHeight/mCurrentScale);/<code><code> invalidate;/<code><code> return true;/<code><code>}/<code>
<code>@Override/<code><code>public boolean onScaleBegin(ScaleGestureDetector detector) {/<code><code> //當 >= 2 個手指碰觸屏幕時調用，若返回 false 則忽略改事件調用/<code><code> return true;/<code><code>}/<code>onScaleBegin方法需要返回true，否則無法檢測到手勢縮放。onScale方法中獲取縮放因子，這個縮放因子是跟上次事件相比的出來的。所以這裡使用*=，完成之後也需要重新設置繪製區域mRect的邊界。
到這裡各種功能就完成啦~
源碼:
https://github.com/chsmy/AndroidDailyText/blob/master/app/src/main/java/com/chs/androiddailytext/widget/MyBigView.java
你有啥加載巨圖經驗嘛？
閱讀更多 碼個蛋 的文章
