Android-->RecyclerView模仿探探左右滑动布局

站在巨人的肩膀上,才能走得更远.

参考文章:http://blog.csdn.net/zxt0601/article/details/53730908

我在此基础上优化了部分代码, 添加了滑动回调, 可自定义性更强. 并且添加了点击按钮左右滑动的功能.

据说无图都不敢发文章了.

看图:


1:这种功能, 首先需要自己管理布局

继承 RecyclerView.LayoutManager , 显示自己管理布局, 比如最多显示4个view, 并且都是居中显示.

底部的View还需要进行缩放,平移操作.

public class OverLayCardLayoutManager extends RecyclerView.LayoutManager {
    private static final String TAG = "swipecard";
    public static int MAX_SHOW_COUNT = 4;
    public static float SCALE_GAP = 0.05f;
    public static int TRANS_Y_GAP;

    public OverLayCardLayoutManager(Context context) {
        //平移时, 需要用到的参考值
        TRANS_Y_GAP = (int) (20 * context.getResources().getDisplayMetrics().density);
    }

    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        //必须要实现的方法
        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    }

    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        //在这个方法中进行View的布局操作.此方法会被调用多次.
        detachAndScrapAttachedViews(recycler);
        int itemCount = getItemCount();
        if (itemCount < 1) {
            return;
        }
        //top-3View的position
        int bottomPosition;
        //边界处理
        if (itemCount < MAX_SHOW_COUNT) {
            bottomPosition = 0;
        } else {
            bottomPosition = itemCount - MAX_SHOW_COUNT;
        }

        //从可见的最底层View开始layout，依次层叠上去
        for (int position = bottomPosition; position < itemCount; position++) {
            //1:重recycler的缓存机制中拿到一个View
            View view = recycler.getViewForPosition(position);
            //2:和自定义ViewGroup一样, 需要先addView
            addView(view);
            //3:和自定义ViewGroup一样, 也需要测量View的大小
            measureChildWithMargins(view, 0, 0);
            int widthSpace = getWidth() - getDecoratedMeasuredWidth(view);
            int heightSpace = getHeight() - getDecoratedMeasuredHeight(view);
            //4:和自定义ViewGroup的onLayout一样, 需要layout View.对View进行布局
            //我们在布局时，将childView居中处理，这里也可以改为只水平居中
            layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 2,
                    widthSpace / 2 + getDecoratedMeasuredWidth(view),
                    heightSpace / 2 + getDecoratedMeasuredHeight(view));
            /**
             * TopView的Scale 为1，translationY 0
             * 每一级Scale相差0.05f，translationY相差7dp左右
             *
             * 观察人人影视的UI，拖动时，topView被拖动，Scale不变，一直为1.
             * top-1View 的Scale慢慢变化至1，translation也慢慢恢复0
             * top-2View的Scale慢慢变化至 top-1View的Scale，translation 也慢慢变化只top-1View的translation
             * top-3View的Scale要变化，translation岿然不动
             */

            //第几层,举例子，count =7， 最后一个TopView（6）是第0层，
            int level = itemCount - position - 1;

            //如果不需要缩放平移, 那么下面的代码可以注释掉...
            //除了顶层不需要缩小和位移
            if (level > 0 /*&& level < mShowCount - 1*/) {
                //每一层都需要X方向的缩小
                view.setScaleX(1 - SCALE_GAP * level);
                //前N层，依次向下位移和Y方向的缩小
                if (level < MAX_SHOW_COUNT - 1) {
                    view.setTranslationY(TRANS_Y_GAP * level);
                    view.setScaleY(1 - SCALE_GAP * level);
                } else {//第N层在 向下位移和Y方向的缩小的成都与 N-1层保持一致
                    view.setTranslationY(TRANS_Y_GAP * (level - 1));
                    view.setScaleY(1 - SCALE_GAP * (level - 1));
                }
            }
        }
    }
}

2:布局好了之后, 就需要监听鼠标事件了

谷歌官方提供了一个ItemTouchHelper工具类, 对滑动进行了惨无人道的优越封装, 傻x都能用…

使用方法: new ItemTouchHelper(callback).attachToRecyclerView(recyclerView);就这么简单,

接下来的操作, 都在回调callback里面进行.

public class RenRenCallback extends ItemTouchHelper.SimpleCallback {

    private static final String TAG = "RenRen";
    private static final int MAX_ROTATION = 15;
    OnSwipeListener mSwipeListener;
    boolean isSwipeAnim = false;

    public RenRenCallback() {
        //第一个参数决定可以拖动排序的方向, 这里由于不需要拖动排序,所以传0
        //第二个参数决定可以支持滑动的方向,这里设置了上下左右都可以滑动.
        super(0, ItemTouchHelper.DOWN | ItemTouchHelper.UP | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT);
    }

    public void setSwipeListener(OnSwipeListener swipeListener) {
        mSwipeListener = swipeListener;
    }

    //水平方向是否可以被回收掉的阈值
    public float getThreshold(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        //2016 12 26 考虑 探探垂直上下方向滑动，不删除卡片，这里参照源码写死0.5f
        return recyclerView.getWidth() * /*getSwipeThreshold(viewHolder)*/ 0.5f;
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        //由于不支持滑动排序, 所以不需要处理此方法
        return false;
    }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        //当view需要滑动的时候,会回调此方法
        //但是这个方法只是告诉你View需要滑动, 并不是对View和Adapter进行额外的操作,
        //所以, 如果你需要实现滑动删除, 那么需要在此方法中remove item等.

        //我们这里需要对滑动过后的View,进行恢复操作.
        viewHolder.itemView.setRotation(0);//恢复最后一次的旋转状态
        if (mSwipeListener != null) {
            mSwipeListener.onSwipeTo(viewHolder, 0);
        }
        notifyListener(viewHolder.getAdapterPosition(), direction);
    }

    private void notifyListener(int position, int direction) {
        Log.w(TAG, "onSwiped: " + position + " " + direction);
        if (mSwipeListener != null) {
            mSwipeListener.onSwiped(position, direction);
        }
    }

    @Override
    public float getSwipeThreshold(RecyclerView.ViewHolder viewHolder) {
        //滑动的比例达到多少之后, 视为滑动
        return 0.3f;
    }

    @Override
    public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
        //当你在滑动的过程中, 此方法一直会被回调, 就跟onTouch事件一样...
        //先根据滑动的dx dy 算出现在动画的比例系数fraction
        float swipeValue = (float) Math.sqrt(dX * dX + dY * dY);
        final float threshold = getThreshold(recyclerView, viewHolder);
        float fraction = swipeValue / threshold;
        //边界修正 最大为1
        if (fraction > 1) {
            fraction = 1;
        } else if (fraction < -1) {
            fraction = -1;
        }
        //对每个ChildView进行缩放 位移
        int childCount = recyclerView.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = recyclerView.getChildAt(i);
            //第几层,举例子，count =7， 最后一个TopView（6）是第0层，
            int level = childCount - i - 1;
            if (level > 0) {
                child.setScaleX(1 - SCALE_GAP * level + fraction * SCALE_GAP);

                if (level < MAX_SHOW_COUNT - 1) {
                    child.setScaleY(1 - SCALE_GAP * level + fraction * SCALE_GAP);
                    child.setTranslationY(TRANS_Y_GAP * level - fraction * TRANS_Y_GAP);
                } else {
                    //child.setTranslationY((float) (mTranslationYGap * (level - 1) - fraction * mTranslationYGap));
                }
            } else {
                //最上层
                //rotate
                if (dX < -50) {
                    child.setRotation(-fraction * MAX_ROTATION);
                } else if (dX > 50) {
                    child.setRotation(fraction * MAX_ROTATION);
                } else {
                    child.setRotation(0);
                }

                if (mSwipeListener != null) {
                    RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
                    final int adapterPosition = params.getViewAdapterPosition();
                    mSwipeListener.onSwipeTo(recyclerView.findViewHolderForAdapterPosition(adapterPosition), dX);
                }
            }
        }
    }

    //扩展实现:点击按钮实现左滑效果
    public void toLeft(RecyclerView recyclerView) {
        if (check(recyclerView)) {
            animTo(recyclerView, false);
        }
    }

    //扩展实现:点击按钮实现右滑效果
    public void toRight(RecyclerView recyclerView) {
        if (check(recyclerView)) {
            animTo(recyclerView, true);
        }
    }

    private void animTo(final RecyclerView recyclerView, boolean right) {
        final int position = recyclerView.getAdapter().getItemCount() - 1;
        final View view = recyclerView.findViewHolderForAdapterPosition(position).itemView;

        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, right ? 1f : -1f,
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.3f);
        translateAnimation.setFillAfter(true);
        translateAnimation.setDuration(300);
        translateAnimation.setInterpolator(new DecelerateInterpolator());
        translateAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                isSwipeAnim = false;
                recyclerView.removeView(view);
                notifyListener(position,
                        x > view.getMeasuredWidth() / 2
                                ?
                                ItemTouchHelper.RIGHT : ItemTouchHelper.LEFT);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        view.startAnimation(translateAnimation);
    }

    private boolean check(RecyclerView recyclerView) {
        if (isSwipeAnim) {
            return false;
        }
        if (recyclerView == null || recyclerView.getAdapter() == null) {
            return false;
        }
        if (recyclerView.getAdapter().getItemCount() == 0) {
            return false;
        }
        isSwipeAnim = true;
        return true;
    }

    public interface OnSwipeListener {

        /**
         * @param direction {@link ItemTouchHelper#LEFT} / {@link ItemTouchHelper#RIGHT}
         *                  {@link ItemTouchHelper#UP} or {@link ItemTouchHelper#DOWN}).
         */
        void onSwiped(int adapterPosition, int direction);

        /**
         * 最上层View滑动时回调.
         *
         * @param viewHolder 最上层的ViewHolder
         * @param offset     距离原始位置的偏移量
         */
        void onSwipeTo(RecyclerView.ViewHolder viewHolder, float offset);
    }

    public static class SimpleSwipeCallback implements OnSwipeListener {

        /**
         * {@inheritDoc}
         */
        @Override
        public void onSwiped(int adapterPosition, int direction) {

        }

        /**
         * {@inheritDoc}
         */
        @Override
        public void onSwipeTo(RecyclerView.ViewHolder viewHolder, float offset) {

        }
    }
}

看起来不难, 但是真正做的时候, 要处理的地方很多,

并且有些地方要思考很久, 才能实现效果.

总之,做了你才会发现1+1=2的魅力, just do it.

开源地址: https://github.com/angcyo/RecyclerLayoutManager


至此: 文章就结束了,如有疑问: QQ群 Android:274306954 Swift:399799363 欢迎您的加入.

时间： 2024-11-10 06:44:59

Android-->RecyclerView模仿探探左右滑动布局的相关文章

五行代码实现 炫动滑动 卡片层叠布局，仿探探、人人影视订阅界面 简单&amp;优雅：LayoutManager+ItemTouchHelper

转载请标明出处: http://blog.csdn.net/zxt0601/article/details/53730908 本文出自:[张旭童的博客](http://blog.csdn.net/zxt0601) 代码传送门:喜欢的话,随手点个star.多谢 https://github.com/mcxtzhang/LayoutManagerDemo 概述 前几天看有人实现了仿人人美剧的订阅界面,不过在细节之处以及实现方式我个人认为都不是最佳的姿势. 于是我也动手撸了一个,还顺带撸了个探探的界面

Android RecyclerView详解及实现瀑布流式布局

RecyclerView一个可以代替ListView和GridView的控件,那么RecyclerView到底比他们好在哪里? RecyclerView架构提供了一种插拔式的体验,所以实现了代码的高度解耦,使用起来也异常的灵活. 我们可以通过设置它的LayoutManager控制其显示的方式,通过ItemDecoration控制Item间的间隔,通过ItemAnimator控制Item的增删动画 RecyclerView.LayoutManager提供了三个实现类其中LinearLayoutMa

Android RecyclerView: Super Fast ListView 超级快速的Lis

Android RecyclerView: Super Fast ListView 原文来自我的微信公众号: longkai_1991 先上图,看效果: 前几天刚release完公司的一个项目,有了点时间,于是就想找一些有意思的东西学习一下,顺便运用在项目之中.看到iOS的同事们在谈论iOS8的xx特性时,我突然也有想在公司项目的下一个版本中添加Android L版本的特性. 六月底的时候收看Google io时,当时对Android新的设计语言,Material Design,没什么太大的好感

Android RecyclerView的基本使用

Android RecyclerView 在去年的Google I/O大会上就推出来了,以前经常使用的ListView 继承的是AbsListView,而RecyclerView则直接继承 ViewGroup,并实现了ScrollingView 和 NestedScrollingChild接口,RecyclerView相比ListView,是一次彻底的改变,RecyclerView 比ListView更加强大灵活. DEMO实现功能: RecyclerView的点击事件: Item及item中的

Android RecyclerView 基本使用

Android RecyclerView 基本使用 概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用. 据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件我们并不陌生,例如:ListView.GridView. 那么有了ListView.GridView为什么还需要RecyclerView这样的控件呢?整体上看RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供

Android 实例讲解HorizontalScrollView实现左右滑动

本博文主要讲解怎么使用HorizontalScrollView实现左右滑动的效果. HorizontalScrollView实际上是一个FrameLayout ,一般通过只放置一个LinearLayout子控件.如果要使其添加其他的控件,就使用LinearLayout子控件来添加其他的控件,最后达到丰富其内容的效果.其中,LinearLayout设置的orientation布局为Horizontal.HorizontalScrollView不可以和ListView同时用,因为ListView有自

【Android】ViewPager实现图片左右滑动播放及添加点击事件

前两天老师找我帮她写个Android的demo.说是要实现一个图片左右滑动的效果,并且点击图片的时候会发出声音. 由于好久没写过Android了,所以花了一段时间来复习和学习.现将过程和实现简单记录如下.(项目参照了一部分CSDN博主Android将军的) 实现使用的是ViewPager 代码如下:在点击监听的部分,通过获取List<>中的控件添加触摸监听.当然你可以在各个页面添加多个控件,然后在获取该界面的控件,然后各个添加监听. 而且代码有优化的地方...不过只是为了演示,就没有太花时间去

浅谈Android RecyclerView

Android RecyclerView 是Android5.0推出来的,导入support-v7包即可使用. 个人体验来说,RecyclerView绝对是一款功能强大的控件. 首先总结下RecyclerView的特点: 1.支持不同方向,不同排版模式,实现多种展现数据的形式,涵盖了ListView,GridView,瀑布流等数据表现的形式 2.内部实现了回收机制,无需我们考虑View的复用情况 3.取消了onItemClick等点击事件,需要自己手动去写 -------------------

CoordinatorLayout-整体滑动布局

关于布局: 1.添加依赖com.android.support:design:24.2.1 2.由<android.support.design.widget.CoordinatorLayout/>包裹整体滑动视图 3.由<android.support.design.widget.AppBarLayout/>包裹配合滑动布局 比如toolbar 4.在配合滑动布局中添加app:layout_scrollFlags="scroll" 5.滑动布局需放在其他布局顶