飞道的博客

面试官:怎么加载巨图不撑爆内存?打脸现场!

445人阅读  评论(0)

还记得当年面试一个面试官问我怎么加载巨图才能不撑爆内存,我没回答上来,他说分片显示,我寻思特么分片能减少内存使用??现在可以打他脸了!

Android开发中,有时候会有加载巨图的需求,如何加载一个大图而不产生OOM呢,使用系统提供的BitmapRegionDecoder这个类可以很轻松的完成。

效果图:

BitmapRegionDecoder:区域解码器,可以用来解码一个矩形区域的图像,有了这个我们就可以自定义一块矩形的区域,然后根据手势来移动矩形区域的位置就能慢慢看到整张图片了。

OK 核心原理就是这么简单,不过做起来还是有一些细节处理,下面就一步一步的完成一个加载大图,支持拖动查看,双击放大,手势缩放的的自定义View。

第一步,初始化变量


  
  1. private void init(){
  2. mOptions = new BitmapFactory.Options();
  3. //滑动器
  4. mScroller = new Scroller(getContext());
  5. //所放器
  6. mMatrix = new Matrix();
  7. //手势识别
  8. mGestureDetector = new GestureDetector(getContext(), this);
  9. mScaleGestureDetector = new ScaleGestureDetector(getContext(), this);
  10. }

BitmapFactory.Options我们很熟悉,用来配置Bitmap相关的参数,比如获取Bitmap的宽高,内存复用等参数。

GestureDetector用来识别双击事件,ScaleGestureDetector用来监听手指的缩放事件,都是系统提供的类,比较方便使用。

第二步,设置需要加载的图片


  
  1. public void setImage(InputStream is){
  2. mOptions.inJustDecodeBounds = true;
  3. BitmapFactory.decodeStream( is, null,mOptions);
  4. mImageWidth = mOptions.outWidth;
  5. mImageHeight = mOptions.outHeight;
  6. mOptions.inPreferredConfig = Bitmap.Config.RGB_565;
  7. mOptions.inJustDecodeBounds = false;
  8. try {
  9. //区域解码器
  10. mRegionDecoder = BitmapRegionDecoder.newInstance( is, false);
  11. } catch (IOException e) {
  12. e.printStackTrace();
  13. }
  14. requestLayout();
  15. }

设置需要要加载的图片,无论图片放到哪里都可以拿到图片的一个输入流,所以参数使用输入流,通过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的宽高,计算缩放值


  
  1. @Override
  2. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  3. super.onSizeChanged(w, h, oldw, oldh);
  4. mViewWidth = w;
  5. mViewHeight = h;
  6. mRect.top = 0;
  7. mRect.left = 0;
  8. mRect.right = ( int) mViewWidth;
  9. mRect.bottom = ( int) mViewHeight;
  10. mScale = mViewWidth/mImageWidth;
  11. mCurrentScale = mScale;
  12. }

onSizeChanged方法在布局期间,当此视图的大小发生更改时,将调用此方法,第一次在onMeasure之后调用,可以方便的拿到View的宽高。

然后给我们自定义的矩形mRect的上下左右的边界赋值。一般情况下我们使用这个自定义的View显示大图,都是占满这个View,所以这里矩形初始大小就让它跟View一样大。

mScale用来记录原始的所方比,mCurrentScale用来记录当前的所方比,因为有双击放大和手势缩放,mCurrentScale随着手势变化。

第四步,绘制


  
  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3. super.onDraw(canvas);
  4. if(mRegionDecoder == null){
  5. return;
  6. }
  7. //复用内存
  8. mOptions.inBitmap = mBitmap;
  9. mBitmap = mRegionDecoder.decodeRegion(mRect,mOptions);
  10. mMatrix.setScale(mCurrentScale,mCurrentScale);
  11. canvas.drawBitmap(mBitmap,mMatrix, null);
  12. }

绘制也很简单,通过区域解码器解码一个矩形的区域,返回一个Bitmap对象,然后通过canvas绘制Bitmap。需要注意mOptions.inBitmap = mBitmap;这个配置可以复用内存,保证内存的使用一直只是矩形的这块区域。

到这里运行就能绘制出一部分图片了,想要看全部的图片,需要手指拖动来看,这就需要处理各种事件了。

第五步,分发事件


  
  1. @ Override
  2. public boolean onTouchEvent( MotionEvent event) {
  3. mGestureDetector.onTouchEvent( event);
  4. mScaleGestureDetector.onTouchEvent( event);
  5. return true;
  6. }

onTouchEvent中很简单,事件都交给两个手势检测器自己去处理。

第六步,处理GestureDetector中的事件


  
  1. @Override
  2. public boolean onDown(MotionEvent e) {
  3. //如果正在滑动,先停止
  4. if(!mScroller.isFinished()){
  5. mScroller.forceFinished( true);
  6. }
  7. return true;
  8. }

当手指按下的时候,如果图片正在飞速滑动,那么停止


  
  1. @Override
  2. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
  3. //滑动的时候,改变mRect显示区域的位置
  4. mRect.offset(( int)distanceX,( int)distanceY);
  5. //处理上下左右的边界
  6. if(mRect.left< 0){
  7. mRect.left = 0;
  8. mRect.right = ( int) (mViewWidth/mCurrentScale);
  9. }
  10. if(mRect.right>mImageWidth){
  11. mRect.right = ( int) mImageWidth;
  12. mRect.left = ( int) (mImageWidth-mViewWidth/mCurrentScale);
  13. }
  14. if(mRect.top< 0){
  15. mRect.top = 0;
  16. mRect.bottom = ( int) (mViewHeight/mCurrentScale);
  17. }
  18. if(mRect.bottom>mImageHeight){
  19. mRect.bottom = ( int) mImageHeight;
  20. mRect.top = ( int) (mImageHeight-mViewHeight/mCurrentScale);
  21. }
  22. invalidate();
  23. return false;
  24. }

onScroll中处理滑,根据手指移动的参数,来移动矩形绘制区域,这里需要处理各个边界点,比如左边最小就为0,右边最大为图片的宽度,不能超出边界否则就报错了。


  
  1. @Override
  2. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
  3. mScroller.fling(mRect.left,mRect.top,-( int)velocityX,-( int)velocityY, 0,( int)mImageWidth
  4. , 0,( int)mImageHeight);
  5. return false;
  6. }
  7. @Override
  8. public void computeScroll() {
  9. super.computeScroll();
  10. if(!mScroller.isFinished()&&mScroller.computeScrollOffset()){
  11. if(mRect.top+mViewHeight/mCurrentScale<mImageHeight){
  12. mRect.top = mScroller.getCurrY();
  13. mRect.bottom = ( int) (mRect.top + mViewHeight/mCurrentScale);
  14. }
  15. if(mRect.bottom>mImageHeight) {
  16. mRect.top = ( int) (mImageHeight - mViewHeight/mCurrentScale);
  17. mRect.bottom = ( int) mImageHeight;
  18. }
  19. invalidate();
  20. }
  21. }

在onFling方法中调用滑动器Scroller的fling方法来处理手指离开之后惯性滑动。惯性移动的距离在View的computeScroll()方法中计算,也需要注意边界问题,不要滑出边界。

第七步,处理双击事件


  
  1. @Override
  2. public boolean onDoubleTap(MotionEvent e) {
  3. //处理双击事件
  4. if (mCurrentScale>mScale){
  5. mCurrentScale = mScale;
  6. } else {
  7. mCurrentScale = mScale*mMultiple;
  8. }
  9. mRect.right = mRect.left+( int)(mViewWidth/mCurrentScale);
  10. mRect.bottom = mRect.top+( int)(mViewHeight/mCurrentScale);
  11. //处理边界
  12. if(mRect.left< 0){
  13. mRect.left = 0;
  14. mRect.right = ( int) (mViewWidth/mCurrentScale);
  15. }
  16. if(mRect.right>mImageWidth){
  17. mRect.right = ( int) mImageWidth;
  18. mRect.left = ( int) (mImageWidth-mViewWidth/mCurrentScale);
  19. }
  20. if(mRect.top< 0){
  21. mRect.top = 0;
  22. mRect.bottom = ( int) (mViewHeight/mCurrentScale);
  23. }
  24. if(mRect.bottom>mImageHeight){
  25. mRect.bottom = ( int) mImageHeight;
  26. mRect.top = ( int) (mImageHeight-mViewHeight/mCurrentScale);
  27. }
  28. invalidate();
  29. return true;
  30. }

mMultiple为双击之后放大几倍,这里设置3倍。第一次双击放大3倍,第二次双击返回原状。缩放完成之后,需要根据当前的缩放比重新设置绘制区域的边界。最后也需要重新定位一下边界,因为如果使用两个手指放大之后,这时候双击返回原状,如果不处理边界,位置会出错。处理边界的代码可以抽取出来。

第八步,处理手指缩放事件


  
  1. @Override
  2. public boolean onScale(ScaleGestureDetector detector) {
  3. //处理手指缩放事件
  4. //获取与上次事件相比,得到的比例因子
  5. float scaleFactor = detector.getScaleFactor();
  6. // mCurrentScale+=scaleFactor-1;
  7. mCurrentScale*=scaleFactor;
  8. if(mCurrentScale>mScale*mMultiple){
  9. mCurrentScale = mScale*mMultiple;
  10. } else if(mCurrentScale<=mScale){
  11. mCurrentScale = mScale;
  12. }
  13. mRect.right = mRect.left+( int)(mViewWidth/mCurrentScale);
  14. mRect.bottom = mRect.top+( int)(mViewHeight/mCurrentScale);
  15. invalidate();
  16. return true;
  17. }
  18. @Override
  19. public boolean onScaleBegin(ScaleGestureDetector detector) {
  20. //当 >= 2 个手指碰触屏幕时调用,若返回 false 则忽略改事件调用
  21. return true;
  22. }

onScaleBegin方法需要返回true,否则无法检测到手势缩放。onScale方法中获取缩放因子,这个缩放因子是跟上次事件相比的出来的。所以这里使用*=,完成之后也需要重新设置绘制区域mRect的边界。

到这里各种功能就完成啦~

源码

最后对于程序员来说,要学习的知识内容、技术有太多太多,要想不被环境淘汰就只有不断提升自己,从来都是我们去适应环境,而不是环境来适应我们!

这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司19年的面试题,把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节,由于篇幅有限,这里以图片的形式给大家展示一部分。

这里是关于我自己的Android 学习,面试文档,视频收集大整理,有兴趣的伙伴们可以看看~

当程序员容易,当一个优秀的程序员是需要不断学习的,从初级程序员到高级程序员,从初级架构师到资深架构师,或者走向管理,从技术经理到技术总监,每个阶段都需要掌握不同的能力。早早确定自己的职业方向,才能在工作和能力提升中甩开同龄人。

 


转载:https://blog.csdn.net/weixin_44339238/article/details/103683183
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场