RecyclerView<第十三篇>：SnapHelper進階之CardScaleHelper

在這篇RecyclerView<第十二篇>：SnapHelper使用文章中，已經爲指出兩種自帶的SnapHelper了，分別是LinearSnapHelper、PagerSnapHelper，本章會基於LinearSnapHelper或PagerSnapHelper上進行擴展，來優化畫廊效果或者類似ViewPager效果。

就拿PagerSnapHelper爲例，我們需要做到的最終效果如下：

看圖分析：

• 假設，當前卡片爲B，左邊的卡片爲A，右邊的卡片爲C
• 默認情況下，當前卡片大小沒有縮放，而兩邊卡片會縮小
• 當圖片切換時，圖片的大小有逐漸縮放的效果
• B卡片縮放規律是逐漸遞減，用方程來表示

y = (scale-1) * x + 1

y爲最終縮放比，遞減，取值範圍是[scale,1]。
x爲變化率，取值範圍是[0,1/2]。
scale爲縮放因子，取值範圍是[0,1]。

• A、C卡片的縮放規律是逐漸遞增，用方程來表示

y = (1-scale) * x + scale

y爲最終縮放比，遞增，取值範圍是[scale,1]。
x爲變化率，取值範圍是[0,1/2]。
scale爲縮放因子，取值範圍是[0,1]。

大致分以下幾個步驟：

【第一步】 使用PagerSnapHelper

    PagerSnapHelper pagerSnapHelper = new PagerSnapHelper();
    pagerSnapHelper.attachToRecyclerView(mRecyclerView);

這樣，圖片的切換就會和ViewPager差不多了，如圖：

【第二步】 爲了增強用戶友好，引入CardView控件，將圖片添加圓形角和陰影效果

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardBackgroundColor="@color/colorPrimary"
    app:cardElevation="18dp"
    app:cardMaxElevation="18dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    app:cardCornerRadius="20dp">

    <ImageView
        android:id="@+id/iv_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/che4"/>

</android.support.v7.widget.CardView>

效果如下：

【第三步】 設置Item之間的marin和padding

這裏自定義一個輔助類CardAdapterHelper就可以搞定

/**
 *  常量定義
 */
public class CardScaleConstant {

    public static int PAGER_PADDING = 25;

    public static int PAGER_MARGIN = 25;
}

public class CardAdapterHelper {

    public void onCreateViewHolder(ViewGroup parent,  View itemView) {
        RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) itemView.getLayoutParams();
        lp.width = parent.getWidth() - ScreenUtil.dip2px(itemView.getContext(), 2 * (CardScaleConstant.PAGER_PADDING + CardScaleConstant.PAGER_MARGIN));
        itemView.setLayoutParams(lp);
    }

    public void onBindViewHolder(View itemView, final int position, int itemCount) {
        int padding = ScreenUtil.dip2px(itemView.getContext(), CardScaleConstant.PAGER_PADDING);
        itemView.setPadding(padding, 0, padding, 0);
        int leftMarin = position == 0 ? padding + ScreenUtil.dip2px(itemView.getContext(), CardScaleConstant.PAGER_MARGIN) : 0;
        int rightMarin = position == itemCount - 1 ? padding + ScreenUtil.dip2px(itemView.getContext(), CardScaleConstant.PAGER_MARGIN) : 0;
        setViewMargin(itemView, leftMarin, 0, rightMarin, 0);
    }

    private void setViewMargin(View view, int left, int top, int right, int bottom) {
        ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        if (lp.leftMargin != left || lp.topMargin != top || lp.rightMargin != right || lp.bottomMargin != bottom) {
            lp.setMargins(left, top, right, bottom);
            view.setLayoutParams(lp);
        }
    }

    public void setPagePadding(int pagePadding) {
        CardScaleConstant.PAGER_PADDING = pagePadding;
    }

    public void setPageMarin(int pagerMargin) {
        CardScaleConstant.PAGER_MARGIN = pagerMargin;
    }
}

使用方法也比較簡單，使用方法如下：

我們將margin和padding都添加25dp之後的效果如下：

【第四步】 將左右兩邊的Item縮小

調用setScaleY方法，將Item縮小，其縮小算法上面已經指出

leftView.setScaleY((1 - mScale) * percent + mScale);
currentView.setScaleY((mScale - 1) * percent + 1);
rightView.setScaleY((1 - mScale) * percent + mScale);

求出卡片寬度，即RecyclerView寬度減去padding和margin

mCardWidth = mRecyclerView.getWidth() - ScreenUtil.dip2px(mContext, 2 * (CardScaleConstant.PAGER_PADDING + CardScaleConstant.PAGER_MARGIN));

求出卡片當前位置

        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                // dx>0則表示右滑, dx<0表示左滑, dy<0表示上滑, dy>0表示下滑
                if(dx != 0){
                    mCurrentItemOffset += dx;

                    //計算當前位置
                    mCurrentItemPos = Math.round(mCurrentItemOffset * 1.0f / mCardWidth);

                }
            }
        });

CardScaleHelper全部代碼如下：

public class CardScaleHelper {
    private RecyclerView mRecyclerView;
    private Context mContext;

    private float mScale = 0.5f; // 兩邊卡片的縮放量

    private int mCardWidth; // 卡片寬度

    private int mCurrentItemPos;//卡片當前位置

    private int mCurrentItemOffset;//當前偏移量

    private PagerSnapHelper pagerSnapHelper = new PagerSnapHelper();

    public void attachToRecyclerView(final RecyclerView mRecyclerView) {
        this.mRecyclerView = mRecyclerView;
        mContext = mRecyclerView.getContext();
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                // dx>0則表示右滑, dx<0表示左滑, dy<0表示上滑, dy>0表示下滑
                if(dx != 0){
                    mCurrentItemOffset += dx;

                    //計算當前位置
                    mCurrentItemPos = Math.round(mCurrentItemOffset * 1.0f / mCardWidth);

                    changedCardSize();
                }
            }
        });

        mRecyclerView.post(new Runnable() {
            @Override
            public void run() {
                //求出卡片寬度
                mCardWidth = mRecyclerView.getWidth() - ScreenUtil.dip2px(mContext, 2 * (CardScaleConstant.PAGER_PADDING + CardScaleConstant.PAGER_MARGIN));
                mRecyclerView.smoothScrollToPosition(mCurrentItemPos);
                changedCardSize();
            }
        });

        pagerSnapHelper.attachToRecyclerView(mRecyclerView);
    }


    public void setCurrentItemPos(int currentItemPos) {
        this.mCurrentItemPos = currentItemPos;
    }

    public int getCurrentItemPos() {
        return mCurrentItemPos;
    }

    /**
     * 改變卡片大小
     */
    private void changedCardSize() {

        //求出當前Item滑動偏移量，它的絕對值的取值變化時從小到大再變小
        //變化範圍是[0,mCardWidth/2],[-mCardWidth/2,0]
        int offset = mCurrentItemOffset - mCurrentItemPos * mCardWidth;
        //求出縮放百分比，最小值爲0.0001，最大值爲1/2，百分比的變化是從小變大，再變小
        float percent = (float) Math.max(Math.abs(offset) * 1.0 / mCardWidth, 0.0001);

        View leftView = null;
        View currentView;
        View rightView = null;
        if (mCurrentItemPos > 0) {
            leftView = mRecyclerView.getLayoutManager().findViewByPosition(mCurrentItemPos - 1);
        }
        currentView = mRecyclerView.getLayoutManager().findViewByPosition(mCurrentItemPos);
        if (mCurrentItemPos < mRecyclerView.getAdapter().getItemCount() - 1) {
            rightView = mRecyclerView.getLayoutManager().findViewByPosition(mCurrentItemPos + 1);
        }

        if (leftView != null) {
            leftView.setScaleY((1 - mScale) * percent + mScale);
        }
        if (currentView != null) {
            currentView.setScaleY((mScale - 1) * percent + 1);
        }
        if (rightView != null) {

        }
    }

    public void setScale(float scale) {
        mScale = scale;
    }

    public void setPagePadding(int pagePadding) {
        CardScaleConstant.PAGER_PADDING = pagePadding;
    }

    public void setPageMarin(int pagerMargin) {
        CardScaleConstant.PAGER_MARGIN = pagerMargin;
    }
}

使用方法如下：

    CardScaleHelper cardScaleHelper = new CardScaleHelper();
    cardScaleHelper.setCurrentItemPos(2);
    cardScaleHelper.attachToRecyclerView(mRecyclerView);

[本章完...]