1 . 前言
在一些特定的場景下，如照片的瀏覽，卡片列表滑動瀏覽，我們希望當滑動停止時可以將當前的照片或者卡片停留在螢幕中央，以吸引使用者的焦點。在Android 中，我們可以使用RecyclerView ＋ Snaphelper來實現，SnapHelper旨在支援RecyclerView的對齊方式，也就是通過計算對齊RecyclerView中TargetView 的指定點或者容器中的任何畫素點（包括前面說的顯示在螢幕中央）。本篇文章將詳細介紹SnapHelper的相關知識點。本文目錄如下：
2 . SnapHelper 介紹
Google 在 Android 24.2.0 的support 包中新增了SnapHelper,SnapHelper是對RecyclerView的擴充，結合RecyclerView使用，能很方便的做出一些炫酷的效果。SnapHelper到底有什麼功能呢？SnapHelper旨在支援RecyclerView的對齊方式，也就是通過計算對齊RecyclerView中TargetView 的指定點或者容器中的任何畫素點。,可能有點不好理解，看了後文的效果和原理分析就好理解了。看一下文件介紹：
SnapHelper繼承自RecyclerView.OnFlingListener,並實現了它的抽象方法onFling, 支援SnapHelper的RecyclerView.LayoutManager必須實現RecyclerView.SmoothScroller.ScrollVectorProvider介面，或者你自己實現onFling(int,int)方法手動處理。SnapHeper 有以下幾個重要方法：
attachToRecyclerView: 將SnapHelper attach 到指定的RecyclerView 上。
calculateDistanceToFinalSnap: 複寫這個方法計算對齊到TargetView或容器指定點的距離，這是一個抽象方法，由子類自己實現，返回的是一個長度為2的int 陣列out，out[0]是x方向對齊要移動的距離，out[1]是y方向對齊要移動的距離。
calculateScrollDistance: 根據每個方向給定的速度估算滑動的距離，用於Fling 操作。
findSnapView:提供一個指定的目標View 來對齊,抽象方法，需要子類實現
findTargetSnapPosition:提供一個用於對齊的Adapter 目標position,抽象方法，需要子類自己實現。
onFling:根據給定的x和 y 軸上的速度處理Fling。
3 . LinearSnapHelper & PagerSnapHelper
上面講了SnapHelper的幾個重要的方法和作用，SnapHelper是一個抽象類，要使用SnapHelper，需要實現它的幾個方法。而 Google 內建了兩個預設實現類，LinearSnapHelper和PagerSnapHelper ，LinearSnapHelper可以使RecyclerView 的當前Item 居中顯示（橫向和豎向都支援），PagerSnapHelper看名字可能就能猜到，使RecyclerView 像ViewPager一樣的效果，每次只能滑動一頁（LinearSnapHelper支援快速滑動）, PagerSnapHelper也是Item居中對齊。接下來看一下使用方法和效果。
(1) LinearSnapHelperLinearSnapHelper 使當前Item居中顯示，常用場景是橫向的RecyclerView, 類似ViewPager效果，但是又可以快速滑動（滑動多頁）。程式碼如下：
LinearLayoutManager manager = new LinearLayoutManager(getContext());
manager.setOrientation(LinearLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(manager);
// 將SnapHelper attach 到RecyclrView
LinearSnapHelper snapHelper = new LinearSnapHelper();
snapHelper.attachToRecyclerView(mRecyclerView);複製程式碼程式碼很簡單，new 一個SnapHelper物件，然後 Attach到RecyclerView 即可。
效果如下：
上面的效果為LayoutManager的方向為VERTICAL,那麼接下來看一下橫向效果，很簡單，和上面的區別只是更改一下LayoutManager的方向，程式碼如下：
LinearLayoutManager manager = new LinearLayoutManager(getContext());
manager.setOrientation(LinearLayoutManager.HORIZONTAL);
mRecyclerView.setLayoutManager(manager);
// 將SnapHelper attach 到RecyclrView
LinearSnapHelper snapHelper = new LinearSnapHelper();
snapHelper.attachToRecyclerView(mRecyclerView);複製程式碼效果如下：
如上圖所示，簡單幾行程式碼就可以用RecyclerView 實現一個類似ViewPager的效果，並且效果更贊。可以快速滑動多頁，當前頁劇中顯示，並且顯示前一頁和後一頁的部分。如果使用ViewPager來做還是有點麻煩的。除了上面的效果外，如果你想要和ViewPager 一樣，限制一次只讓它滑動一頁，那麼你就可以使用PagerSnapHelper了，接下來看一下PagerSnapHelper的使用效果。
(2) PagerSnapHelper (在Android 25.1.0 support 包加入的)PagerSnapHelper的展示效果和LineSnapHelper是一樣的，只是PagerSnapHelper 限制一次只能滑動一頁，不能快速滑動。程式碼如下：
PagerSnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(mRecyclerView);複製程式碼PagerSnapHelper效果如下：
上面展示的是PagerSnapHelper水平方向的效果，豎直方向的效果和LineSnapHelper豎直的方向的效果差不多，只是不能快速滑動，就不在介紹了，感興趣的可以把它們的效果都試一下。
上面就是LineSnapHelper和 PagerSnapHelper的使用和效果展示，瞭解了它的使用方法和效果，接下來我們看一下它的實現原理。
4 . SnapHelper原碼分析
上面介紹了SnapHelper的使用，那麼接下來我們來看一下SnapHelper到底是怎麼實現的，走讀一下原始碼：
(1) 入口方法，attachToRecyclerView
通過attachToRecyclerView方法將SnapHelper attach 到RecyclerView，看一下這個方法做了哪些事情：
/**
*
* 1,首先判斷attach的RecyclerView 和原來的是否是一樣的，一樣則返回，不一樣則替換
*
* 2，如果不是同一個RecyclerView，將原來設定的回撥全部remove或者設定為null
*
* 3，Attach的RecyclerView不為null,先2設定回撥 滑動的回撥和Fling操作的回撥，
* 初始化一個Scroller 用於後面做滑動處理，然後呼叫snapToTargetExistingView
*
*
*/
public void attachToRecyclerView(@Nullable RecyclerView recyclerView)
throws IllegalStateException {
if (mRecyclerView == recyclerView) {
return; // nothing to do
}
if (mRecyclerView != null) {
destroyCallbacks();
}
mRecyclerView = recyclerView;
if (mRecyclerView != null) {
setupCallbacks();
mGravityScroller = new Scroller(mRecyclerView.getContext(),
new DecelerateInterpolator());
snapToTargetExistingView();
}
}複製程式碼(2) snapToTargetExistingView ：這個方法用於第一次Attach到RecyclerView 時對齊TargetView，或者當Scroll 被觸發的時候和fling操作的時候對齊TargetView 。在attachToRecyclerView和onScrollStateChanged中都呼叫了這個方法。
/**
*
* 1,判斷RecyclerView 和LayoutManager是否為null
*
* 2，呼叫findSnapView 方法來獲取需要對齊的目標View(這是個抽象方法，需要子類實現)
*
* 3，通過calculateDistanceToFinalSnap 獲取x方向和y方向對齊需要移動的距離
*
* 4，最後通過RecyclerView 的smoothScrollBy 來移動對齊
*
*/
void snapToTargetExistingView() {
if (mRecyclerView == null) {
return;
}
LayoutManager layoutManager = mRecyclerView.getLayoutManager();
if (layoutManager == null) {
return;
}
View snapView = findSnapView(layoutManager);
if (snapView == null) {
return;
}
int[] snapDistance = calculateDistanceToFinalSnap(layoutManager, snapView);
if (snapDistance[0] != 0 || snapDistance[1] != 0) {
mRecyclerView.smoothScrollBy(snapDistance[0], snapDistance[1]);
}
}複製程式碼(3) Filing 操作時對齊：SnapHelper繼承了 RecyclerView.OnFlingListener，實現了onFling方法。
/**
* fling 回撥方法，方法中呼叫了snapFromFling，真正的對齊邏輯在snapFromFling裡
*/
@Override
public boolean onFling(int velocityX, int velocityY) {
LayoutManager layoutManager = mRecyclerView.getLayoutManager();
if (layoutManager == null) {
return false;
}
RecyclerView.Adapter adapter = mRecyclerView.getAdapter();
if (adapter == null) {
return false;
}
int minFlingVelocity = mRecyclerView.getMinFlingVelocity();
return (Math.abs(velocityY) > minFlingVelocity || Math.abs(velocityX) > minFlingVelocity)
&& snapFromFling(layoutManager, velocityX, velocityY);
}
/**
*snapFromFling 方法被fling 觸發，用來幫助實現fling 時View對齊
*
*/
private boolean snapFromFling(@NonNull LayoutManager layoutManager, int velocityX,
int velocityY) {
// 首先需要判斷LayoutManager 實現了ScrollVectorProvider 介面沒有，
//如果沒有實現 ,則直接返回。
if (!(layoutManager instanceof ScrollVectorProvider)) {
return false;
}
// 建立一個SmoothScroller 用來做滑動到指定位置
RecyclerView.SmoothScroller smoothScroller = createSnapScroller(layoutManager);
if (smoothScroller == null) {
return false;
}
// 根據x 和 y 方向的速度來獲取需要對齊的View的位置，需要子類實現。
int targetPosition = findTargetSnapPosition(layoutManager, velocityX, velocityY);
if (targetPosition == RecyclerView.NO_POSITION) {
return false;
}
// 最終通過 SmoothScroller 來滑動到指定位置
smoothScroller.setTargetPosition(targetPosition);
layoutManager.startSmoothScroll(smoothScroller);
return true;
}複製程式碼其實通過上面的3個方法就實現了SnapHelper的對齊，只是有幾個抽象方法是沒有實現的，具體的對齊規則交給子類去實現。
接下來看一下LinearSnapHelper 是怎麼實現劇中對齊的：主要是實現了上面提到的三個抽象方法，findTargetSnapPosition、calculateDistanceToFinalSnap和findSnapView。
(1) calculateDistanceToFinalSnap : 計算最終對齊要移動的距離，返回一個長度為2的int 陣列out，out[0] 為 x 方向移動的距離，out[1] 為 y 方向移動的距離。
@Override
public int[] calculateDistanceToFinalSnap(
@NonNull RecyclerView.LayoutManager layoutManager, @NonNull View targetView) {
int[] out = new int[2];
// 如果是水平方向滾動的，則計算水平方向需要移動的距離，否則水平方向的移動距離為0
if (layoutManager.canScrollHorizontally()) {
out[0] = distanceToCenter(layoutManager, targetView,
getHorizontalHelper(layoutManager));
} else {
out[0] = 0;
}
// 如果是豎直方向滾動的，則計算豎直方向需要移動的距離，否則豎直方向的移動距離為0
if (layoutManager.canScrollVertically()) {
out[1] = distanceToCenter(layoutManager, targetView,
getVerticalHelper(layoutManager));
} else {
out[1] = 0;
}
return out;
}
// 計算水平或者豎直方向需要移動的距離
private int distanceToCenter(@NonNull RecyclerView.LayoutManager layoutManager,
@NonNull View targetView, OrientationHelper helper) {
final int childCenter = helper.getDecoratedStart(targetView) +
(helper.getDecoratedMeasurement(targetView) / 2);
final int containerCenter;
if (layoutManager.getClipToPadding()) {
containerCenter = helper.getStartAfterPadding() + helper.getTotalSpace() / 2;
} else {
containerCenter = helper.getEnd() / 2;
}
return childCenter - containerCenter;
}複製程式碼(2) findSnapView: 找到要對齊的View
// 找到要對齊的目標View, 最終的邏輯在findCenterView 方法裡
// 規則是：迴圈LayoutManager的所有子元素，計算每個 childView的
//中點距離Parent 的中點，找到距離最近的一個，就是需要居中對齊的目標View
@Override
public View findSnapView(RecyclerView.LayoutManager layoutManager) {
if (layoutManager.canScrollVertically()) {
return findCenterView(layoutManager, getVerticalHelper(layoutManager));
} else if (layoutManager.canScrollHorizontally()) {
return findCenterView(layoutManager, getHorizontalHelper(layoutManager));
}
return null;
}複製程式碼(3) findTargetSnapPosition : 找到需要對齊的目標View的的Position
@Override
public int findTargetSnapPosition(RecyclerView.LayoutManager layoutManager, int velocityX,
int velocityY) {
...
// 前面程式碼省略
int vDeltaJump, hDeltaJump;
// 如果是水平方向滾動的列表，估算出水平方向SnapHelper響應fling
//對齊要滑動的position和當前position的差，否則，水平方向滾動的差值為0.
if (layoutManager.canScrollHorizontally()) {
hDeltaJump = estimateNextPositionDiffForFling(layoutManager,
getHorizontalHelper(layoutManager), velocityX, 0);
if (vectorForEnd.x < 0) {
hDeltaJump = -hDeltaJump;
}
} else {
hDeltaJump = 0;
}
// 如果是豎直方向滾動的列表，估算出豎直方向SnapHelper響應fling
//對齊要滑動的position和當前position的差，否則，豎直方向滾動的差值為0.
if (layoutManager.canScrollVertically()) {
vDeltaJump = estimateNextPositionDiffForFling(layoutManager,
getVerticalHelper(layoutManager), 0, velocityY);
if (vectorForEnd.y < 0) {
vDeltaJump = -vDeltaJump;
}
} else {
vDeltaJump = 0;
}
// 最終要滑動的position 就是當前的Position 加上上面算出來的差值。
//後面程式碼省略
...
}複製程式碼以上就分析了LinearSnapHelper 實現滑動的時候居中對齊和fling時居中對齊的原始碼。整個流程還是比較簡單清晰的，就是涉及到比較多的位置計算比較麻煩。熟悉了它的實現原理，從上面我們知道，SnapHelper裡面實現了對齊的流程，但是怎麼對齊的規則就交給子類去處理了，比如LinearSnapHelper 實現了居中對齊，PagerSnapHelper 實現了居中對齊，並且限制只能一次滑動一頁。那麼我們也可以繼承它來實現我們自己的SnapHelper，接下來看一下自己實現一個SnapHelper。
5 . 自定義 SnapHelper
上面分析了SnapHelper 的流程，那麼這節我們來自定義一個SnapHelper , LinearSnapHelper 實現了居中對齊，那麼我們來試著實現Target View 開始對齊。 當然了，我們不用去繼承SnapHelper，既然LinearSnapHelper 實現了居中對齊，那麼我們只要更改一下對齊的規則就行，更改為開始對齊（計算目標View到Parent start 要滑動的距離），其他的邏輯和LinearSnapHelper 是一樣的。因此我們選擇繼承LinearSnapHelper，具體程式碼如下：
/**
* Created by zhouwei on 17/3/30.
*/
public class StartSnapHelper extends LinearSnapHelper {
private OrientationHelper mHorizontalHelper, mVerticalHelper;
@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;
}
if (layoutManager.canScrollVertically()) {
out[1] = distanceToStart(targetView, getVerticalHelper(layoutManager));
} else {
out[1] = 0;
}
return out;
}
private int distanceToStart(View targetView, OrientationHelper helper) {
return helper.getDecoratedStart(targetView) - helper.getStartAfterPadding();
}
@Nullable
@Override
public View findSnapView(RecyclerView.LayoutManager layoutManager) {
if (layoutManager instanceof LinearLayoutManager) {
if (layoutManager.canScrollHorizontally()) {
return findStartView(layoutManager, getHorizontalHelper(layoutManager));
} else {
return findStartView(layoutManager, getVerticalHelper(layoutManager));
}
}
return super.findSnapView(layoutManager);
}
private View findStartView(RecyclerView.LayoutManager layoutManager,
OrientationHelper helper) {
if (layoutManager instanceof LinearLayoutManager) {
int firstChild = ((LinearLayoutManager) layoutManager).findFirstVisibleItemPosition();
//需要判斷是否是最後一個Item，如果是最後一個則不讓對齊，以免出現最後一個顯示不完全。
boolean isLastItem = ((LinearLayoutManager) layoutManager)
.findLastCompletelyVisibleItemPosition()
== layoutManager.getItemCount() - 1;
if (firstChild == RecyclerView.NO_POSITION || isLastItem) {
return null;
}
View child = layoutManager.findViewByPosition(firstChild);
if (helper.getDecoratedEnd(child) >= helper.getDecoratedMeasurement(child) / 2
&& helper.getDecoratedEnd(child) > 0) {
return child;
} else {
if (((LinearLayoutManager) layoutManager).findLastCompletelyVisibleItemPosition()
== layoutManager.getItemCount() - 1) {
return null;
} 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;
}
private OrientationHelper getVerticalHelper(RecyclerView.LayoutManager layoutManager) {
if (mVerticalHelper == null) {
mVerticalHelper = OrientationHelper.createVerticalHelper(layoutManager);
}
return mVerticalHelper;
}
}複製程式碼使用的時候，更改為使用StartSnapHelper，程式碼如下：
StartSnapHelper snapHelper = new StartSnapHelper();
snapHelper.attachToRecyclerView(mRecyclerView);複製程式碼效果如下：
以上就實現了一個Start對齊的效果，此外，在Github上發現一個實現了好幾種Snap 效果的庫，比如，start對齊、end對齊，top 對齊等等。有興趣的可以去弄來玩一下，地址：[Snap 效果庫]。(github.com/rubensousa/…)
6 . 總結
SnapHelper 是對RecyclerView 的一個擴充套件，可以很方便的實現類似ViewPager的效果，比ViewPager效果更好，當我們要實現卡片式的瀏覽或者相簿照片瀏覽時，使用RecyclerView + SnapHelper 的效果要比ViewPager的效果好很多。因此掌握SnapHelper 的使用技巧，能幫助我們方便的實現一些滑動互動效果，以上就是對Snapuhelper的總結，如有問題，歡迎留言交流。本文Demo已上傳GithubAndroidTrainingSimples