关于Android的超长图处理，可以很容易的找到解决方案，即用BitmapRegionDecoder来分区域生成bitmap来实现，但是在实践过程中发现，各中细节并不是那么容易，下面分享一下其中的技术难点。
实现目标
类似于微博和微信，对于超长图的处理。
- 双击进入超长图模式，超长图自动占满全屏方便阅读
- 滑动到哪里，哪个区域变得清晰
- 带惯性的流畅滑动
实现思路
- 捕获双击手势，利用
matrix放大原始小图得到模糊的大图 - 捕获手势，利用
scrollBy和OverScroller来实现滑动和惯性滑动 - 监听滑动事件，在滑动事件中判断是否需要获取新的bitmap。如需获取则开始异步获取
bitmap - 将异步获取到的
bitmap在ondraw中绘制到屏幕的对应区域
手势处理
手势处理可以利用GestureDetector这个类捕获
双击事件
用来放大缩小图片，进入和退出长图模式
@Override
public boolean onDoubleTap(MotionEvent e) {
if (isAnim || isLoading||!canMove)
return true;
if (!isScale) {
BigImgImageView.this.setScaleType(ScaleType.MATRIX);
scrollTo(0, 0);
RectF rect = bigImgViewUtils.getMatrixMapRect(currentMaritx);
float downXRatio = calcScaleScrollRatio(true, e, rect);
float downYRatio = calcScaleScrollRatio(false, e, rect);
animToScale(downXRatio, downYRatio);
} else {
scrollTo(0, 0);
bigImgViewRealImgHelper.cancelDrawBigImg();
animToMatrix(currentMaritx, originMatrix);
destroyBigImg();
}
return true;
}
计算放大倍率
private float calcScaleScrollRatio(boolean isX, MotionEvent event, RectF rect) {
float ratio = 0;
if (isX) {
if (event.getX() < (getWidth() - rect.width()) / 2)
ratio = 0;
else if (event.getX() > (getWidth() + rect.height()) / 2) {
ratio = 1;
} else {
ratio = (event.getX() - (getWidth() - rect.width()) / 2) / rect.width();
}
} else {
if (event.getY() < (getHeight() - rect.height()) / 2)
ratio = 0;
else if (event.getY() > (getHeight() + rect.height()) / 2) {
ratio = 1;
} else {
ratio = (event.getY() - (getHeight() - rect.height()) / 2) / rect.height();
}
}
return ratio;
}
滑动事件
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
if (isAnim || isLoading||!canMove)
return true;
if (isScale) {
RectF rectf = bigImgViewUtils.getMatrixMapRect(currentMaritx);
int maxX = (int) (rectf.width() / 2 - getWidth() / 2);
int maxY = (int) (rectf.height() / 2 - getHeight() / 2);
int minX = -maxX;
int minY = -maxY;
boolean cross = false;
//避免超出滑动范围
if (getScrollX() + distanceX > maxX) {
distanceX = maxX - getScrollX();
cross = true;
}
if (getScrollX() + distanceX < minX) {
cross = true;
distanceX = minX - getScrollX();
}
if (getScrollY() + distanceY > maxY)
distanceY = maxY - getScrollY();
if (getScrollY() + distanceY < minY)
distanceY = minY - getScrollY();
requestIntercept(true);
BigImgImageView.this.scrollBy((int) distanceX, (int) distanceY);
}
return true;
}
});
惯性滑动
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (isAnim || isLoading||!canMove)
return true;
if (isScale) {
requestIntercept(true);
RectF rectf = bigImgViewUtils.getMatrixMapRect(currentMaritx);
scroller.fling(getScrollX(), getScrollY(), -(int) velocityX, (int) -velocityY,
-(int) (rectf.width() / 2 - getWidth() / 2), (int) (rectf.width() / 2 - getWidth() / 2),
-(int) (rectf.height() / 2 - getHeight() / 2), (int) (rectf.height() / 2) - getHeight() / 2);
scrollStart = true;
invalidate();
}
return true;
}
大图变换
这里各个地方需要注意，利用matrix放大的倍率精度是有限的，我们不要用开始计算好的倍率来处理后续业务，等matrix放大完毕后，测量matrix真正的放大倍率，再利用这个放大倍率进行后续计算
//计算放大倍率
private void animToScale(final float downXRatio, final float downYRatio) {
RectF rectF = bigImgViewUtils.getMatrixMapRect(originMatrix);
float widthRatio = getWidth() / rectF.width();
float heightRatio = getHeight() / rectF.height();
float scaleRatio;
boolean isWidthMore = widthRatio > heightRatio;
if (widthRatio <= 1f && heightRatio <= 1f) {
scaleRatio = maxScale;
} else {
scaleRatio = isWidthMore ? widthRatio : heightRatio;
}
if (scaleRatio < maxScale)
scaleRatio = maxScale;
bigImgViewRealImgHelper.needLoadRealBySize = scaleRatio > scrollMinRatio;
if (!bigImgViewRealImgHelper.needLoadRealBySize) {
int dx = 0;
int dy = 0;
dx = -(int) ((scaleRatio * rectF.width() - getWidth()) / 2 - downXRatio * scaleRatio * rectF.width() + getWidth() * downXRatio);
dy = -(int) ((scaleRatio * rectF.height() - getHeight()) / 2 - downYRatio * scaleRatio * rectF.height() + getHeight() * downYRatio);
scroller.startScroll(0, 0, dx, dy, 150);
}
playScaleAnim(downXRatio, downYRatio, scaleRatio);
}
播放放大动画 ,并在动画结束后根据双击坐标，改变当前位置scrollX 与scrollY
private void playScaleAnim(final float downXRatio, final float downYRatio, float scaleRatio) {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(1, scaleRatio);
valueAnimator.setDuration(150);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentMaritx = new Matrix(originMatrix);
currentMaritx.postScale((Float) animation.getAnimatedValue(), (Float) animation.getAnimatedValue(), getWidth() / 2, getHeight() / 2);
BigImgImageView.this.setImageMatrix(currentMaritx);
}
});
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
setAnim(true);
}
@Override
public void onAnimationEnd(Animator animation) {
setAnim(false);
isScale = true;
changeMode(true);
RectF realRect = bigImgViewUtils.getMatrixMapRect(currentMaritx);
if (bigImgViewRealImgHelper.needLoadRealBySize) {
int dx = 0;
int dy = 0;
dx = realRect.width() > realRect.height() ? (int) (downXRatio * (realRect.width() - getWidth())) : 0;
dy = realRect.height() > realRect.width() ? (int) (downYRatio * realRect.height() - getHeight()) : 0;
scrollTo((int) (-realRect.width() / 2 + dx + getWidth() / 2), (int) (-realRect.height() / 2 + dy + getHeight() / 2));
}
if (bigImgViewRealImgHelper.needToLoadRealBigImg) {
bigImgViewRealImgHelper.initBitmapRegion(uri);
bigImgViewRealImgHelper.onBigImgFlingStop(currentMaritx);
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
valueAnimator.start();
}
加载区域图片
这里的处理要注注意，不能每次生成的区域太小。避免 BitmapRegionDecoder 频繁创建bitmap ，这里很容易导致 oom 或者过于频繁的GC造成卡顿。因为我们是在滑动的回调中处理这些业务，调用次数很频繁，所以要尽可能的避免在过程中创建对象。
同时这里我整合了几个对象
RealBitmap
包含需要绘制的bitmap 和相关区域信息
//超长图加载区域信息
public static class RealBitmap {
//需要绘制的图片
public Bitmap bitmap;
//图片需要绘制的区域
public Rect rect1;
//图片绘制的目标区域
public RectF targetRect;
//该图片在原始图片中的区域
private Rect calcRect;
public RealBitmap(RealBitmap realBitmap) {
this.bitmap = realBitmap.bitmap;
this.rect1 = realBitmap.rect1;
this.targetRect = realBitmap.targetRect;
this.calcRect = realBitmap.calcRect;
}
private RealBitmap() {
}
public void recycle() {
if (bitmap != null)
bitmap.recycle();
}
public boolean isRecycled() {
return bitmap == null || bitmap.isRecycled();
}
@Override
public String toString() {
return bitmap.getWidth() + "---" + bitmap.getHeight() + "----" + rect1.toString() + "----" + targetRect.toString();
}
}
RealBitmapWrapper
我们加载过程要根据滑动方向进行预加载 ，所以包装了一个之前和当前的 RealBitmap 。
预计加载的方向如下,每次多加载一屏的bitmap可以有效地的避免bitmap创建过于频繁。
//超大图预加载
protected enum Orientation {
toLeft, toRight, toTop, toBottom, none
}
//超长图加载信息
public class RealBitmapWrapper {
public RealBitmap last;
public RealBitmap current;
private synchronized void add(RealBitmap bitmap) {
if (current == null)
current = bitmap;
else {
if (last != null)
last.recycle();
last = current;
current = bitmap;
}
}
public void recycle() {
if (last != null)
last.recycle();
if (current != null)
current.recycle();
last = null;
current = null;
}
//是否包含
public boolean contains(Rect rect) {
if (last == null && current == null)
return false;
if (last != null && current != null) {
tempRectF.set(Math.min(current.targetRect.left, last.targetRect.left),
Math.min(current.targetRect.top, last.targetRect.top),
Math.max(current.targetRect.right, last.targetRect.right),
Math.max(current.targetRect.bottom, last.targetRect.bottom));
return tempRectF.contains(RectToRectF(rect));
}
if (current != null)
return current.targetRect.contains(RectToRectF(rect));
else
return last.targetRect.contains(RectToRectF(rect));
}
//获取下一次加载方向
private Orientation containsGetNext(Rect rect) {
RectF finial;
if (last == null && current == null)
return Orientation.none;
if (last != null && current != null) {
tempRectF.set(Math.min(current.targetRect.left, last.targetRect.left),
Math.min(current.targetRect.top, last.targetRect.top),
Math.max(current.targetRect.right, last.targetRect.right),
Math.max(current.targetRect.bottom, last.targetRect.bottom));
finial = tempRectF;
} else if (current != null)
finial = current.targetRect;
else
finial = last.targetRect;
if (finial.left > rect.left)
return toLeft;
else if (finial.right < rect.right)
return toRight;
else if (finial.top < rect.top)
return toBottom;
else
return toTop;
}
}
判断是否需要加载
//是否需要去加载
private boolean needToLoad() {
if (realBitmapWrapper == null)
return true;
currentScrollRect.set(imageView.getScrollX(), imageView.getScrollY(), imageView.getScrollX() + imageView.getWidth(),
imageView.getScrollY() + imageView.getHeight());
return !realBitmapWrapper.contains(currentScrollRect);
}
获取图片
计算当前参数，确定需要获取的图片在原图片的坐标和目标绘制坐标
//获取清晰的真实图片
private void getOriginBitmapRect(Orientation preloadFlag, Matrix currentMaritx) {
tempMatrixRect.setEmpty();
tempMatrixRect.right = imageView.getDrawable().getIntrinsicWidth();
tempMatrixRect.bottom = imageView.getDrawable().getIntrinsicHeight();
currentMaritx.mapRect(tempMatrixRect);
RectF current = tempMatrixRect;
float ratio = (float) bigImgRealWidth / current.width();
float ratioHeight = (float) bigImgRealHeight / current.height();
bigAsyncData.rect = calcBitmapRect(ratio, ratioHeight, bigImgRealWidth, bigImgRealHeight, current
, preloadFlag, imageView.getScrollX(), imageView.getScrollY());
bigAsyncData.target = calcDrawRect(ratio, ratioHeight, bigAsyncData.rect, imageView.getScrollX(), imageView.getScrollY(), preloadFlag);
if (bigAsyncData.target.equals(currentRequestRect))
return;
currentRequestRect = bigAsyncData.target;
if (asyncBigImg != null) {
asyncBigImg.cancel(true);
}
asyncBigImg = new AsyncBigImg();
asyncBigImg.execute(bigAsyncData);
}
交由异步任务执行获取过程
//获取大图异步放大
private class AsyncBigImg extends AsyncTask<BigAsyncData, Object, RealBitmap> {
private boolean isCancel = false;
@Override
protected RealBitmap doInBackground(BigAsyncData... params) {
BigAsyncData bigAsyncData = params[0];
if (bitmapRegionDecoder == null)
return null;
RealBitmap realBitmapT = null;
BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.RGB_565;
Bitmap bitmap = null;
try {
bitmap = bitmapRegionDecoder.decodeRegion(changRotateRect(imgRotate, bigAsyncData.rect), options);
if (imgRotate != 0) {
Bitmap old = bitmap;
bitmap = FileUntil.rotateBitmap(bitmap, imgRotate);
old.recycle();
}
} catch (Exception e) {
e.printStackTrace();
return null;
}
if (bitmap != null)
realBitmapT = new RealBitmap();
else
return null;
realBitmapT.bitmap = bitmap;
realBitmapT.rect1 = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
realBitmapT.targetRect = bigAsyncData.target;
realBitmapT.calcRect = bigAsyncData.rect;
if (isCancel) {
realBitmapT.recycle();
realBitmapT = null;
}
return realBitmapT;
}
@Override
protected void onCancelled() {
super.onCancelled();
isCancel = true;
}
@Override
protected void onPreExecute() {
super.onPreExecute();
}
@Override
protected void onPostExecute(RealBitmap realBitmap) {
if (realBitmap == null)
return;
realBitmapWrapper.add(realBitmap);
drawRealBig = true;
imageView.invalidate();
}
}
图片绘制
首先我们需要一个标志位来确定是否需要绘制。另外需要一个对象来保存异步获取的绘制图片信息，方便在ondraw中调用
//是否可以绘制大图
public boolean drawRealBig = false;
//原始图片信息
public RealBitmapWrapper realBitmapWrapper = new RealBitmapWrapper();
最后再ondraw中绘制bitmap即可
canvas.drawBitmap(realBitmapWrapper.current.bitmap, realBitmapWrapper.current.rect1,
bigImgViewRealImgHelper.realBitmapWrapper.current.targetRect, null);
总结
这里的核心难点在于对内存的把控，这里可能要频繁的生成bitmap 注意要及时释放无用的。另外，为了避免bitmap过于频繁生成，我们加入了预加载机制，根据滑动的方向，预加载部分图片。按这套机制处理出来的超大图与微博，微信效果无异。我们来看一下最终效果图
效果图
