Android轮播图控件的实现详解(附GitHub开源连接)

轮播图在Android开发中是很是常见的控件，通常App的首页广告和电商类App的商品详情图片都会用轮播图来实现。但是Android源生的控件中却没有能直接拿来使用的轮播图控件，因此通常的轮播图效果都须要咱们本身去实现。今天我就给你们介绍一个我本身写的轮播图控件：CustomBanner。有须要的同窗能够直接访问个人GitHub使用该控件。下面我将为你们详细介绍CustomBanner控件的实现思路和细节。
（说明：下面我贴出来的代码只是CustomBanner的代码摘要，想要看完整源码的同窗请到GitHub下载或引用依赖）

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

public class CustomBanner<T> 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);
    }
}复制代码

二、实现轮播图的无限循环
轮播图是须要左右无限循环滚动的，而ViewPager是有滚动边界的。为了实现ViewPager循环滚动，我采用了网上一个很巧妙的实现方式。就是ViewPager的实际长度是它的应有长度+2，在ViewPager的应有长度的头尾各加一个节点。头节点的数据跟ViewPager的最后一个数据同样，尾节点的数据跟ViewPager的第一个数据同样。当ViewPager滚动到尾节点时，就无缝跳转到第一个数据，当ViewPager滚动到头节点时，就无缝跳转到最后一个数据，因为跳转的两节点的数据是同样的，并且是无缝跳转，没有过分动画，因此用户感受不到ViewPager的显示节点已经改变，就给用户一种ViewPager在无限循环的错觉。具体请看这里。
因为多加了两个节点，因此在处理ViewPager的position时，实际的position和用户所看到的position是不同的。好比：轮播图有5张图片，用户看到的也应该是5张图片，而实际上咱们的ViewPager会有7张图片，由于第1张图片和第6张图片是同一张图片，第7张图片和第2张图片是同一张图片。这里可能很很差理解，可是必定要理解，由于这是实现轮播图循环轮播的关键。

//ViewPager的实际长度是他的数据的长度+2
     @Override
    public int getCount() {
        return mDatas == null || mDatas.isEmpty() ? 0 : mDatas.size() + 2;
    }复制代码

//经过实际的position计算用户所理解的position
private int getActualPosition(int position) {
        if (position == 0) {
            //若是是头节点，返回最后一个数据的position
            //由于头节点的数据和最后一个数据是同样的。
            return mDatas.size() - 1;
        } else if (position == getCount() - 1) {
            //若是是尾节点，返回第一个数据的position
            //由于尾节点的数据和第一个数据是同样的。
            return 0;
        } else {
            //除了头尾之外，position节点的数据是mDatas中的第position - 1的下标的数据
            return position - 1;
        }
    }复制代码

三、设置ViewPager的滚动速度
ViewPager有本身的mScroller属性，负责控制ViewPager的滚动速度。可是ViewPager的默认滚动速度太快了，并且ViewPager并无提供方法设置mScroller的滚动速度也没有提供方法设置mScroller，因此咱们须要经过反射用本身的mScroller替换掉ViewPager的mScroller，使咱们能够彻底控制和操做ViewPager的mScroller属性。这不只仅是实现咱们自定义ViewPager的滚动速度，也是实现第2步中ViewPager无缝跳转的关键。

//经过反射替换掉mBannerViewPager的mScroller属性
    private void replaceViewPagerScroll() {
        try {
            Field field = ViewPager.class.getDeclaredField("mScroller");
            field.setAccessible(true);
            mScroller = new ViewPagerScroller(mContext,
                    new AccelerateInterpolator());
            field.set(mBannerViewPager, mScroller);
        } catch (Exception e) {
        }
    }

    /** * 设置轮播图的滚动速度 * * @param scrollDuration */
    public CustomBanner<T> setScrollDuration(int scrollDuration) {
        mScroller.setScrollDuration(scrollDuration);
        return this;
    }复制代码

public class ViewPagerScroller extends Scroller {

    private int mScrollDuration = 550;
    //是否无缝跳转
    private boolean sudden;

    public ViewPagerScroller(Context context) {
        super(context);
    }

    public ViewPagerScroller(Context context, Interpolator interpolator) {
        super(context, interpolator);
    }

    public ViewPagerScroller(Context context, Interpolator interpolator, boolean flywheel) {
        super(context, interpolator, flywheel);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {
        super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy) {
        super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);
    }

    public int getScrollDuration() {
        return mScrollDuration;
    }

    public void setScrollDuration(int scrollDuration) {
        this.mScrollDuration = scrollDuration;
    }

    public boolean isSudden() {
        return sudden;
    }

    public void setSudden(boolean zero) {
        this.sudden = zero;
    }
}复制代码

四、实现ViewPager的自动轮播
这个实现起来很是的简单。直接利用Handler延迟发送消息的功能来进行轮播滚动的计时，在消息的处理中改变ViewPager显示的Item，达到ViewPager的自动滚动效果，而后再Handler发送一个延迟消息，造成循环。

private Handler mTimeHandler = new Handler();
    private Runnable mTurningTask = new Runnable() {
        @Override
        public void run() {
            if (isTurning && mBannerViewPager != null) {
                int page = mBannerViewPager.getCurrentItem() + 1;
                mBannerViewPager.setCurrentItem(page);
                mTimeHandler.postDelayed(mTurningTask, mIntervalTime);
            }
        }
    };

    /** * 启动轮播 * @param intervalTime 轮播间隔时间 * @return */
    public CustomBanner<T> startTurning(long intervalTime) {
        isTurning = true;
        mIntervalTime = intervalTime;
        mTimeHandler.postDelayed(mTurningTask, mIntervalTime);
        return this;
    }复制代码

五、添加和更新指示器
指示器的指示点用指示器容器mIndicatorLayout来承载，当ViewPager滚动的时候，指示器也要相应的作更新

//根据轮播图的数量来添加指示器的点
    //指示器的点用ImageView来表示，样式由使用者自定义
    private void initIndicator(int count) {
        mIndicatorLayout.removeAllViews();
        if (count > 0) {
            for (int i = 0; i < count; i++) {
                ImageView imageView = new ImageView(mContext);
                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
0, DensityUtils.dp2px(mContext, 2), 0);
                mIndicatorLayout.addView(imageView, lp);
            }
        }
    }

    /** * 更新指示器 */
    private void updateIndicator() {
        int count = mIndicatorLayout.getChildCount();
        //获取ViewPager当前显示的Item。
        int currentPage = getCurrentItem();
        if (count > 0) {
            for (int i = 0; i < count; i++) {
                ImageView view = (ImageView) mIndicatorLayout.getChildAt(i);
                if (i == currentPage) {
                    //设置选中样式
                    view.setImageResource(mIndicatorSelectRes);
                } else {
                    //设置未选中样式
                    view.setImageResource(mIndicatorUnSelectRes);
                }
            }
        }
    }复制代码

六、设置轮播图数据
把轮播图的基本功能都实现了以后，接下来就是填充数据了。下面先看设置数据的方法：

/** * 设置轮播图数据 * @param creator 建立和更新轮播图View的接口 * @param data 轮播图数据 * @return */
    public CustomBanner<T> setPages(ViewCreator<T> creator, List<T> data) {
        mAdapter = new BannerPagerAdapter<T>(mContext, creator, data);
        mBannerViewPager.setAdapter(mAdapter);
        return this;
    }复制代码

代码很是的简单，其实就是给mBannerViewPager设置了一个Adapter。上面的setPages方法接收两个参数：
一、creator：这是一个ViewCreator对象，ViewCreator是负责建立和更新轮播图的接口。
二、data：这是轮播图的数据。
他们的泛型T是轮播图的数据类型，轮播图的数据类型能够是任何的类型。
下面是ViewCreator接口代码

/** * 建立和更新轮播图View的接口 * @param <T> */
    public interface ViewCreator<T> {
        //建立轮播图的每一个项的View
        View createView(Context context, int position);
        //更新轮播图
        void updateUI(Context context, View view, int position, T data);
    }复制代码

createView方法的返回值是View而不是ImageView，因此CustomBanner能够支持轮播全部的布局，而不只仅是ImageView，虽然咱们大部分状况使用的都是ImageView。
若是你如今还不清楚ViewCreator是干什么的，那么请看下面的代码。下面是轮播图适配器BannerPagerAdapter的核心代码，经过这段代码，你应该就能很清晰的理解ViewCreator的做用了。

@Override
    public Object instantiateItem(ViewGroup container, final int position) {

        View view = views.get(position);

        if (view == null) {
            //mCreator就是调用者传入的ViewCreator对象
            //经过mCreator建立轮播图的布局，因此轮播图的布局是由调用者建立的
            view = mCreator.createView(mContext, position);
            views.put(position, view);
        }

        final int item = getActualPosition(position);
        final T t = mData.get(item);

        //经过mCreator把更新轮播图数据的操做交给调用者去实现
        mCreator.updateUI(mContext, view, item, t);
        container.addView(view);
        return view;
    }复制代码

CustomBanner的实现思路和代码分析到这里就结束了。相信如今你们对于轮播图的实现已经有了必定的了解了。至于CustomBanner的使用，我将在下一章《Android轮播图控件CustomBanner的使用讲解》具体讲解，欢迎阅读。下面先给你们看一下CustomBanner的效果：

演示.gif

上面贴出来的代码只是CustomBanner的代码摘要，完整的代码请访问我在GitHub中的CustomBanner项目。

文章已同步到个人CSDN博客