码个蛋(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
你有啥加载巨图经验嘛？