自定义View显示超大图片

╰+攻爆jí腚メ 2021-09-22 04:58 518阅读 0赞

上一节（ 自定义初学5——自定义View显示图片 ） 已经说了如何自定义View显示图片。做android时，加载图片是避免不了的，加载网络图片还需要异步加载，最烦人的就是经常出现OOM，为了避免这样的问题，我们一般这样解决：

  1. 根据图片控件的大小对图片进行压缩显示。
  2. 如果图片数量非常多，则会使用LruCache等缓存机制，将所有图片占据的内容维持在一个范围内。

有时加载图片还会遇到特殊情况——就是单个图片非常巨大，还不允许压缩。那么对于这种需求，该如何做呢？

首先不压缩，按照原图尺寸加载，那么屏幕肯定是不够大的，并且考虑到内存的情况，不可能一次性整图加载到内存中，所以肯定是局部加载，而有一个类很好的完成了这个功能，这就是BitmapRegionDecoder

先看下官方的API

Center

写个简单的例子：

public class MainActivity extends Activity { 

  1. private ImageView mImageView;

@Override

  1. protected void onCreate(Bundle savedInstanceState) \{ 
  3.     super.onCreate(savedInstanceState);
  5.     setContentView(R.layout.activity\_main);

mImageView = (ImageView) findViewById(R.id.imageView1);

  1.     try \{ 
  3.         InputStream inputStream = getAssets().open("dog.jpg");
  5.         // 获得图片的宽、高
  7.         BitmapFactory.Options tmpOptions = new BitmapFactory.Options();
  9.         // tmpOptions.inJustDecodeBounds = true;// 如果设置为true，解码器将返回null
  11.         // 设置显示图片的中心区域
  13.         BitmapRegionDecoder bitmapRegionDecoder = BitmapRegionDecoder
  15.                 .newInstance(inputStream, false);
  17.         BitmapFactory.Options options = new BitmapFactory.Options();
  19.         options.inPreferredConfig = Bitmap.Config.ARGB\_8888;

//用给定的Rect和options创建位图

  1.         Bitmap bitmap = bitmapRegionDecoder.decodeRegion(new Rect(0, 0,
  3.                 600, 600), options);
  5.         mImageView.setImageBitmap(bitmap);
  10.     \} catch (IOException e) \{ 
  12.         e.printStackTrace();
  14.     \}
  19. \}

}

效果如下：
Center 1

很明显，BitmapRegionDecoder的功能就是加载图片的部分区域，现在大概原理就清楚了，我们需要定义一个View，然后利用去BitmapRegionDecoder显示一个图片的局部，然后利用手势检测，能够移动图片，好了，开始实现吧。梳理一下我们的View：

  • 提供一个设置图片的入口
  • 重写onTouchEvent，在里面根据用户移动的手势，去更新显示区域的参数
  • 每次更新区域参数后，调用invalidate，onDraw里面去regionDecoder.decodeRegion拿到bitmap，去draw

自定义LargeImageView

public class LargeImageView extends View { 

  1. private BitmapRegionDecoder mDecoder;
  3. /\*\*
  5.  \* 图片的宽度和高度
  7.  \*/
  9. private int mImageWidth, mImageHeight;
  11. /\*\*
  13.  \* 绘制的区域
  15.  \*/
  17. private volatile Rect mRect = new Rect();
  22. private MoveGestureDetector mDetector;
  27. private static final BitmapFactory.Options options = new BitmapFactory.Options();
  32. static \{ 
  34.     options.inPreferredConfig = Bitmap.Config.ARGB\_8888;
  36. \}
  41. public void setInputStream(InputStream is) \{ 
  43.     try \{ 
  45.         mDecoder = BitmapRegionDecoder.newInstance(is, false);
  47.         BitmapFactory.Options tmpOptions = new BitmapFactory.Options();
  49.         // 获取图片的宽高
  51.         tmpOptions.inJustDecodeBounds = true;
  53.         BitmapFactory.decodeStream(is, null, tmpOptions);
  55.         mImageWidth = tmpOptions.outWidth;
  57.         mImageHeight = tmpOptions.outHeight;
  62.         requestLayout();
  64.         invalidate();
  66.     \} catch (IOException e) \{ 
  68.         e.printStackTrace();
  70.     \} finally \{ 
  75.         try \{ 
  77.             if (is != null)
  79.                 is.close();
  81.         \} catch (Exception e) \{ 
  83.         \}
  85.     \}
  87. \}
  92. public void init() \{ 
  94.     mDetector = new MoveGestureDetector(getContext(),
  96.             new MoveGestureDetector.SimpleMoveGestureDetector() \{ 
  98.                 @Override
  100.                 public boolean onMove(MoveGestureDetector detector) \{ 
  102.                     int moveX = (int) detector.getMoveX();
  104.                     int moveY = (int) detector.getMoveY();
  109.                     if (mImageWidth > getWidth()) \{ 
  111.                         mRect.offset(-moveX, 0);
  113.                         checkWidth();
  115.                         invalidate();
  117.                     \}
  119.                     if (mImageHeight > getHeight()) \{ 
  121.                         mRect.offset(0, -moveY);
  123.                         checkHeight();
  125.                         invalidate();
  127.                     \}
  132.                     return true;
  134.                 \}
  136.             \});
  138. \}
  143. private void checkWidth() \{ 
  148.     Rect rect = mRect;
  150.     int imageWidth = mImageWidth;
  155.     if (rect.right > imageWidth) \{ 
  157.         rect.right = imageWidth;
  159.         rect.left = imageWidth - getWidth();
  161.     \}
  166.     if (rect.left < 0) \{ 
  168.         rect.left = 0;
  170.         rect.right = getWidth();
  172.     \}
  174. \}
  179. private void checkHeight() \{ 
  184.     Rect rect = mRect;
  186.     int imageHeight = mImageHeight;
  191.     if (rect.bottom > imageHeight) \{ 
  193.         rect.bottom = imageHeight;
  195.         rect.top = imageHeight - getHeight();
  197.     \}
  202.     if (rect.top < 0) \{ 
  204.         rect.top = 0;
  206.         rect.bottom = getHeight();
  208.     \}
  210. \}
  215. public LargeImageView(Context context, AttributeSet attrs) \{ 
  217.     super(context, attrs);
  219.     init();
  221. \}
  226. @Override
  228. public boolean onTouchEvent(MotionEvent event) \{ 
  230.     mDetector.onToucEvent(event);
  232.     return true;
  234. \}
  239. @Override
  241. protected void onDraw(Canvas canvas) \{ 
  243.     Bitmap bm = mDecoder.decodeRegion(mRect, options);
  245.     canvas.drawBitmap(bm, 0, 0, null);
  247. \}
  252. @Override
  254. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) \{ 
  256.     super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  261.     int width = getMeasuredWidth();
  263.     int height = getMeasuredHeight();
  268.     int imageWidth = mImageWidth;
  270.     int imageHeight = mImageHeight;
  275.     // 默认直接显示图片的中心区域，可以自己去调节
  277.     mRect.left = imageWidth / 2 - width / 2;
  279.     mRect.top = imageHeight / 2 - height / 2;
  281.     mRect.right = mRect.left + width;
  283.     mRect.bottom = mRect.top + height;
  288. \}

}

手势检测抽象类BaseGestureDetector

public abstract class BaseGestureDetector { 

  1.  protected boolean mGestureInProgress;
  6.     protected MotionEvent mPreMotionEvent;
  8.     protected MotionEvent mCurrentMotionEvent;
  13.     protected Context mContext;
  18.     public BaseGestureDetector(Context context)
  20.     \{ 
  22.         mContext = context;
  24.     \}
  32.     public boolean onToucEvent(MotionEvent event)
  34.     \{ 
  39.         if (!mGestureInProgress)
  41.         \{ 
  43.             handleStartProgressEvent(event);
  45.         \} else
  47.         \{ 
  49.             handleInProgressEvent(event);
  51.         \}
  56.         return true;
  61.     \}
  66.     protected abstract void handleInProgressEvent(MotionEvent event);
  71.     protected abstract void handleStartProgressEvent(MotionEvent event);
  76.     protected abstract void updateStateByEvent(MotionEvent event);
  81.     protected void resetState()
  83.     \{ 
  85.         if (mPreMotionEvent != null)
  87.         \{ 
  89.             mPreMotionEvent.recycle();
  91.             mPreMotionEvent = null;
  93.         \}
  95.         if (mCurrentMotionEvent != null)
  97.         \{ 
  99.             mCurrentMotionEvent.recycle();
  101.             mCurrentMotionEvent = null;
  103.         \}
  105.         mGestureInProgress = false;
  107.     \}

}

手势检测实现类

public class MoveGestureDetector extends BaseGestureDetector { 

  1. private PointF mCurrentPointer;
  3. private PointF mPrePointer;
  8. // 用于记录最终结果，并返回
  10. private PointF mExtenalPointer = new PointF();
  15. private OnMoveGestureListener mListenter;
  20. public MoveGestureDetector(Context context, OnMoveGestureListener listener) \{ 
  22.     super(context);
  24.     mListenter = listener;
  26. \}
  31. @Override
  33. protected void handleInProgressEvent(MotionEvent event) \{ 
  35.     int actionCode = event.getAction() & MotionEvent.ACTION\_MASK;
  37.     switch (actionCode) \{ 
  39.     case MotionEvent.ACTION\_CANCEL:
  41.     case MotionEvent.ACTION\_UP:
  43.         mListenter.onMoveEnd(this);
  45.         resetState();
  47.         break;
  49.     case MotionEvent.ACTION\_MOVE:
  51.         updateStateByEvent(event);
  53.         boolean update = mListenter.onMove(this);
  55.         if (update) \{ 
  57.             mPreMotionEvent.recycle();
  59.             mPreMotionEvent = MotionEvent.obtain(event);
  61.         \}
  63.         break;
  68.     \}
  70. \}
  75. @Override
  77. protected void handleStartProgressEvent(MotionEvent event) \{ 
  79.     int actionCode = event.getAction() & MotionEvent.ACTION\_MASK;
  81.     switch (actionCode) \{ 
  83.     case MotionEvent.ACTION\_DOWN:
  85.         resetState();// 防止没有接收到CANCEL or UP ,保险起见
  87.         mPreMotionEvent = MotionEvent.obtain(event);
  89.         updateStateByEvent(event);
  91.         break;
  93.     case MotionEvent.ACTION\_MOVE:
  95.         mGestureInProgress = mListenter.onMoveBegin(this);
  97.         break;
  99.     \}
  104. \}
  109. protected void updateStateByEvent(MotionEvent event) \{ 
  111.     final MotionEvent prev = mPreMotionEvent;
  116.     mPrePointer = caculateFocalPointer(prev);
  118.     mCurrentPointer = caculateFocalPointer(event);
  123.     boolean mSkipThisMoveEvent = prev.getPointerCount() != event
  125.             .getPointerCount();
  130.     mExtenalPointer.x = mSkipThisMoveEvent ? 0 : mCurrentPointer.x
  132.             - mPrePointer.x;
  134.     mExtenalPointer.y = mSkipThisMoveEvent ? 0 : mCurrentPointer.y
  136.             - mPrePointer.y;
  141. \}
  146. /\*\*
  148.  \* 根据event计算多指中心点
  150.  \* 
  152.  \* @param event
  154.  \* @return
  156.  \*/
  158. private PointF caculateFocalPointer(MotionEvent event) \{ 
  160.     final int count = event.getPointerCount();
  162.     float x = 0, y = 0;
  164.     for (int i = 0; i < count; i++) \{ 
  166.         x += event.getX(i);
  168.         y += event.getY(i);
  170.     \}
  175.     x /= count;
  177.     y /= count;
  182.     return new PointF(x, y);
  184. \}
  189. public float getMoveX() \{ 
  191.     return mExtenalPointer.x;
  196. \}
  201. public float getMoveY() \{ 
  203.     return mExtenalPointer.y;
  205. \}
  210. public interface OnMoveGestureListener \{ 
  212.     public boolean onMoveBegin(MoveGestureDetector detector);
  217.     public boolean onMove(MoveGestureDetector detector);
  222.     public void onMoveEnd(MoveGestureDetector detector);
  224. \}
  229. public static class SimpleMoveGestureDetector implements
  231.         OnMoveGestureListener \{ 
  236.     @Override
  238.     public boolean onMoveBegin(MoveGestureDetector detector) \{ 
  240.         return true;
  242.     \}
  247.     @Override
  249.     public boolean onMove(MoveGestureDetector detector) \{ 
  251.         return false;
  253.     \}
  258.     @Override
  260.     public void onMoveEnd(MoveGestureDetector detector) \{ 
  262.     \}
  264. \}

}

用法不说了，看效果吧：

Center 2
这只是简单的实现，我们当然还可以实现更多的功能了，我就抛砖引玉吧

源代码
参考：

http://blog.csdn.net/lmj623565791/article/details/49300989

http://www.itstrike.cn/Question/904dfdaa-5cec-4d3c-bbc3-a7cc2e6172d8.html

http://blog.csdn.net/hahajluzxb/article/details/8158852

发表评论

表情：
评论列表 （有 0 条评论，518人围观）

还没有评论，来说两句吧...

相关阅读