用RecyclerView打造一個輪播圖（進階版）

大頭呆發表於2017-11-22
View

前言

前幾天寫了篇《用RecyclerView打造一個輪播圖》（以下簡稱基礎版）,看到有讀者評論說相比Viewpager，用RecyclerView看起來沒什麼特別的優勢。究其原因，目前只用到了RecyclerView最基礎的一部分功能。其實相比Viewpager實現的輪播圖，RecyclerView版的最大優勢就在於它的靈活多變性，可定製性高。本篇文章將通過利用LayoutManger、SnapHelper等RecyclerView的輔助類來實現一系列更為炫酷的輪播圖。

初試：豎直輪播圖

基礎版中，RecyclerView設定了預設橫向的LinearLayoutManager:
LinearLayoutManager indicatorLayoutManager = new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false);
那麼我們再來加個屬性：

 <attr name="orientation" format="enum">
            <enum name="horizontal" value="0"/>
            <enum name="vertical" value="1" />
 </attr>複製程式碼

同時在佈局檔案中設定app:orientation="vertical",讓LinearLayoutManager的佈局方向變為豎直（為了保持統一，標示點佈局方向跟隨滑動方向），就是這麼簡單，一款豎直滑動的無限輪播圖就打造完成了！

實戰：仿魅族輪播圖

之前有篇文章ViewPager系列之 仿魅族應用的廣告BannerView,不過這是用ViewPager實現的，那我們就來個RecyclerView版的，而實現重點的就在於自定義LayoutManger（如果不太瞭解這部分的知識，請先移步學習下(╯︵╰)）。
這次先上成果圖，再慢慢分析：

以上的效果僅僅是換了一個LayoutManger和一個itemview（為了顯示效果，imageview外面套了cardview）。
首先我們做準備工作，定義幾個常量：

private  float SCALE_RATE = 1.2f;當前圖片放大比例
private  int mOrientation = HORIZONTAL;佈局方向（HORIZONTAL or VERTICAL）
private  int itemSpace = 0;圖片之間的間距複製程式碼

自定layoutmanager第一步當然是實現唯一必須要實現的方法：

  @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
    }複製程式碼

然而並沒有什麼用，99%的自定義LayoutManager都是這麼寫的，因為我們沒有把view新增到 RecyclerView中。所以接下來就是重寫onLayoutChildren()來進行佈局，這個方法的作用相當於普通Viewgroup中的onLayout()方法，在RecyclerView滾動，資料改變等情況都會呼叫此方法來重新佈局。

 @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        if (state.getItemCount() == 0) {
            removeAndRecycleAllViews(recycler);
            mOffset = 0;
            return;
        }//沒有Itemitemview,不做處理

        ensureLayoutState();

        if (getChildCount() == 0) {//沒有可見的itemview，初始化需要用到的一些引數
            View scrap = recycler.getViewForPosition(0);
            measureChildWithMargins(scrap, 0, 0);
            mDecoratedMeasurement = mOrientationHelper.getDecoratedMeasurement(scrap);
            mDecoratedMeasurementInOther = mOrientationHelper.getDecoratedMeasurementInOther(scrap);
            mSpaceMain = (mOrientationHelper.getTotalSpace() - mDecoratedMeasurement) / 2;
            mSpaceInOther = (mOrientationHelper.getTotalSpaceInOther() - mDecoratedMeasurementInOther) / 2;
            mInterval = setInterval();
            setUp();
            mLeftItems = (int) Math.abs(minRemoveOffset() / mInterval) + 1;
            mRightItems = (int) Math.abs(maxRemoveOffset() / mInterval) + 1;
        }

        if (mPendingScrollPosition != NO_POSITION) {
            mOffset = mReverseLayout ?
                    mPendingScrollPosition * -mInterval : mPendingScrollPosition * mInterval;
        }
        //開始佈局
        detachAndScrapAttachedViews(recycler);
        layoutItems(recycler);
    }複製程式碼

上面只是做一些初始化工作，接下來是layoutItems方法，就貼一些重要程式碼：

取當前可見的view進行放置，遍歷計算位置
final int currentPos = mReverseLayout ?
                -getCurrentPositionOffset() : getCurrentPositionOffset();
        int start = currentPos - mLeftItems;
        int end = currentPos + mRightItems;
for (int i = start; i < end; i++) {
    if (findViewByPosition(adapterPosition) == null) {
         final View scrap = recycler.getViewForPosition(adapterPosition);
         measureChildWithMargins(scrap, 0, 0);
         resetViewProperty(scrap);
        final float targetOffset = getProperty(i) - mOffset;
        layoutScrap(scrap, targetOffset);複製程式碼

具體的佈局方法，主要就是：回收不可見的itemview，遍歷可見的itemview進行位置計算並放置：

 private void layoutScrap(View scrap, float targetOffset) {
        final int left = calItemLeft(scrap, targetOffset);
        final int top = calItemTop(scrap, targetOffset);
        if (mOrientation == VERTICAL) {
            layoutDecorated(scrap, mSpaceInOther + left, mSpaceMain + top,
                    mSpaceInOther + left + mDecoratedMeasurementInOther, mSpaceMain + top + mDecoratedMeasurement);
        } else {
            layoutDecorated(scrap, mSpaceMain + left, mSpaceInOther + top,
                    mSpaceMain + left + mDecoratedMeasurement, mSpaceInOther + top + mDecoratedMeasurementInOther);
        }
        setItemViewProperty(scrap, targetOffset);
    }
    //在滾動時根據距離動態縮放itemView（在這裡你可以自定義滑動動畫，改變 itemView的屬性，透明度，大小，角度等等）
     private void setItemViewProperty(View itemView, float targetOffset) {
        float scale = calculateScale(targetOffset + mSpaceMain);
        itemView.setScaleX(scale);
        itemView.setScaleY(scale);
    }複製程式碼

接下來是處理滾動，讓recyclerview可以滾動起來：

//設定允許橫向或豎向滾動
  @Override
    public boolean canScrollHorizontally() {
        return mOrientation == HORIZONTAL;
    }

    @Override
    public boolean canScrollVertically() {
        return mOrientation == VERTICAL;
    }複製程式碼
//處理橫向或豎向滾動
 @Override
    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
        //位移0、沒有子View 當然不移動
       if (getChildCount() == 0 || dy == 0) {
            return 0;
        }

          int willScroll = dy;
          float realDx = dy / getDistanceRatio();//真正滑動的距離
       // 重新佈局可見的view
        for (int i = 0; i < getChildCount(); i++) {
            final View scrap = getChildAt(i);
            final float delta = propertyChangeWhenScroll(scrap) - realDx;
            layoutScrap(scrap, delta);
        }
    }複製程式碼

因為在我們在佈局和滾動時考慮了橫向和豎向的情況，所以設定豎直的無限輪播圖也很簡單：
new BannerLayoutManager(BannerLayoutManager.VERTICAL, Util.dp2px(10));
（方向豎直，圖片間距10dp，預設放大1.2倍）

總結

看到這，我想大家都能看到用RecyclerView實現無限輪播圖的強大的之處了吧：
adapter可以處理itemview佈局和無限輪播；LayoutManager可以處理整體佈局和滑動動畫；SnapHelper可以讓itemview滑動起來像viewpager一樣（一般用自帶的PagerSnapHelper就行了）。
而上面的所有動畫效果僅僅都是通過改動LayoutManager，然後再通過設定不同itemview，就可以做出各種不同效果。最後感謝以下文章提供LayoutManager的實現思路。

github地址

參考資料

blog.csdn.net/zxt0601/art…
www.jianshu.com/p/7bb7556bb…

相關文章