在RecyclerView里使用图片轮播

图片轮播控件Banner，结合MultiType框架使用

前段时间学习了基于RecyclerView的MultiType框架，

最近在做项目的时候碰到需要在RecyclerView里使用图片轮播的功能，所以我就准备在项目中将图片轮播和MultiType框架结合使用。

为了加深印象，特将项目中的一些代码记录下来，以便以后翻阅查询。

网上的图片轮播代码不计其数，作为懒到极致的我来说自然是找个容易上手的框架更为实际。在此我用的是github上大神的框架,

这里放上作者的github地址：https://github.com/youth5201314/banner

感谢大神的无私奉献。

对于新手的我来说该框架出奇的好用，特别适合初学者和像我这样的新手。

作者的github页面是这样介绍这款框架的：

- Android广告图片轮播控件，支持无限循环和多种主题，可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加载框架等！

在我粗略翻阅了一遍之后便对该框架的使用有了初步的了解，上手起来也特别容易。

以下是我结合MultiType框架开发的步骤：

1、在项目的build.gradle中添加以下依赖：

//picasso 图片加载框架
compile 'it.sephiroth.android.library.picasso:picasso:2.5.2.4b'
//multytype框架
compile 'me.drakeet.multitype:multitype:2.4.1'
//图片轮播控件
compile 'com.youth.banner:banner:1.4.8'

2、将以下布局添加到布局文件中

<com.youth.banner.Banner
<!-- 若作为布局文件的最外层，需要添加该行代码 -->
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/banner_fragment_first_pic_loop"
android:layout_width="match_parent"
android:layout_height="180dp"/>

注：该布局可以单独作为一个布局文件，也可以添加到ViewGroup中

3、自定义一个图片加载器类继承ImageLoader，并重写displayImage方法，

如下所示：

/**
* 图片加载器
*/
public class PicLoopImageLoader extends ImageLoader {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
Picasso.with(context).load((String) path).into(imageView);
//图片加载也可以用Glide的框架
//Glide.with(context).load((String)path).into(imageView);
}
}

4、在ViewProvider里的ViewHolder里定义一个banner对象

class PicLoopViewHolder extends RecyclerView.ViewHolder {
Banner banner;
public PicLoopViewHolder(Banner banner) {
super(banner);
this.banner = banner;
}
}

5、随后在onCreateViewHolder方法里找到包含Banner的布局文件

@NonNull
@Override
protected PicLoopViewHolder onCreateViewHolder(@NonNull LayoutInflater inflater, @NonNull ViewGroup parent) {
Banner banner = (Banner) inflater.inflate(R.layout.fragment_first_pic_loop, parent, false);
return new PicLoopViewHolder(banner);
}

在该项目中我是将Banner的布局单独作为一个布局文件，因此上述代码直接找到的是Banner控件对象，将Banner对象直接传给ViewHolder

6、在onBindViewHolder里使用ViewHolder中的banner对象

holder.banner.setImageLoader(new PicLoopImageLoader())
//设置banner的样式
.setBannerStyle(BannerConfig.CIRCLE_INDICATOR)
//这里传的是图片的地址集合
.setImages(picLoop.getImageList())
.setDelayTime(2500)  //设置图片轮播的间隔
.setIndicatorGravity(BannerConfig.RIGHT)
.start();

查看BannerConfig的源码可知有以下几种样式可供选择：

BannerConfig.NOT_INDICATOR=0;
BannerConfig.CIRCLE_INDICATOR=1;
BannerConfig.NUM_INDICATOR=2;
BannerConfig.NUM_INDICATOR_TITLE=3;
BannerConfig.CIRCLE_INDICATOR_TITLE=4;
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE=5;

7、在Activity或Fragment里设置RecyclerView，LayoutManager，adapter等，具体步骤查找MultiType部分的代码

放上图片轮播部分的截图：