教你如何循环显示超长图片

【原文地址点击打开链接】

简介

某次被问到如何实现一个滚筒状的控件，就是可以将一张很长的图片沿着Y轴无限旋转，如下图所示：

大概就是这个意思，当时还不知道图片可以裁剪，想不出整个流程怎么搞，后来得知Bitmap有裁剪功能，才想到这个功能怎么实现，花了一下午时间整了一下有了成果。

这是这张长图：

然后旋转起来就是这个样子：

上面这个效果在实际运行过程中是非常流畅的，这张图片是按照每秒几帧截的，所以看起来一顿一顿的。

实现

先来说说如何实现：

第一次：先按照屏幕的宽度截取这张长图的起始部分。 
第二次：以偏移量开始，重复第一次的行为。 
…

最后：当这张图片的结尾部分不足以支撑整个屏幕的宽度时,先截取这张图片的末尾部分，绘制。然后再以剩余的宽度截取图片的头部部分，绘制。依次进行，直至重新回到第一次。

以上是 CylinderImageView 的实现代码。

其中有两个公开方法： 

• resume() 用于在 Activity的onResume() 中调用，以便暂停。
  

• pause() 用于在Activity的onPause() 中调用，以便恢复旋转。

下面是使用示例：

内存分析

因为这个控件内部涉及大量的图片操作，所以大伙一定很关心内存的使用。我为此专门做了内存测试，结果内存占用非常小。

这张图是 没有使用CylinderImageView 时应用程序所占用的内存 17.9MB：

我这里所使用的示例图片的长宽是 1200x353，也就是说它被加载到内存中所占用的内存大小是 1200x353x4/1024/1024=1.61MB。

再加上在屏幕上所显示的Bitmap所占用的内存为：2080x353x4/1024/1024=1.45MB。

因为内存回收并不是实时的，所以在内存使用最高峰时，所使用的内存：17.9+1.61+1.45x2=22.43MB。

实际的运行占用内存为：

以及：

上面两张图片的差距是图片内存回收的差值，但是这里的高峰内存值与我们计算的内存值有些差距，这是因为除了内存之外，我们还在XML布局文件中声明了控件以及加载控件也占用了一定的内存空间。

调用 pause() 方法的内存状况：

调用 resume() 方法的内存状况：

以及：

Activity销毁之后所占用的内存：

通过上面一系列图示说明这个控件将内存的消耗控制在了合理的范围之内，没有滥用内存。

最后，大功告成，不知道是否明白我说的呢?

大家可以点击最后 阅读原文 查看源码地址。