[关闭]
@Tyhj 2017-11-10T06:44:12.000000Z 字数 1018 阅读 1089

300行代码实现自定义无限轮播banner

Android


建议阅读原文:https://www.zybuluo.com/Tyhj/note/920600

之前写过无限循环的viewPager,网上也有很多实现方法,感觉有点麻烦。前几天写了一个网页的banner,感觉Android这样搞可能也没什么问题,就花了一天时间实现了。
其实这个东西你看别人的代码好像很复杂,一时难以理解,其实只要你自己知道原理后再去实现,你写的代码也是这么复杂,因为里面有很多细节是根据自己的习惯去实现的,所以别人理解起来可能就困难一点。

大体实现方法

先写一个布局,一个LinearLayout,布局设置为屏幕宽度的5倍(其实只显示3张图片),里面横向放五个ImageView,每个宽度都为屏幕的宽度。然后为这个LinearLayout设置属性动画来左右移动,每次移动一个屏幕宽度,当滑动到最后一个时候就切换回第一个。

循环操作

当最后一个切换回第一个的时候看起来不连贯,不像循环,那我们可以把最后一个ImageView的图片设置和第二个一样,那切换到最后一个的动画完成的时候,我们马上切到第二个并且把这次的动画时间设置的非常短(10ms),这样就OK了。
反向操作,我们可以把第一个的图片设置和倒数第二个一样,当从第二个到第一个的时候,判断动画完成了,马上以极短的时间切到倒数第二个。注意保存每次移动后的位置。
布局如图:

自动滚动和手势滑动

自动滚动没什么好讲的,就是直接设置线程,间隔几秒钟来一次平移操作。手势操作复杂一点,其实就是手指按下的时候,先把自动滚动关闭了,手指移动的时候可以获取每次移动的距离,那就根据这个距离来左右平移LinearLayout,其中保存每次移动后的位置很重要。当手指离开的时候,根据这次平移的平均速度和距离的大小、正负来判断是移动到下一个ImageView的位置还是上一个ImageView的位置,根据保存的每次移动后的位置来进行平移。

自动滚动和手势滑动冲突

当自动滚动正在滚动的时候,我用手指去触摸,这时候可以屏蔽手指触摸(这样不是很好),也可以取消当前动画,并且获取当前LinearLayout移动的位置来继续进行手势滑动。

总体来说大概就是这样,原理十分简单,实现起来其实还行,不是很难但是也会遇到一些小问题。

github地址:https://github.com/tyhjh/LoopBanner

效果图(转换效果太差,真实效果是没问题的):

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注