## 效果預覽

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/da0f21ca33974b3ba7595c0cfed23cc0.gif#pic_center)

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/99646ae505bf4ca1af5987a92eb0dbfd.gif#pic_center)

> 注：文字只是簡單的Demo，功能單一，主要講解流程與步驟，請根據特定的需求修改。

## 各屬性圖：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/a503f7b111d2451f8ba0790e090b2124.png#pic_center)

> 因為item隨著滑動會有不同的縮放，所以實際normalViewGap會被縮放計算。

我們在自定義ViewGroup中，想要顯示子View，無非就三件事：

1. 新增 透過addView方法把子View新增進ViewGroup或直接在xml中直接新增；
2. 測量 重寫onMeasure方法並在這裡決定自身尺寸以及每一個子View大小；
3. 佈局 重寫onLayout方法，在裡面呼叫子View的layout方法來確定它的位置和尺寸；

其實在自定義LayoutManager中，在流程上也是差不多的，我們需要重寫onLayoutChildren方法，這個方法會在初始化或者Adapter資料集更新時回撥，在這方法裡面，需要做以下事情：

1. 進行佈局之前，我們需要呼叫detachAndScrapAttachedViews方法把螢幕中的Items都分離出來，內部調整好位置和資料後，再把它新增回去(如果需要的話)；
2. 分離了之後，我們就要想辦法把它們再新增回去了，所以需要透過addView方法來新增，那這些View在哪裡得到呢？ 我們需要呼叫 Recycler的getViewForPosition(int position) 方法來獲取；
3. 獲取到Item並重新新增了之後，我們還需要對它進行測量，這時候可以呼叫measureChild或measureChildWithMargins方法，兩者的區別我們已經瞭解過了，相信同學們都能根據需求選擇更合適的方法；
4. 在測量完還需要做什麼呢？ 沒錯，就是佈局了，我們也是根據需求來決定使用layoutDecorated還是layoutDecoratedWithMargins方法；
5. 在自定義ViewGroup中，layout完就可以執行看效果了，但在LayoutManager還有一件非常重要的事情，就是回收了，我們在layout之後，還要把一些不再需要的Items回收，以保證滑動的流暢度；

## 佈局實現

再看下相關引數:

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/b4790ed1620542cb913239af2d240a07.png#pic_center)

如果去掉itemView的縮放，透明度動畫，那麼效果是這樣的：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/02c64bf4c9034c46b06682c5a362c372.gif#pic_center)

看到的效果與`LinearLayoutManager`一樣，但本篇並不使用`LinearLayoutManager`，而是透過自定義`LayoutManager`來實現。

索引值為0的view 一次完全滑出螢幕所需要的移動距離，定位為`firstChildCompleteScrollLength`；非索引值為0的view滑出螢幕所需要移動的距離為:
 `firstChildCompleteScrollLength` + `onceCompleteScrollLength`; item 之間的間距為 `normalViewGap`

我們在 `scrollHorizontallyBy` 方法中記錄偏移量 `dx`，儲存一個累計偏移量 `mHorizontalOffset` ，然後針對索引值為0與非0兩種情況，在 `mHorizontalOffset` 小於 `firstChildCompleteScrollLength` 情況下，用該偏移量除以 `firstChildCompleteScrollLength` 獲取到已經滾動了的百分比 `fraction` ；同理索引值非0的情況下，偏移量需要減去 `firstChildCompleteScrollLength` 來獲取到滾動的百分比。根據百分比，怎麼佈局 childview 就很容易了。

接下來開始寫程式碼，我們建立類：`StackLayoutManager`。

`StackLayoutManager` 繼承 `RecyclerView.LayoutManager` ，需要重寫 `generateDefaultLayoutParams` 方法：

```java
@Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(RecyclerView.LayoutParams.WRAP_CONTENT, RecyclerView.LayoutParams.WRAP_CONTENT);
    }
```

成員變數：
```java
    /**
     * 一次完整的聚焦滑動所需要的移動距離
     */
    private float onceCompleteScrollLength = -1;

/**
     * 第一個子view的偏移量
     */
    private float firstChildCompleteScrollLength = -1;

/**
     * 螢幕可見第一個view的position
     */
    private int mFirstVisiPos;

/**
     * 螢幕可見的最後一個view的position
     */
    private int mLastVisiPos;

/**
     * 水平方向累計偏移量
     */
    private long mHorizontalOffset;

/**
     * view之間的margin
     */
    private float normalViewGap = 30;

private int childWidth = 0;

/**
     * 是否自動選中
     */
    private boolean isAutoSelect = true;
    // 選中動畫
    private ValueAnimator selectAnimator;
```

`scrollHorizontallyBy` 方法：
```java
    @Override
    public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
        // 手指從右向左滑動，dx > 0; 手指從左向右滑動，dx < 0;
        // 位移0、沒有子View 當然不移動
        if (dx == 0 || getChildCount() == 0) {
            return 0;
        }

// 誤差處理
        float realDx = dx / 1.0f;
        if (Math.abs(realDx) < 0.00000001f) {
            return 0;
        }

mHorizontalOffset += dx;

dx = fill(recycler, state, dx);

return dx;
    }

private int fill(RecyclerView.Recycler recycler, RecyclerView.State state, int dx) {
        int resultDelta = dx;
        resultDelta = fillHorizontalLeft(recycler, state, dx);
        recycleChildren(recycler);
        return resultDelta;
    }

private int fillHorizontalLeft(RecyclerView.Recycler recycler, RecyclerView.State state, int dx) {
        if (dx < 0) {
            // 已到達左邊界
            if (mHorizontalOffset < 0) {
                mHorizontalOffset = dx = 0;
            }
        }

if (dx > 0) {
            if (mHorizontalOffset >= getMaxOffset()) {
                // 根據最大偏移量來計算滑動到最右側邊緣
                mHorizontalOffset = (long) getMaxOffset();
                dx = 0;
            }
        }

// 分離全部的view，加入到臨時快取
        detachAndScrapAttachedViews(recycler);

float startX = 0;
        float fraction = 0f;
        boolean isChildLayoutLeft = true;

View tempView = null;
        int tempPosition = -1;

if (onceCompleteScrollLength == -1) {
            // 因為mFirstVisiPos在下面可能被改變，所以用tempPosition暫存一下
            tempPosition = mFirstVisiPos;
            tempView = recycler.getViewForPosition(tempPosition);
            measureChildWithMargins(tempView, 0, 0);
            childWidth = getDecoratedMeasurementHorizontal(tempView);
        }

// 修正第一個可見view mFirstVisiPos 已經滑動了多少個完整的onceCompleteScrollLength就代表滑動了多少個item
        firstChildCompleteScrollLength = getWidth() / 2 + childWidth / 2;
        if (mHorizontalOffset >= firstChildCompleteScrollLength) {
            startX = normalViewGap;
            onceCompleteScrollLength = childWidth + normalViewGap;
            mFirstVisiPos = (int) Math.floor(Math.abs(mHorizontalOffset - firstChildCompleteScrollLength) / onceCompleteScrollLength) + 1;
            fraction = (Math.abs(mHorizontalOffset - firstChildCompleteScrollLength) % onceCompleteScrollLength) / (onceCompleteScrollLength * 1.0f);
        } else {
            mFirstVisiPos = 0;
            startX = getMinOffset();
            onceCompleteScrollLength = firstChildCompleteScrollLength;
            fraction = (Math.abs(mHorizontalOffset) % onceCompleteScrollLength) / (onceCompleteScrollLength * 1.0f);
        }

// 臨時將mLastVisiPos賦值為getItemCount() - 1，放心，下面遍歷時會判斷view是否已溢位螢幕，並及時修正該值並結束佈局
        mLastVisiPos = getItemCount() - 1;

float normalViewOffset = onceCompleteScrollLength * fraction;
        boolean isNormalViewOffsetSetted = false;

for (int i = mFirstVisiPos; i <= mLastVisiPos; i++) {
            View item;
            if (i == tempPosition && tempView != null) {
                // 如果初始化資料時已經取了一個臨時view
                item = tempView;
            } else {
                item = recycler.getViewForPosition(i);
            }

addView(item);
            measureChildWithMargins(item, 0, 0);

if (!isNormalViewOffsetSetted) {
                startX -= normalViewOffset;
                isNormalViewOffsetSetted = true;
            }

int l, t, r, b;
            l = (int) startX;
            t = getPaddingTop();
            r = l + getDecoratedMeasurementHorizontal(item);
            b = t + getDecoratedMeasurementVertical(item);

layoutDecoratedWithMargins(item, l, t, r, b);

startX += (childWidth + normalViewGap);

if (startX > getWidth() - getPaddingRight()) {
                mLastVisiPos = i;
                break;
            }
        }
        return dx;
    }
```

其他用到的方法：
```java
    /**
     * 最大偏移量
     *
     * @return
     */
    private float getMaxOffset() {
        if (childWidth == 0 || getItemCount() == 0) return 0;
        return (childWidth + normalViewGap) * (getItemCount() - 1);
    }

/**
     * 獲取某個childView在水平方向所佔的空間，將margin考慮進去
     *
     * @param view
     * @return
     */
    public int getDecoratedMeasurementHorizontal(View view) {
        final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)
                view.getLayoutParams();
        return getDecoratedMeasuredWidth(view) + params.leftMargin
                + params.rightMargin;
    }

/**
     * 獲取某個childView在豎直方向所佔的空間,將margin考慮進去
     *
     * @param view
     * @return
     */
    public int getDecoratedMeasurementVertical(View view) {
        final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)
                view.getLayoutParams();
        return getDecoratedMeasuredHeight(view) + params.topMargin
                + params.bottomMargin;
    }
```

item的回收複用：
```java
    private int fill(RecyclerView.Recycler recycler, RecyclerView.State state, int delta) {
        int resultDelta = delta;
        // ...

recycleChildren(recycler);
        log("childCount= [" + getChildCount() + "]" + ",[recycler.getScrapList().size():" + recycler.getScrapList().size());
        return resultDelta;
    }

/**
     * 回收需回收的Item。
     */
    private void recycleChildren(RecyclerView.Recycler recycler) {
        List<recyclerview.viewholder> scrapList = recycler.getScrapList();
        for (int i = 0; i < scrapList.size(); i++) {
            RecyclerView.ViewHolder holder = scrapList.get(i);
            removeAndRecycleView(holder.itemView, recycler);
        }
    }
```

動畫效果：
```java
    private int fillHorizontalLeft(RecyclerView.Recycler recycler, RecyclerView.State state, int dx) {
        // ...
        for (int i = mFirstVisiPos; i <= mLastVisiPos; i++) {
            // ...

// 縮放子view
            final float minScale = 0.6f;
            float currentScale = 0f;
            final int childCenterX = (r + l) / 2;
            final int parentCenterX = getWidth() / 2;
            isChildLayoutLeft = childCenterX <= parentCenterX;
            if (isChildLayoutLeft) {
                final float fractionScale = (parentCenterX - childCenterX) / (parentCenterX * 1.0f);
                currentScale = 1.0f - (1.0f - minScale) * fractionScale;
            } else {
                final float fractionScale = (childCenterX - parentCenterX) / (parentCenterX * 1.0f);
                currentScale = 1.0f - (1.0f - minScale) * fractionScale;
            }
            item.setScaleX(currentScale);
            item.setScaleY(currentScale);
            item.setAlpha(currentScale);

layoutDecoratedWithMargins(item, l, t, r, b);
           // ...
        }
        return dx;
    }
```

`childView` 越向螢幕中間移動縮放比越大，越向兩邊移動縮放比越小。
1. 滾動停止後自動選中：

監聽 `onScrollStateChanged`，在滾動停止時計算出應當停留的 `position`，再計算出停留時的 `mHorizontalOffset` 值，播放屬性動畫將當前 `mHorizontalOffset` 不斷更新至最終值即可。

相關程式碼如下：
```java
    @Override
    public void onScrollStateChanged(int state) {
        super.onScrollStateChanged(state);
        switch (state) {
            case RecyclerView.SCROLL_STATE_DRAGGING:
                //當手指按下時，停止當前正在播放的動畫
                cancelAnimator();
                break;
            case RecyclerView.SCROLL_STATE_IDLE:
                //當列表滾動停止後，判斷一下自動選中是否開啟
                if (isAutoSelect) {
                    //找到離目標落點最近的item索引
                    smoothScrollToPosition(findShouldSelectPosition());
                }
                break;
            default:
                break;
        }
    }

/**
     * 平滑滾動到某個位置
     *
     * @param position 目標Item索引
     */
    public void smoothScrollToPosition(int position) {
        if (position > -1 && position < getItemCount()) {
            startValueAnimator(position);
        }
    }

private int findShouldSelectPosition() {
        if (onceCompleteScrollLength == -1 || mFirstVisiPos == -1) {
            return -1;
        }
        int position = (int) (Math.abs(mHorizontalOffset) / (childWidth + normalViewGap));
        int remainder = (int) (Math.abs(mHorizontalOffset) % (childWidth + normalViewGap));
        // 超過一半，應當選中下一項
        if (remainder >= (childWidth + normalViewGap) / 2.0f) {
            if (position + 1 <= getItemCount() - 1) {
                return position + 1;
            }
        }
        return position;
    }

private void startValueAnimator(int position) {
        cancelAnimator();

final float distance = getScrollToPositionOffset(position);

long minDuration = 100;
        long maxDuration = 300;
        long duration;

float distanceFraction = (Math.abs(distance) / (childWidth + normalViewGap));

if (distance <= (childWidth + normalViewGap)) {
            duration = (long) (minDuration + (maxDuration - minDuration) * distanceFraction);
        } else {
            duration = (long) (maxDuration * distanceFraction);
        }
        selectAnimator = ValueAnimator.ofFloat(0.0f, distance);
        selectAnimator.setDuration(duration);
        selectAnimator.setInterpolator(new LinearInterpolator());
        final float startedOffset = mHorizontalOffset;
        selectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                mHorizontalOffset = (long) (startedOffset + value);
                requestLayout();
            }
        });
        selectAnimator.start();
    }
```

2. 點選非焦點view自動將其選中為焦點view

我們可以直接拿到 view 的 `position`，直接呼叫 `smoothScrollToPosition` 方法，就可以實現自動選中為焦點。

中間view覆蓋在兩邊view之上，效果：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/3a8fd18a5a934f719302410a95a5abd6.png#pic_center)

從效果中可以看出，索引為2的view覆蓋在1，3的上面，同時1又覆蓋在0的上面，以此內推。

RecyclerView 繼承於 ViewGroup ，那麼在新增子view `addView(View child, int index)` 中 index 的索引值越大，越顯示在上層。那麼可以得出，為2的綠色卡片被新增是 index 最大，分析可以得出以下結論：

index 的大小：

0 < 1 < 2 > 3 > 4

中間最大，兩邊逐漸減小的原則。

獲取到中間 view 的索引值，如果小於等於該索引值則呼叫 `addView(item)` ，反之呼叫 `addView(item, 0)` ；相關程式碼如下：
```java
    private int fillHorizontalLeft(RecyclerView.Recycler recycler, RecyclerView.State state, int dx) {
        // ...
        for (int i = mFirstVisiPos; i <= mLastVisiPos; i++) {
             // ...
            int focusPosition = (int) (Math.abs(mHorizontalOffset) / (childWidth + normalViewGap));
            if (i <= focusPosition) {
                addView(item);
            } else {
                addView(item, 0);
            }
             // ...
        }
        return dx;
    }
```

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/6185c79ba1cf4f1785fb8b2261efb8a3.jpeg#pic_center)</recyclerview.viewholder>

Android技術分享| 自定義LayoutManager

相關文章