RecyclerView<第十三篇>：SnapHel

在这篇RecyclerView<第十二篇>：SnapHelper使用文章中，已经为指出两种自带的SnapHelper了，分别是LinearSnapHelper、PagerSnapHelper，本章会基于LinearSnapHelper或PagerSnapHelper上进行扩展，来优化画廊效果或者类似ViewPager效果。

就拿PagerSnapHelper为例，我们需要做到的最终效果如下：

115.gif

看图分析：

• 假设，当前卡片为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差不多了，如图：

112.gif

【第二步】 为了增强用户友好，引入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>

效果如下：

113.gif

【第三步】 设置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;
    }
}

使用方法也比较简单，使用方法如下：

图片.png

我们将margin和padding都添加25dp之后的效果如下：

114.gif

【第四步】 将左右两边的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);

[本章完...]