Android(安卓)RecyclerView实现Gallery、修复LinearSnapHelper首尾item不居中的坑

学习自

http://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650824778&idx=1&sn=c7116f310e70a2403c5e5d88c724060b

学习总结：

算不上是RecyclerView的进阶使用

1.对recycler view动画的使用比较浅

2.没有重写LayoutManager

3.自动居中问题也通过自带api简单处理了

不过配合card view，让人感觉真的美爆了。

是这样的效果蛮漂亮的

1.自动居中

LinearSnapHelper mLinearySnapHelper = new LinearSnapHelper();

mLinearySnapHelper.attachToRecyclerView(mGalleryRecyclerView);

自带的api舒服的一匹，不过我们采用手势判断再解决一些事件问题，也可以轻松实现

linear是允许一次滑多个

pager开头的是只允许一次滑一个

2.设置边距

他就是想让分别给第一个item和最后一个item设置不一样的边距，不显得太突兀。

实现起来很简单，可以在adapter里直接写，也可以重写一个item decoration，都很好，没有孰优孰劣，看自己喜欢

3.实现动画

3个点：获取当前是第几个item、获取偏移值、根据偏移值去设置动画

获取第几个item直接onScrollListener里就可以得到，得到的方式有多种；

获取偏移值，不用说也能知道；

设置动画，也很简单；

有个地方讲的不是太清楚，他的动画原理应该是这样的

是从左边顶部开始的，也可以是从底部开始的。我一开始有点太主观了，从中间开始考虑起来，耽误了一会。

4.高斯模糊

直接调用算法即可

效果

5.淡入淡出

高斯图切换的太过突兀，所以需要淡入淡出。用一个比较厉害的drawable：：TransitionDrawable

用法你一看就能明白

private void setBlurImage(RelativeLayout bg) {    int position = s.getPosition();    Drawable d = array.get(position);    if (old == null) {        bg.setBackgroundDrawable(d);    } else {        TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{old,d});        bg.setBackgroundDrawable(transitionDrawable);        transitionDrawable.startTransition(500);    }    old = d;}

但是有个巨坑，第一个item和最后一个item不会默认居中，所以会有一个两次的调用。比如0滑到1是ok的，但是1滑到0，会在1滑到0这个原有的基础上再进行一个滑动->0滑到0。所以判重return即可。

private Drawable old;private void setBlurImage(RelativeLayout bg) {    int position = s.getPosition();    Drawable d = array.get(position);    if (d == old) {        return;    }    if (old == null) {        bg.setBackgroundDrawable(d);    } else {        TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{old,d});        bg.setBackgroundDrawable(transitionDrawable);        transitionDrawable.startTransition(500);    }    old = d;}

效果

全部代码，特别清晰，加了注释，原文用了高大上的架构，我看不懂

public class Test {    private Context context;    private ScrollManager s;    private int[] res = {R.drawable.face_register,R.drawable.tmp_permission,R.drawable.village};    private final SparseArray array;    public Test(RecyclerView rv, final RelativeLayout bg) {        context = rv.getContext();        //常规        rv.setAdapter(new Adapter());        LinearLayoutManager m = new LinearLayoutManager(context);        m.setOrientation(LinearLayoutManager.HORIZONTAL);        rv.setLayoutManager(m);        //自动居中        LinearSnapHelper h = new LinearSnapHelper();        h.attachToRecyclerView(rv);        //页边距        rv.addItemDecoration(new GalleryItemDecoration());        //动画        s = new ScrollManager(rv);        //高斯模糊        //初始化高斯模糊图        array = init();        setBlurImage(bg);        rv.addOnScrollListener(new RecyclerView.OnScrollListener() {            @Override            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {                super.onScrollStateChanged(recyclerView, newState);                if (newState == RecyclerView.SCROLL_STATE_IDLE) {                    setBlurImage(bg);                }            }        });    }    private SparseArray init() {        SparseArray array = new SparseArray<>();        for (int i = 0; i < 3; i ++) {            int r = res[i];            Bitmap b = BitmapFactory.decodeResource(context.getResources(), r);            Bitmap nb = BlurBitmapUtil.blurBitmap(context, b, 15f);            Drawable nd = new BitmapDrawable(nb);            array.put(i,nd);        }        return array;    }    private Drawable old;    private void setBlurImage(RelativeLayout bg) {        int position = s.getPosition();        Drawable d = array.get(position);        if (d == old) {            return;        }        if (old == null) {            bg.setBackgroundDrawable(d);        } else {            TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{old,d});            bg.setBackgroundDrawable(transitionDrawable);            transitionDrawable.startTransition(500);        }        old = d;    }    class Adapter extends RecyclerView.Adapter {        @Override        public CommonViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {            return new CommonViewHolder(LayoutInflater.from(context).inflate(R.layout.item,parent,false));        }        @Override        public void onBindViewHolder(CommonViewHolder holder, int position) {            ImageView iv = (ImageView) holder.holdAndGetView(R.id.iv);            Glide.with(context).load(res[position]).into(iv);        }        @Override        public int getItemCount() {            return res.length;        }    }}

public class GalleryItemDecoration extends RecyclerView.ItemDecoration {    private final String TAG = "GalleryItemDecoration";    public static int mPageMargin = 0;          // 每一个页面默认页边距    public static int mLeftPageVisibleWidth = 50; // 中间页面左右两边的页面可见部分宽度    public static int mItemComusemY = 0;    public static int mItemComusemX = 0;    @Override    public void getItemOffsets(Rect outRect, final View view, final RecyclerView parent, RecyclerView.State state) {        super.getItemOffsets(outRect, view, parent, state);        //这个类的方法应该只会被调用k次 是一个专门对item操作的类        final int position = parent.getChildAdapterPosition(view);        final int itemCount = parent.getAdapter().getItemCount();        parent.post(new Runnable() {            @Override            public void run() {                LinearLayoutManager lm = (LinearLayoutManager) parent.getLayoutManager();                if (lm.getOrientation() == LinearLayoutManager.HORIZONTAL) {                    onSetHoritiontalParams(parent, view, position, itemCount);                } else {                    onSetVerticalParams(parent, view, position, itemCount);                }            }        });    }    private void onSetVerticalParams(ViewGroup parent, View itemView, int position, int itemCount) {        int itemNewWidth = parent.getWidth();        int itemNewHeight = parent.getHeight() - dpToPx(4 * mPageMargin + 2 * mLeftPageVisibleWidth);        mItemComusemY = itemNewHeight + dpToPx(2 * mPageMargin);        // 适配第0页和最后一页没有左页面和右页面，让他们保持左边距和右边距和其他项一样        int topMargin = position == 0 ? dpToPx(mLeftPageVisibleWidth + 2 * mPageMargin) : dpToPx(mPageMargin);        int bottomMargin = position == itemCount - 1 ? dpToPx(mLeftPageVisibleWidth + 2 * mPageMargin) : dpToPx(mPageMargin);        setLayoutParams(itemView, 0, topMargin, 0, bottomMargin, itemNewWidth, itemNewHeight);    }    private void onSetHoritiontalParams(ViewGroup parent, View itemView, int position, int itemCount) {        //注意 我们xml中定义了padding，所以才没有贴顶        int itemNewWidth = parent.getWidth() - dpToPx(4 * mPageMargin + 2 * mLeftPageVisibleWidth);        int itemNewHeight = parent.getHeight();        mItemComusemX = itemNewWidth + dpToPx(2 * mPageMargin);//这个引用啥意思 平均单个item整个的宽度        //mPageMargin就是页之间的边距 默认是0 由于有padding 所以没有贴在一起 我觉得设计的非常不合理 但是无伤大雅        int leftMargin = position == 0 ? dpToPx(mLeftPageVisibleWidth + 2 * mPageMargin) : dpToPx(mPageMargin);        int rightMargin = position == itemCount - 1 ? dpToPx(mLeftPageVisibleWidth + 2 * mPageMargin) : dpToPx(mPageMargin);        setLayoutParams(itemView, leftMargin, 0, rightMargin, 0, itemNewWidth, itemNewHeight);    }    private void setLayoutParams(View itemView, int left, int top, int right, int bottom, int itemWidth, int itemHeight) {        RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) itemView.getLayoutParams();        boolean mMarginChange = false;        boolean mWidthChange = false;        boolean mHeightChange = false;        if (lp.leftMargin != left || lp.topMargin != top || lp.rightMargin != right || lp.bottomMargin != bottom) {            lp.setMargins(left, top, right, bottom);            mMarginChange = true;        }        if (lp.width != itemWidth) {            lp.width = itemWidth;            mWidthChange = true;        }        if (lp.height != itemHeight) {            lp.height = itemHeight;            mHeightChange = true;        }        // 这里的if考虑到的是缩放动画情况        if (mWidthChange || mMarginChange || mHeightChange) {            itemView.setLayoutParams(lp);        }    }    private static int dpToPx(int dp) {        return (int) (dp * Resources.getSystem().getDisplayMetrics().density);    }}

public class ScrollManager {    private static final String TAG = "ScrollManager";    private RecyclerView mGalleryRecyclerView;    private LinearSnapHelper mLinearySnapHelper;    private PagerSnapHelper mPagerSnapHelper;    private int mPosition = 0;    // 使偏移量为左边距 + 左边Item的可视部分宽度    private int mConsumeX = 0;    private int mConsumeY = 0;    // 滑动方向    private int slideDirct = SLIDE_RIGHT;    private static final int SLIDE_LEFT = 1;    // 左滑    private static final int SLIDE_RIGHT = 2;   // 右滑    private static final int SLIDE_TOP = 3;     // 上滑    private static final int SLIDE_BOTTOM = 4;  // 下滑    public ScrollManager(final RecyclerView mGalleryRecyclerView) {        this.mGalleryRecyclerView = mGalleryRecyclerView;        mGalleryRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {            @Override            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {                super.onScrolled(recyclerView, dx, dy);                if (!mGalleryRecyclerView.isAttachedToWindow()) {//这里可能有错                    return;                }                LinearLayoutManager lm = (LinearLayoutManager)mGalleryRecyclerView.getLayoutManager();                if (lm.getOrientation() == LinearLayoutManager.HORIZONTAL) {                    onHoritiontalScroll(recyclerView, dx);                } else {                    onVerticalScroll(recyclerView, dy);                }            }        });    }//    public void updateComsume() {//        mConsumeX += dpToPx(GalleryItemDecoration.mLeftPageVisibleWidth + GalleryItemDecoration.mPageMargin * 2);//        mConsumeY += dpToPx(GalleryItemDecoration.mLeftPageVisibleWidth + GalleryItemDecoration.mPageMargin * 2);//    }    /**     * 垂直滑动     *     * @param recyclerView     * @param dy     */    private void onVerticalScroll(final RecyclerView recyclerView, int dy) {        mConsumeY += dy;        if (dy > 0) {            slideDirct = SLIDE_BOTTOM;        } else {            slideDirct = SLIDE_TOP;        }        // 让RecyclerView测绘完成后再调用，避免GalleryAdapterHelper.mItemHeight的值拿不到        recyclerView.post(new Runnable() {            @Override            public void run() {                int shouldConsumeY = GalleryItemDecoration.mItemComusemY;                // 获取当前的位置                int position = getPosition(mConsumeY, shouldConsumeY);                float offset = (float) mConsumeY / (float) shouldConsumeY;     // 位置浮点值（即总消耗距离 / 每一页理论消耗距离 = 一个浮点型的位置值）                // 避免offset值取整时进一，从而影响了percent值                if (offset >= ((LinearLayoutManager)mGalleryRecyclerView.getLayoutManager()).findFirstVisibleItemPosition() + 1 && slideDirct == SLIDE_BOTTOM) {                    return;                }                // 获取当前页移动的百分值                float percent = offset - ((int) offset);                // 设置动画变化                AnimManager.getInstance().setAnimation(recyclerView, position, percent);            }        });    }    /**     * 水平滑动     *     * @param recyclerView     * @param dx     */    private void onHoritiontalScroll(final RecyclerView recyclerView, final int dx) {        mConsumeX += dx;        if (dx > 0) {            // 右滑            slideDirct = SLIDE_RIGHT;        } else {            // 左滑            slideDirct = SLIDE_LEFT;        }        //获取position        // 让RecyclerView测绘完成后再调用，避免GalleryAdapterHelper.mItemWidth的值拿不到        recyclerView.post(new Runnable() {            @Override            public void run() {                int shouldConsumeX = GalleryItemDecoration.mItemComusemX;//获取图片宽+2*padding                int position = getPosition(mConsumeX, shouldConsumeX);                float offset = (float) mConsumeX / (float) shouldConsumeX;     // 位置浮点值（即总消耗距离 / 每一页理论消耗距离 = 一个浮点型的位置值）                // 避免offset值取整时进一，从而影响了percent值                //我觉得是应该避免一下 但是他这个避免方式我看不懂                if (offset >= ((LinearLayoutManager)mGalleryRecyclerView.getLayoutManager()).findFirstVisibleItemPosition() + 1 && slideDirct == SLIDE_RIGHT) {                    return;                }                // 获取当前页移动的百分值 所以这里获取的                float percent = offset - ((int) offset);                // 设置动画变化                AnimManager.getInstance().setAnimation(recyclerView, position, percent);            }        });    }    /**     * 获取位置     *     * @param mConsumeX      实际消耗距离     * @param shouldConsumeX 理论消耗距离     * @return     */    private int getPosition(int mConsumeX, int shouldConsumeX) {        float offset = (float) mConsumeX / (float) shouldConsumeX;        int position = Math.round(offset);        // 四舍五入获取位置        mPosition = position;        return position;    }    public int getPosition() {        return mPosition;    }    private static int dpToPx(int dp) {        return (int) (dp * Resources.getSystem().getDisplayMetrics().density);    }}

public class AnimManager {    private static final String TAG = "AnimManager";    private static AnimManager INSTANCE;    public static final int ANIM_BOTTOM_TO_TOP = 0;    public static final int ANIM_TOP_TO_BOTTOM = 1;    private int mAnimType = ANIM_BOTTOM_TO_TOP; //动画类型    private float mAnimFactor = 0.2f;   //变化因子    public static AnimManager getInstance() {        if (INSTANCE == null) {            INSTANCE = new AnimManager();        }        return INSTANCE;    }    public void setAnimation(RecyclerView recyclerView, int position, float percent) {        switch (mAnimType) {            case ANIM_BOTTOM_TO_TOP:                setBottomToTopAnim(recyclerView, position, percent);                break;            case ANIM_TOP_TO_BOTTOM:                setTopToBottomAnim(recyclerView, position, percent);                break;            default:                setBottomToTopAnim(recyclerView, position, percent);                break;        }    }    /**     * 从下到上的动画效果     *     * @param recyclerView     * @param position     * @param percent     */    private void setBottomToTopAnim(RecyclerView recyclerView, int position, float percent) {        View mCurView = recyclerView.getLayoutManager().findViewByPosition(position);       // 中间页        View mRightView = recyclerView.getLayoutManager().findViewByPosition(position + 1); // 左边页        View mLeftView = recyclerView.getLayoutManager().findViewByPosition(position - 1);  // 右边页        if (percent <= 0.5) {            if (mLeftView != null) {                mLeftView.setScaleX((1 - mAnimFactor) + percent * mAnimFactor);                mLeftView.setScaleY((1 - mAnimFactor) + percent * mAnimFactor);            }            if (mCurView != null) {                mCurView.setScaleX(1 - percent * mAnimFactor);                mCurView.setScaleY(1 - percent * mAnimFactor);            }            if (mRightView != null) {                mRightView.setScaleX((1 - mAnimFactor) + percent * mAnimFactor);                mRightView.setScaleY((1 - mAnimFactor) + percent * mAnimFactor);            }        } else {            if (mLeftView != null) {                mLeftView.setScaleX(1 - percent * mAnimFactor);                mLeftView.setScaleY(1 - percent * mAnimFactor);            }            if (mCurView != null) {                mCurView.setScaleX((1 - mAnimFactor) + percent * mAnimFactor);                mCurView.setScaleY((1 - mAnimFactor) + percent * mAnimFactor);            }            if (mRightView != null) {                mRightView.setScaleX(1 - percent * mAnimFactor);                mRightView.setScaleY(1 - percent * mAnimFactor);            }        }    }    /***     * 从上到下的效果     */    private void setTopToBottomAnim(RecyclerView recyclerView, int position, float percent) {        View mCurView = recyclerView.getLayoutManager().findViewByPosition(position);       // 中间页        View mRightView = recyclerView.getLayoutManager().findViewByPosition(position + 1); // 左边页        View mLeftView = recyclerView.getLayoutManager().findViewByPosition(position - 1);  // 右边页        if (percent <= 0.5) {            if (mLeftView != null) {                mLeftView.setScaleX(1 - percent * mAnimFactor);                mLeftView.setScaleY(1 - percent * mAnimFactor);            }            if (mCurView != null) {                mCurView.setScaleX((1 - mAnimFactor) + percent * mAnimFactor);                mCurView.setScaleY((1 - mAnimFactor) + percent * mAnimFactor);            }            if (mRightView != null) {                mRightView.setScaleX(1 - percent * mAnimFactor);                mRightView.setScaleY(1 - percent * mAnimFactor);            }        } else {            if (mLeftView != null) {                mLeftView.setScaleX((1 - mAnimFactor) + percent * mAnimFactor);                mLeftView.setScaleY((1 - mAnimFactor) + percent * mAnimFactor);            }            if (mCurView != null) {                mCurView.setScaleX(1 - percent * mAnimFactor);                mCurView.setScaleY(1 - percent * mAnimFactor);            }            if (mRightView != null) {                mRightView.setScaleX((1 - mAnimFactor) + percent * mAnimFactor);                mRightView.setScaleY((1 - mAnimFactor) + percent * mAnimFactor);            }        }    }    public void setmAnimFactor(float mAnimFactor) {        this.mAnimFactor = mAnimFactor;    }    public void setmAnimType(int mAnimType) {        this.mAnimType = mAnimType;    }}

public class BlurBitmapUtil {    //图片缩放比例    private static final float BITMAP_SCALE = 0.4f;    /**     * 模糊图片的具体方法     *     * @param context 上下文对象     * @param image   需要模糊的图片     * @return 模糊处理后的图片     */    public static Bitmap blurBitmap(Context context, Bitmap image, float blurRadius) {        // 计算图片缩小后的长宽        int width = Math.round(image.getWidth() * BITMAP_SCALE);        int height = Math.round(image.getHeight() * BITMAP_SCALE);        // 将缩小后的图片做为预渲染的图片        Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false);        // 创建一张渲染后的输出图片        Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap);        // 创建RenderScript内核对象        RenderScript rs = RenderScript.create(context);        // 创建一个模糊效果的RenderScript的工具对象        ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));        // 由于RenderScript并没有使用VM来分配内存,所以需要使用Allocation类来创建和分配内存空间        // 创建Allocation对象的时候其实内存是空的,需要使用copyTo()将数据填充进去        Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap);        Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap);        // 设置渲染的模糊程度, 25f是最大模糊度        blurScript.setRadius(blurRadius);        // 设置blurScript对象的输入内存        blurScript.setInput(tmpIn);        // 将输出数据保存到输出内存中        blurScript.forEach(tmpOut);        // 将数据填充到Allocation中        tmpOut.copyTo(outputBitmap);        return outputBitmap;    }}

想学习重写LayoutManager的，可以看看鸿洋公众号里的recycler view仿探探

更多相关文章

随机推荐