Scroller实现长图自动滚动播放，仿星光直播个人主页

最近闲来无事，就四处转转，这看看球，那看看腿，无意中看到星光直播个人主页一个设计，这种需求我们在开发中很常见，我们自己图片大都是手机拍的，分辨率自然就跟手机一样，但是展示下来总不能把整个页面都占据吧，但是背景的地就给那么大地方，解决的方案无非就是等比例缩小，然后剪裁，其实体验不是很好，我好好的一张图就给我显示那么点，所以这个需求就出现了，我的图是长图，而且给显示的地方就是一小条，我还要看全部，那就能让她自动滚动了。先看一下效果图：

ezgif.com-resize.gif

（注：这个效果我也是醉了，实际效果很顺滑的，哎，估计是我录屏和转GIF方式有瑕疵吧）

至于实现方式，其实有很多种，想法不一样，处理方式就不同，为了让它看起来独立一些，我封装了一个控件。我先谈一下其他的东西。
这个效果给我的第一感觉就是自己会动的scrollview，当然这肯定不是，但是他的滑动原理可以借鉴一下。我们知道，scrollview、recycleview、viewpager滑动都用到了一个Scroller的东西，Scroller是干什么用的呢，API上的意思是说它是一个封装了滚动的类，可以生成你想要的滚动动画，那它是怎么实现的呢。

我们都知道，view里面scrollTo(),scrollBy()的方法，区别一个是移动到某个点，一个是移动某段距离，其实Scroller也是利用了这两个方法,Scroller里面封装了一个算法，通过你设置的起点终点，以及时长，计算出当前状态移动到的位置，我们只需要在view中回调即可,然后直到你设置的时间结束，什么时候回调呢

image.png

说的很清楚，为更新child的mScrollX 、mScrollY，后面专门提到了Scroller，当然了，这个回调里面还可以做很多其他的事情，本篇文章只是就事论事。OK下面上代码

image.png

新建一个类ScrollerLayout继承自FrameLayout，实例化Scroller的时候，传入一个线性的加速器，保证匀速滑动，

image.png

这个这样写是保证只有一个child，child多了跟需求就有悖了，

image.png

关键部分,首先computeScroll回调方法是在draw的时候调用的，所以一定要调用invalidate（）,duration的计算可以根据实际情况调整。

其实上面这些都还是可以的，作者认为关键还是在计算distance上，distance是上下浮动的最大距离，应该是图片的实际高度减去ScrollerLayout的高度，但是有可能图片的实际宽度要小于或大于ScrollerLayout的宽度，所以还得需要做等比例放缩。考虑到网络图片的加载不是实时的所以加了一个标志位控制是否需要滚动，其实不加也是没有关系的。

image.png

计算child的实际大小，然后按照宽作为参照，重新设置child的宽高。

image.png

实现一个接口，控制scroll的启动，这样我们这个控件就写完了，下面看一下应用

image.png

我这里都是用的本地的图片做的测试，如果是网络图片的话，可能需要监听加载完成，其实这些都不是必要的，因为图片下载完成，加载的时候，还是会调用onMeasure，我之所以加这个接口，主要是考虑到业务扩展，可能它并不需要直接就滚动等等。

一个简单的小实现，有更好实现的可以在评论中探讨一下!!!!