顶部图片循环播放开源库Android-ConvenientBanner的使用-优快云博客

转载自：http://blog.youkuaiyun.com/duolaimila/article/details/51025729

+ ：http://blog.youkuaiyun.com/xroocky/article/details/50837866

ConvenientBanner
通用的图片轮播控件。支持无限循环，可以设置自动翻页和时间(而且非常智能，手指触碰则暂停翻页，离开自动开始翻页。你也可以设置在界面onPause的时候不进行自动翻页，onResume之后继续自动翻页)，并且提供多种翻页特效。对比其他图片轮播控件，大多都需要对源码进行改动才能加载网络图片，或者帮你集成不是你所需要的图片缓存库。而这个库能让有代码洁癖的你欢喜，不需要对库源码进行修改你就可以使用任何你喜欢的网络图片库进行配合。
首先先来看效果图：

使用这个控件首先得先添加依赖

compile 'com.bigkoo:convenientbanner:2.0.5'
 
 1
 
 1

然后在布局文件中

<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" //控制循环与否
/>
 
 1
2
3
4
5
6
7
 
 1
2
3
4
5
6
7

直接举一个加载网络图片的例子：

//开始自动翻页
        convenientBanner.startTurning(4000);
        convenientBanner.setPageTransformer(new AccordionTransformer());
        convenientBanner.setPages(new CBViewHolderCreator<NetworkImageHolderView>() {
                        @Override
                        public NetworkImageHolderView createHolder() {
                            return new NetworkImageHolderView();
                        }
                    }, Arrays.asList(imgs)).setPageIndicator(new int[]{R.drawable.dot, R.drawable.dot_selected}).setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.ALIGN_PARENT_RIGHT);

public class NetworkImageHolderView implements Holder<String> {
        private ImageView imageView;

        @Override
        public View createView(Context context) {
            imageView = new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            return imageView;
        }
        @Override
        public void UpdateUI(Context context, int position, String data) {
            Glide.with(getActivity()).load(data).into(imageView);
        }
    }
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

首先获取该控件，，然后设置自动轮播时间4秒，然后设置轮播特效。然后使用setPages方法，里面有两个参数，CBViewHolderCreator对象和图片资源集合。
首先我们自定义一个NetworkImageHolderView 继承自Holder，然后在createView中创建imageview，
在UpdateUi中显示到对应imageview上，这里的data就是传过来的图片资源，我这里是url地址。Glide是一个图片加载框架。
这样几部就可以实现一个通用的图片轮播控件，也可以当作导航页使用，轮播的也不一定是图片，可以随自己需求定制。

转载请注明出处：http://blog.youkuaiyun.com/xroocky/article/details/50837866
参考源码：http://download.youkuaiyun.com/detail/xroocky/9456930

库地址：https://github.com/saiwu-bigkoo/Android-ConvenientBanner

自己的技术还不够，所以在需要用的时候就直接找现成的库拿来用了，以后有时间了好好读一下源码学习学习，再自己尝试写一个。
虽然作者在README.md里面已经写得很详细了，但是在使用的过程中遇到了一些小问题，所以把使用方法和使用中遇到的问题记录一下。

`gradle`依赖：

compile ‘com.bigkoo:convenientbanner:2.0.5’

布局`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" //控制循环与否 />
 
 1
2
3
4
5
6
 
 1
2
3
4
5
6

`Java`代码：

convenientBanner.setPages(new CBViewHolderCreator<NetworkImageHolderView>() {
                @Override
                public NetworkImageHolderView createHolder() {
                    return new NetworkImageHolderView();
                }
            }, topNewsItems)    //设置需要切换的View
            .setPointViewVisible(true)    //设置指示器是否可见
            .setPageIndicator(new int[]{R.drawable.dot_unselected, R.drawable.dot_selected})   //设置指示器圆点
            .startTurning(5000)     //设置自动切换（同时设置了切换时间间隔）
            .stopTurning()    //关闭自动切换
            .setManualPageable(false)  //设置手动影响（设置了该项无法手动切换）
            .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.ALIGN_PARENT_RIGHT) //设置指示器位置（左、中、右）
            .setOnItemClickListener(this); //设置点击监听事件
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
 
 1
2
3
4
5
6
7
8
9
10
11
12
13

作者单独把etworkImageHolderView类拿出来了，为了方便使用者改写，来实现复杂布局的切换。原etworkImageHolderView如下：

public class NetworkImageHolderView implements Holder<String> {
    private ImageView imageView;
    @Override
    public View createView(Context context) {
        //你可以通过layout文件来创建，也可以像我一样用代码创建，不一定是Image，任何控件都可以进行翻页
        imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        return imageView;
    }

    @Override
    public void UpdateUI(Context context,int position, String data) {
        imageView.setImageResource(R.drawable.ic_default_adimage);
        ImageLoader.getInstance().displayImage(data,imageView);
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

作者是使用universal-image-loader来加载图片的，这里仅放置了一个ImageView，然后通过UpdateUI方法的第三个参数data（图片URL）来加载图片。
在这里可以使用LayoutInflater来加载一个布局，然后通过第三个参数来更新UI。

public class NetworkImageHolderView implements Holder<BannerItem> {
    private View view;

    @Override
    public View createView(Context context) {
        view = LayoutInflater.from(context).inflate(R.layout.banner_item, null, false);
        return view;
    }

    @Override
    public void UpdateUI(Context context, int position, BannerItem data) {
        ((TextView)view.findViewById(R.id.tv_title)).setText(data.getTitle());
        ((SimpleDraweeView)view.findViewById(R.id.sdv_background)).setImageURI(Uri.parse(data.getImage()));
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

其中R.layout.banner_item是需要切换的布局，BannerItem类中存放的是两个String，一个是图片上方的文字，一个是图片的URL

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/sdv_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="20sp"
        android:textColor="@android:color/white"
        android:layout_marginBottom="20dp"
        android:gravity="bottom"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"/>
</FrameLayout>