1. 程式人生 > >讓你明明白白的使用RecyclerView——SnapHelper詳解

讓你明明白白的使用RecyclerView——SnapHelper詳解

一、前言

Google最新發布的support v4包更新到24.2.0,由原來的一個大包分割成多個小module。這樣做真是太貼心不過了,以後不會再因為單獨使用某一個功能而將整個v4包匯入專案中,而是我想用哪個就匯入哪個,很大程度上減小了APK的大小。

com.android.support:support-compat:24.2.0 
com.android.support:support-core-utils:24.2.0 
com.android.support:support-core-ui:24.2.0 
com.android.support:support-media-compat:24.2.0 
com.android.support:support-fragment:24.2.0

SnapHelper就是這次更新裡面的一個,其實它是對RecyclerView功能的一種拓展。 
想要詳細瞭解其他更新的,可以點選這個連結

二、SnapHelper介紹

SnapHelper的實現原理是監聽RecyclerView.OnFlingListener中的onFling介面。LinearSnapHelper是抽象類SnapHelper的具體實現。 
通過LinearSnapHelper,可以使RecyclerView實現類似ViewPager的功能,無論怎麼滑動最終停留在某頁正中間。 
區別就在於,ViewPager一次只能滑動一頁,RecyclerView+SnapHelper方式可以實現一次滑動好幾頁。

三、實現效果

這裡主要是介紹實現兩種效果。

  • 自帶的LinearSnapHelper實現 
    可以看到類似ViewPager,將某頁居中顯示,實現也是很簡單,只要下面的兩行程式碼
        LinearSnapHelper mLinearSnapHelper = new LinearSnapHelper();
        mLinearSnapHelper.attachToRecyclerView(mRecyclerView);
  • 1
  • 2

這裡寫圖片描述

  • 自定義SnapHelper實現

    既然可以居中顯示,那我們能不能讓它橫向左對齊顯示呢,答案當然是可以的,這就需要我們自己定義一個左對齊的SnapHelper。 
    先來看個效果,o(∩_∩)o 哈哈。 
    這裡寫圖片描述

四、實現過程

SnapHelper 是一個抽象類,直接繼承需要實現三個方法:

  1. 當拖拽或滑動結束時會回撥該方法,返回一個out = int[2],out[0]x軸,out[1] y軸 ,這個值就是需要修正的你需要的位置的偏移量 
    public abstract int[] calculateDistanceToFinalSnap(@NonNull LayoutManager layoutManager, @NonNull View targetView);

  2. 上面方法有一個targetView吧 就是這個方法返回的 
    public abstract View findSnapView(LayoutManager layoutManager);

  3. 用於Fling,根據速度返回你要滑到的position 
    public abstract int findTargetSnapPosition(LayoutManager layoutManager, int velocityX, int velocityY);

但是,我們不直接繼承SnapHelper,而是繼承它的實現類LinearSnapHelper,程式碼如下:


/**
 * Created by hiwhitley on 2016/9/4.
 */
public class MySnapHelper extends LinearSnapHelper {

    private OrientationHelper mHorizontalHelper;

    @Nullable
    @Override
    public int[] calculateDistanceToFinalSnap(RecyclerView.LayoutManager layoutManager, View targetView) {
        int[] out = new int[2];
        if (layoutManager.canScrollHorizontally()) {
            out[0] = distanceToStart(targetView, getHorizontalHelper(layoutManager));
        } else {
            out[0] = 0;
        }

        return out;
    }

    private int distanceToStart(View targetView, OrientationHelper helper) {
        return helper.getDecoratedStart(targetView) - helper.getStartAfterPadding();
    }

    @Nullable
    @Override
    public View findSnapView(RecyclerView.LayoutManager layoutManager) {
        return findStartView(layoutManager, getHorizontalHelper(layoutManager));
    }

    private View findStartView(RecyclerView.LayoutManager layoutManager,
                               OrientationHelper helper) {

        if (layoutManager instanceof LinearLayoutManager) {
            int firstChild = ((LinearLayoutManager) layoutManager).findFirstVisibleItemPosition();
            int lastChild = ((LinearLayoutManager) layoutManager).findLastVisibleItemPosition();
            if (firstChild == RecyclerView.NO_POSITION) {
                return null;
            }
            if (lastChild == layoutManager.getItemCount() - 1) {
                return layoutManager.findViewByPosition(lastChild);
            }

            View child = layoutManager.findViewByPosition(firstChild);

            if (helper.getDecoratedEnd(child) >= helper.getDecoratedMeasurement(child) / 2
                    && helper.getDecoratedEnd(child) > 0) {
                return child;
            } else {
                return layoutManager.findViewByPosition(firstChild + 1);
            }
        }

        return super.findSnapView(layoutManager);
    }


    private OrientationHelper getHorizontalHelper(
            @NonNull RecyclerView.LayoutManager layoutManager) {
        if (mHorizontalHelper == null) {
            mHorizontalHelper = OrientationHelper.createHorizontalHelper(layoutManager);
        }
        return mHorizontalHelper;
    }
}

基本就是參考著自帶的LinearSnapHelper實現的, 
這裡有幾點需要特別注意一下,

第11~24行:我們只考慮橫向左對齊,所以只要處理out[0]的值,distanceToStart()方法返回修正的偏移量。

第41~43行:這是為了解決當翻到最後一頁的時候,最後一個Item不能完整顯示的問題(不信,你可以註釋了試試就知道啦)。

            if (lastChild == layoutManager.getItemCount() - 1) {
                return layoutManager.findViewByPosition(lastChild);
            }

第47~52行:得到此時需要左對齊顯示的條目

         if (helper.getDecoratedEnd(child) >= helper.getDecoratedMeasurement(child) / 2
                    && helper.getDecoratedEnd(child) > 0) {
                return child;
            } else {
                return layoutManager.findViewByPosition(firstChild + 1);
            }

最後只要用上我們自己的SnapHelper,就可以輕鬆搞定了。

        MySnapHelper mMySnapHelper = new MySnapHelper();
        mMySnapHelper.attachToRecyclerView(mRecyclerView);

五、原始碼下載

GitHub下載 
原始碼下載 
如果您覺得對你有所幫助,歡迎Star和留言,來鼓勵一下我。o(∩_∩)o

六、拓展閱讀


//***************************這是我的用法:**************************************
這是我的recyclerView橫向滑動位置控制器的地址連結: