三层继承ViewPager实现无限轮播图Banner

时间：2021-10-05 12:05:58

概述：

很多项目中都有无限轮播图，犹如网易新闻顶部的轮播图等，是一个很常见的控件。有很多人写(详见codeKK)，这块按照自己的思路写一遍，三层继承ViewPager实现之，使得代码清晰，改动方便。

代码在github上 LoopViewPager

现在做成了一个Library，包含无限轮播图、小红点Indicator和宽高比例的RationFrameLayout。很方便使用。

该控件特点：

  1. 使用三层继承关系,分工明确.

    • 顶层使用LoopView,该控件继承ViewGroup,是一个可以无限轮播的ViewPager
    • 第二层使用Trina的AutoScrollViewPager,作为启动器.
    • 第三层AdvancedLoopViewPager,用于功能增强。可以自定义Measure或者事件分发。

  2. ViewPager的Adapter 和 IPageIndicator 都支持notifyDateSetChanged()方法.
    可以通过该方法改变数据源.

  3. 支持setCurrentItem()方法.
    通过viewPager.setCurrentItem(2)设置.
    并且在viewPager中设置后,indicator中不用设置,直接跟着变化.

  4. 提供了IPageIndicator接口,可以实现自己的Indicator. 写法都很固定,无论是继承View还是ViewGroup.

注意：
在adapter中必须要复写getItemPosition方法,使用Fragment的话必须使用FragmentStatePagerAdapter.

public int getItemPosition(Object object) {
return POSITION_NONE;
}

实现： 在 github上查看更多。

三层继承ViewPager实现无限轮播图Banner

思考步骤：
1. 实现无限轮播的ViewPager
2. 实现自动轮播
3. 实现绑定在指示器Indicator


实现步骤：

1. 实现无限轮播图：

目前实现无限轮播图的有几种写法：

  • 使ViewPager的条目个数为Integer.MAX_VALUE。
  • 使用LoopingViewPager。
  • 开源项目LoopViewPager
  • codeKK上有使用RecyclerView实现的，值得学习。

这些实现方式自己都实现过，最终采用第三种，使用LoopViewPager，该控件继承ViewGroup，实现了一个无限循环的ViewPager。

16/6/22解决数据只有两张时左右摆动bug，添加另外两个相同的数据，同时同步处理indicator数据。

如果你要使用Integer.MAX_VALUE，直接将继承关系改变，使LoopViewPager继承MaxValueViewPager就行，不用改变其他代码。(不过MaxValueViewPager在滑动时候的表现十分令人失望。)

LoopingViewPager的闪烁现象不能很好的解决，另外对notifyDataSetChanged会出现意想不到的bug，也不能向adapter中传入一个固定的List作为数据源

2. 使用AutoScrollViewPager实现自动轮播：

使用Trina的AutoScrollViewPager。

使AutoScrollViewPager继承LoopViewPager，作为启动器。

3.再继承一层，增强功能

创建AdvancedLooperViewPager，继承AutoScrollViewPager，增强功能。
在自己创建的这个类中，可以增强功能，需要什么就实现什么。比如可以像FlycoBanner将indicator写在这个类中。在此不这么做，将会单独抽取，方便替换。

增强的功能：

  1. 实现对高度的wrap_content的支持。相应的添加scale属性。方便使用者定义宽高比例。如果layout_height为确定值(比如300dp)，那么以该确定值为准。
  2. 更多功能 to be continued…

4. 实现Indicator指示器：

关于指示器写法：
1. 继承View全部在onDraw()方法里写
2. 继承ViewGroup，添加ImageView等。

这块将会拿出来单独学习，在这里就继承View实现了一个SimpleCircleIndicator，但同时提供了接口可以实现自己的indicator。

5. 添加其他效果

  1. 关于pageTransformer可查看： ViewPagerTransformer学习
  2. 添加其他PageIndicator，把现在比较好的拿过来用了，适配了一下LoopViewPager。


参考：

viewpager:
LoopingViewPager
Trinea的android-auto-scroll-view-pager

indicator：
JakeWharton的ViewPagerIndicator.
github circleIndicator
github circleIndicator

已经有的无限轮播图：
FlycoBanner
标签：

相关文章