ConvenientBanner具体使用

一.Github地址

二.简介

ConvenientBanner 是Android项目开发过程中轮播图的一种实现,在github上有3k的star.轮播图在我们实际开发项目中是一个很常见的应用,正好项目中用到了这个组件,
就看了下它的源码,这里就分析下.
先看下它的包结构:

包目录结构

可以看到,代码量并不多

三.具体使用

(1) 添加gradle 依赖

compile 'com.bigkoo:convenientbanner:2.0.5'

(2) 在你的xml文件中添加

<com.bigkoo.convenientbanner.ConvenientBanner
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/convenientBanner"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     app:canLoop="true" //控制循环与否
/>

(3) 在你的代码中添加

//自定义你的Holder，实现更多复杂的界面，不一定是图片翻页，其他任何控件翻页亦可。
convenientBanner.setPages(
                new CBViewHolderCreator<LocalImageHolderView>() {
                    @Override
                    public LocalImageHolderView createHolder() {
                        return new LocalImageHolderView();
                    }
                }, localImages)
                //设置两个点图片作为翻页指示器，不设置则没有指示器，可以根据自己需求自行配合自己的指示器,不需要圆点指示器可用不设
                .setPageIndicator(new int[]{R.drawable.ic_page_indicator, R.drawable.ic_page_indicator_focused});

public class LocalImageHolderView implements Holder<Integer>{
    private ImageView imageView;
    @Override
    public View createView(Context context) {
        imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        return imageView;
    }

    @Override
    public void UpdateUI(Context context, final int position, Integer data) {
        imageView.setImageResource(data);
    }
}

具体可查看convenientBanner的源码,这里不做过多介绍.

四.源码分析

1.ConvenientBanner 类

该类是继承自LinerLayout的一个自定义view,它内部包含了一个自定义的viewpager和一个LinerLayout.其中viewpager自不必说,是用来放具体的页面的.而LinerLayout就是放我们通常放在viewpager底部的指示器indicater.
这里可以看出来:

 <com.bigkoo.convenientbanner.view.CBLoopViewPager
            android:id="@+id/cbLoopViewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- 翻页指示点的viewgroup -->

        <LinearLayout
            android:id="@+id/loPageTurningPoint"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dp"
            android:layout_centerHorizontal="true"
            android:orientation="horizontal" >
        </LinearLayout>

然后它内部封装了一系列方法,用来控制viewpager的滚动,指示器的显示等等.
我们看几个比较重要的:

(1) setScrollDuration方法

该方法用来控制viewpager的滑动速度.我们知道,viewpager内部有一个Scroller,通过这个Scroller来控制滑动.那么通过改变这个Scroller的滑动速度,也就改变了viewpager的滑动速度.由于viewpager的mScroller是一个私有的成员变量,所有只能通过反射来获取.代码如下:

            Field mScroller = null;
            mScroller = ViewPager.class.getDeclaredField("mScroller");
            mScroller.setAccessible(true);
            scroller = new ViewPagerScroller(
                    viewPager.getContext());
            mScroller.set(viewPager, scroller);

这里可以看到,它自定义了一个ViewPagerScroller用来继承Scroller,然后重写其中的startScroll方法用来改变滑动速度,具体由startScroll中的duration参数来控制,这里它设成了800,值越大,滑动越慢,因为duration本来就是指的时间,这个不难理解.

(2) setManualPageable方法

这个方法用来设置是否可以手动翻页,设置的方法也很简单,将这个变量设置给viewpager,如果设置成false则viewpager中的onInterceptTouchEvent方法返回false.

(3) setCanLoop方法

这个方法用来控制viewpager是否可以循环轮播,那么它是怎么通过该方法来控制viewpager是否可以轮播的呢?答案就在adapter中,我们知道,在adapter中有一个getCount方法,该方法来控制viewpager有多少个item,也就是有多少页,这里它返回了这个值:

 public int getCount() {
        return canLoop ? getRealCount()*MULTIPLE_COUNT : getRealCount();
    }

其中MULTIPLE_COUNT 的值是:

private final int MULTIPLE_COUNT = 300;

getRealCount()实现是这样:

public int getRealCount() {
        return mDatas == null ? 0 : mDatas.size();
    }

也就是说它返回了数据总大小的300大小,那这里就有疑问了,如果用户停留的足够长,轮播300倍的次数后是不是就不轮播了?肯定不是!如果是,那这就是一个bug了.事情其实是这样的:

@Override
    public void finishUpdate(ViewGroup container) {
        int position = viewPager.getCurrentItem();
        if (position == 0) {
            position = viewPager.getFristItem();
        } else if (position == getCount() - 1) {
            position = viewPager.getLastItem();
        }
        try {
            viewPager.setCurrentItem(position, false);
        }catch (IllegalStateException e){}
    }

finishUpdate这个方法是在instantiateItem或者destroyItem方法之后调用,代表数据更新完成,源码在这里进行了处理,如果当前位置是最后一个item,则重新把position的位置更新为实际大小的最后一位.其中getLastItem的实现如下:

public int getLastItem() {
        return mAdapter.getRealCount() - 1;
    }

通过这个处理,那么此刻也就真正的实现了viewpager的无限轮播了.

(4)startTurning方法

这个方法用来开启轮播.具体就是通过AdSwitchTask这个任务来控制,AdSwitchTask这是一个Runnable任务,在这个runnable任务中实现了viewpager的自动轮播,具体代码如下:

if (convenientBanner != null) {
                if (convenientBanner.viewPager != null && convenientBanner.turning) {
                    int page = convenientBanner.viewPager.getCurrentItem() + 1;
                    convenientBanner.viewPager.setCurrentItem(page);
                    convenientBanner.postDelayed(convenientBanner.adSwitchTask, convenientBanner.autoTurningTime);
                }
            }

可以看到,通过postDelayed方法来控制下一页的展示.

(7)stopTurning方法

这个很简单,就是移除轮播任务.直接看下代码:

public void stopTurning() {
        turning = false;
        removeCallbacks(adSwitchTask);
    }

(6)setPageIndicator方法

这个方法用来设置指示器,假如不调用,默认是没有指示器的.

(7) setPages(CBViewHolderCreator holderCreator, List<T> datas)方法

顾名思义,这个方法就是用来设置viewpager数据的,内部通过设置adapter的数据来设置viewpager的数据.这里需要注意到这个方法需要传递一个CBViewHolderCreator 的参数,该参数的类是一个接口.