教你如何用 RecyclerView 作一个好用的轮播图

引子

通常状况下,咱们手机 App 上轮播图通常都是几张图来回循环,最多也就10几张,通常都是在10张之内的轮播。因此咱们通常可能都是本身写,还有可能用到了别人写的第三方库。由此可能因为图片轮播数量不大,因此没有考虑复用机制,以至于放上百张图片或者上千张图片轮播时,致使应用崩溃,内存溢出的状况。javascript

因为工做的须要,须要放上百张图片轮播,因此想作一个可能可以承受住的轮播,固然最节省内存的方式可能就是复用了。其实本身写复用也能够,配合 ViewPager ,可是想到了 RecyclerView 自己自带复用效果,那为什么不用 RecyclerView 作一个呢?java

灵感来源

来源其实很简单,那就是前几天刚刚分享的那篇文章《使用 RecyclerView 实现 Gallery 画廊效果,并控制 Item 停留位置》 ,那 RecyclerView 既然是能够作到画廊效果,还能够控制 Item 的停留位置,那就经过这个思路就能够实现轮播图效果啊。因此就有了下面的方法。android

使用方法

在这里呢,我把我实现的轮播图作成了一个轮播库放到了 GitHub 上了,有兴趣的能够直接下载源码研究一下我是怎么实现的,具体的代码介绍直接看我源码便可。git

源码地址:github.com/loonggg/Rec…程序员

先看效果图:

使用方法以下:

Step 1. Add the JitPack repository to your build filegithub

Add it in your root build.gradle at the end of repositories:微信

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
  }复制代码

Step 2. Add the dependencymaven

dependencies {
    compile 'com.github.loonggg:RecyclerViewBanner:v1.1'
}复制代码

Step 3. There are a few xml attributes to customise the RecyclerViewBanneride

pointFocusBg 设置底部导航小圆点的选中状态颜色

pointUnfocusBg 设置底部导航小圆点的未选中状态颜色

interval 设置轮播图滚动间隔时间

isShowPoint 设置是否显示底部指示导航小圆点复制代码

Example

<com.loonggg.rvbanner.lib.RecyclerViewBanner android:id="@+id/rv_banner" android:layout_width="match_parent" android:layout_height="150dp" loonggg:interval="3000" loonggg:isShowPoint="true" />复制代码

Step 4. Impelement Listener

recyclerViewBanner = (RecyclerViewBanner) findViewById(R.id.rv_banner);
    final List<Banner> banners = new ArrayList<>();
    for (int i = 0; i < 2; i++) {
        banners.add(new Banner("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487221110004&di=d6043e4b0c90ddf3ea5096c3d8eb8f58&imgtype=0&src=http%3A%2F%2Fimage.tianjimedia.com%2FuploadImages%2F2014%2F067%2F5116EPAUD762_1000x500.jpg"));
        banners.add(new Banner("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487221129421&di=c085432cf7c15836f8a6479138740f39&imgtype=0&src=http%3A%2F%2Fimage85.360doc.com%2FDownloadImg%2F2015%2F05%2F0517%2F53199602_2.jpg"));
        banners.add(new Banner("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487221161254&di=fbb99c5dad3d5a2a2c8b0b44e8c0e081&imgtype=0&src=http%3A%2F%2Fimage.tianjimedia.com%2FuploadImages%2F2013%2F255%2FP52AOTE73EIG_1000x500.jpg"));
    }
    recyclerViewBanner.isShowIndicatorPoint(true);
    recyclerViewBanner.setRvBannerDatas(banners);
    recyclerViewBanner.setOnSwitchRvBannerListener(new RecyclerViewBanner.OnSwitchRvBannerListener() {
        @Override
        public void switchBanner(int position, ImageView bannerView) {
            Glide.with(bannerView.getContext()).load(banners.get(position % banners.size()).getUrl()).placeholder(R.mipmap.ic_launcher).into(bannerView);
        }
    });
    recyclerViewBanner.setOnRvBannerClickListener(new RecyclerViewBanner.OnRvBannerClickListener() {
        @Override
        public void onClick(int position) {
            //点击事件
        }
    });复制代码

源码地址:github.com/loonggg/Rec…gradle

欢迎你们关注个人技术分享公众号:非著名程序员(smart_android)。技术文章均先首发于个人技术分享的微信公众号。

相关文章
相关标签/搜索