android轮播组件,Android轮播图控件的实现详解(附GitHub开源链接)

轮播图在Android开发中是非常常见的控件，一般App的首页广告和电商类App的商品详情图片都会用轮播图来实现。可是Android源生的控件中却没有能直接拿来使用的轮播图控件，所以一般的轮播图效果都需要我们自己去实现。今天我就给大家介绍一个我自己写的轮播图控件：CustomBanner。有需要的同学可以直接访问我的GitHub使用该控件。下面我将为大家详细介绍CustomBanner控件的实现思路和细节。

(说明：下面我贴出来的代码只是CustomBanner的代码摘要，想要看完整源码的同学请到GitHub下载或引用依赖)

1、布局

轮播图一般由一个可以左右滚动、承载图片的主体控件和一个显示当前位置的指示器组成。CustomBanner的布局非常简单，直接继承FrameLayout，内部添加两个子View：一个ViewPager(可以左右滚动、承载图片的主体控件)和一个LinearLayout(指示器容器)。

public class CustomBanner extends FrameLayout {

private ViewPager mBannerViewPager;

private LinearLayout mIndicatorLayout;

//添加轮播图ViewPager

private void addBannerViewPager(Context context) {

mBannerViewPager = new ViewPager(context);

this.addView(mBannerViewPager);

}

//添加轮播图指示器容器

private void addIndicatorLayout(Context context) {

mIndicatorLayout = new LinearLayout(context);

LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

lp.gravity = analysisGravity(mIndicatorGravity);

lp.setMargins(0, 0, 0, DensityUtils.dp2px(context, 8));

mIndicatorLayout.setGravity(Gravity.CENTER);

this.addView(mIndicatorLayout, lp);

}

}

2、实现轮播图的无限循环

轮播图是需要左右无限循环滚动的，而ViewPager是有滚动边界的。为了实现ViewPager循环滚动，我采用了网上一个很巧妙的实现方式。就是ViewPager的实际长度是它的应有长度+2，在ViewPager的应有长度的头尾各加一个节点。头节点的数据跟ViewPager的最后一个数据一样，尾节点的数据跟ViewPager的第一个数据一样。当ViewPager滚动到尾节点时，就无缝跳转到第一个数据，当ViewPager滚动到头节点时，就无缝跳转到最后一个数据，由于跳转的两节点的数据是一样的，而且是无缝跳转，没有过度动画，所以用户感觉不到ViewPager的显示节点已经改变，就给用户一种ViewPager在无限循环的错觉。具体请看这里。

由于多加了两个节点，所以在处理ViewPager的position时，实际的position和用户所看到的position是不一样的。比如：轮播图有5张图片，用户看到的也应该是5张图片，而实际上我们的ViewPager会有7张图片，因为第1张图片和第6张图片是同