Home

Awesome

长图优化

现在市面上 95 % 以上,APP 都有预览图片的功能,那么是怎么做的勒,今天我们就来仿照 微博 预览长图,来对长图优化。

怎么使用

代码传送阵

  1. project/build.gradle

    	allprojects {
    		repositories {
    			...
    			maven { url 'https://jitpack.io' }
    		}
    	}
    
  2. app/build.gradle

    dependencies {
    	        implementation 'com.github.yangkun19921001:long_picture_view:1.0.2'
    	}
    
  3. xml 中直接使用

     <com.yk.big_picture_library.BigView
            android:id="@+id/bv_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
     />
    
  4. 代码中

     BigView bigView=findViewById(R.id.bv_img);
     //加载路径
     bigView.setImage(BIG_IMAGE_PAHT);
     //加载 InputStream
     bigView.setImage(InputStream is)
     //加载网络图片 callBack : 加载中的回调
     bigView.setNetUrl(String url,LoadNetImageCallBack callBack);
    

效果对比

微博长图效果

仿照微博预览长图效果

效果是不是很丝滑,原图是 12 M 压缩后不到 2 M ,加载前可以压缩下,我用的是我自己的另一个图片压缩开源项目利用哈夫曼算法对图片压缩。

内存使用状态

内存无泄漏,无抖动,无溢出 。这里在提一下如果对内存优化不了解的可以看下性能优化(三)...

Java 堆内存: 5 - 6 M 之间

Native 占用内存: 25 M 左右

解决思路

粗略步骤:

  1. 沿着对角线缩放
  2. 加载屏幕能够看见的区域
  3. 复用上一个 bitmap 区域的内存
  4. 处理滑动

详细步骤

  1. 定义 Rect 图片需要加载的区域
  2. 定义图片复用 BitmapFactory.Options()
  3. 定义手势识别 GestureDetector 上下左右滑动的帮助类
  4. 定义一个滑动帮组类 Scroller
  5. 加载图片信息并不是加载真正的图片
  6. 开启内存复用功能
  7. 创建一个区域解码器,只解码一部分。
  8. 刷新 requestLayout
  9. 确定加载图片的区域,计算缩放比列
  10. onDraw 绘制区域图片
  11. 将图片区域缩放得到 View 的大小
  12. drawBitmap 绘制图片
  13. 处理滑动事件交给手势处理
  14. 随着手指滑动改变现实区域 Rect,判断头部底部界限
  15. invalidate 不断重绘
  16. onFling , computeScroll 处理惯性问题
  17. invalidate 不断重绘