教你如何用 RecyclerView 做一個好用的輪播圖

澀郎發表於2017-03-03

引子

一般情況下，我們手機 App 上輪播圖一般都是幾張圖來回迴圈，最多也就10幾張，一般都是在10張以內的輪播。所以我們一般可能都是自己寫，還有可能用到了別人寫的第三方庫。由此可能由於圖片輪播數量不大，所以沒有考慮複用機制，以致於放上百張圖片或者上千張圖片輪播時，導致應用崩潰，記憶體溢位的情況。

由於工作的需要，需要放上百張圖片輪播，所以想做一個可能能夠承受住的輪播，當然最節省記憶體的方式可能就是複用了。其實自己寫複用也可以，配合 ViewPager ，但是想到了 RecyclerView 本身自帶複用效果，那為何不用 RecyclerView 做一個呢？

靈感來源

來源其實很簡單，那就是前幾天剛剛分享的那篇文章《使用 RecyclerView 實現 Gallery 畫廊效果，並控制 Item 停留位置》 ,那 RecyclerView 既然是可以做到畫廊效果，還可以控制 Item 的停留位置，那就通過這個思路就可以實現輪播圖效果啊。所以就有了下面的方法。

使用方法

在這裡呢，我把我實現的輪播圖做成了一個輪播庫放到了 GitHub 上了，有興趣的可以直接下載原始碼研究一下我是怎麼實現的，具體的程式碼介紹直接看我原始碼即可。

原始碼地址：github.com/loonggg/Rec…

先看效果圖：

使用方法如下：

Step 1. Add the JitPack repository to your build file

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

  allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
  }複製程式碼

Step 2. Add the dependency

dependencies {
    compile 'com.github.loonggg:RecyclerViewBanner:v1.1'
}複製程式碼

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

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) {
            //點選事件
        }
    });複製程式碼