Android RecyclerView 二级列表侧滑简单实现

时间:2021-7-21 作者:qvyue

简述

相信在开发的过程中,有不少人需要实现二级列表的需求,这次依然是站在大佬的肩膀上,给其他小伙伴们提供借鉴思路,老规矩先上图。

Android RecyclerView 二级列表侧滑简单实现
视频录制效果图.gif

参考的博客出处

RecyclerView 二级列表实现

RecyclerView实现侧滑删除

测滑菜单的实现

先来看看侧滑的实现,这边继承了RecyclerView,直接在onInterceptTouchEvent方法中进行触摸判断是否是滚动或侧滑
SlideRecyclerView自定义控件代码如下:

public class SlideRecyclerView extends RecyclerView {

    private static final String TAG = "SlideRecyclerView";
    private static final int INVALID_POSITION = -1; // 触摸到的点不在子View范围内
    private static final int INVALID_CHILD_WIDTH = -1;  // 子ItemView不含两个子View
    private static final int SNAP_VELOCITY = 600;   // 最小滑动速度

    private VelocityTracker mVelocityTracker;   // 速度追踪器
    private int mTouchSlop; // 认为是滑动的最小距离(一般由系统提供)
    private Rect mTouchFrame;   // 子View所在的矩形范围
    private Scroller mScroller;
    private float mLastX;   // 滑动过程中记录上次触碰点X
    private float mFirstX, mFirstY; // 首次触碰范围
    private boolean mIsSlide;   // 是否滑动子View
    private ViewGroup mFlingView;   // 触碰的子View
    private int mPosition;  // 触碰的view的位置
    private int mMenuViewWidth;    // 菜单按钮宽度

    public SlideRecyclerView(Context context) {
        this(context, null);
    }

    public SlideRecyclerView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SlideRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
        mScroller = new Scroller(context);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent e) {
        int x = (int) e.getX();
        int y = (int) e.getY();
        obtainVelocity(e);
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (!mScroller.isFinished()) {  // 如果动画还没停止,则立即终止动画
                    mScroller.abortAnimation();
                }
                mFirstX = mLastX = x;
                mFirstY = y;
                mPosition = pointToPosition(x, y);  // 获取触碰点所在的position
                if (mPosition != INVALID_POSITION) {
                    View view = mFlingView;
                    // 获取触碰点所在的view
                    mFlingView = (ViewGroup) getChildAt(mPosition - ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition());
                    // 这里判断一下如果之前触碰的view已经打开,而当前碰到的view不是那个view则立即关闭之前的view,此处并不需要担动画没完成冲突,因为之前已经abortAnimation
                    if (view != null && mFlingView != view && view.getScrollX() != 0) {
                        view.scrollTo(0, 0);
                    }
                    // 这里进行了强制的要求,RecyclerView的子ViewGroup必须要有2个子view,这样菜单按钮才会有值,
                    // 需要注意的是:如果不定制RecyclerView的子View,则要求子View必须要有固定的width。
                    // 比如使用LinearLayout作为根布局,而content部分width已经是match_parent,此时如果菜单view用的是wrap_content,menu的宽度就会为0。
                    if (mFlingView.getChildCount() == 2) {
                        mMenuViewWidth = mFlingView.getChildAt(1).getWidth();
                    } else {
                        mMenuViewWidth = INVALID_CHILD_WIDTH;
                    }
                }
                break;
            case MotionEvent.ACTION_MOVE:
                mVelocityTracker.computeCurrentVelocity(1000);
                // 此处有俩判断,满足其一则认为是侧滑:
                // 1.如果x方向速度大于y方向速度,且大于最小速度限制;
                // 2.如果x方向的侧滑距离大于y方向滑动距离,且x方向达到最小滑动距离;
                float xVelocity = mVelocityTracker.getXVelocity();
                float yVelocity = mVelocityTracker.getYVelocity();
                if (Math.abs(xVelocity) > SNAP_VELOCITY && Math.abs(xVelocity) > Math.abs(yVelocity)
                        || Math.abs(x - mFirstX) >= mTouchSlop
                        && Math.abs(x - mFirstX) > Math.abs(y - mFirstY)) {
                    mIsSlide = true;
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                releaseVelocity();
                break;
        }
        return super.onInterceptTouchEvent(e);
    }

    @Override
    public boolean onTouchEvent(MotionEvent e) {
        if (mIsSlide && mPosition != INVALID_POSITION) {
            float x = e.getX();
            obtainVelocity(e);
            switch (e.getAction()) {
                case MotionEvent.ACTION_DOWN:   // 因为没有拦截,所以不会被调用到
                    break;
                case MotionEvent.ACTION_MOVE:
                    // 随手指滑动
                    if (mMenuViewWidth != INVALID_CHILD_WIDTH) {
                        float dx = mLastX - x;
                        if (mFlingView.getScrollX() + dx  0) {
                            mFlingView.scrollBy((int) dx, 0);
                        }
                        mLastX = x;
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    if (mMenuViewWidth != INVALID_CHILD_WIDTH) {
                        int scrollX = mFlingView.getScrollX();
                        mVelocityTracker.computeCurrentVelocity(1000);
                        // 此处有两个原因决定是否打开菜单:
                        // 1.菜单被拉出宽度大于菜单宽度一半;
                        // 2.横向滑动速度大于最小滑动速度;
                        // 注意:之所以要小于负值,是因为向左滑则速度为负值
                        if (mVelocityTracker.getXVelocity() = SNAP_VELOCITY) {  // 向右侧滑达到侧滑最低速度,则关闭
                            mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
                        } else if (scrollX >= mMenuViewWidth / 2) { // 如果超过删除按钮一半,则打开
                            mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
                        } else {    // 其他情况则关闭
                            mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
                        }
                        invalidate();
                    }
                    mMenuViewWidth = INVALID_CHILD_WIDTH;
                    mIsSlide = false;
                    mPosition = INVALID_POSITION;
                    releaseVelocity();  // 这里之所以会调用,是因为如果前面拦截了,就不会执行ACTION_UP,需要在这里释放追踪
                    break;
            }
            return true;
        } else {
            // 此处防止RecyclerView正常滑动时,还有菜单未关闭
            closeMenu();
            // Velocity,这里的释放是防止RecyclerView正常拦截了,但是在onTouchEvent中却没有被释放;
            // 有三种情况:1.onInterceptTouchEvent并未拦截,在onInterceptTouchEvent方法中,DOWN和UP一对获取和释放;
            // 2.onInterceptTouchEvent拦截,DOWN获取,但事件不是被侧滑处理,需要在这里进行释放;
            // 3.onInterceptTouchEvent拦截,DOWN获取,事件被侧滑处理,则在onTouchEvent的UP中释放。
            releaseVelocity();
        }
        return super.onTouchEvent(e);
    }

    private void releaseVelocity() {
        if (mVelocityTracker != null) {
            mVelocityTracker.clear();
            mVelocityTracker.recycle();
            mVelocityTracker = null;
        }
    }

    private void obtainVelocity(MotionEvent event) {
        if (mVelocityTracker == null) {
            mVelocityTracker = VelocityTracker.obtain();
        }
        mVelocityTracker.addMovement(event);
    }

    public int pointToPosition(int x, int y) {
        int firstPosition = ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition();
        Rect frame = mTouchFrame;
        if (frame == null) {
            mTouchFrame = new Rect();
            frame = mTouchFrame;
        }

        final int count = getChildCount();
        for (int i = count - 1; i >= 0; i--) {
            final View child = getChildAt(i);
            if (child.getVisibility() == View.VISIBLE) {
                child.getHitRect(frame);
                if (frame.contains(x, y)) {
                    return firstPosition + i;
                }
            }
        }
        return INVALID_POSITION;
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            mFlingView.scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        }
    }

    /**
     * 将显示子菜单的子view关闭
     * 这里本身是要自己来实现的,但是由于不定制item,因此不好监听器点击事件,因此需要调用者手动的关闭
     */
    public void closeMenu() {
        if (mFlingView != null && mFlingView.getScrollX() != 0) {
            mFlingView.scrollTo(0, 0);
        }
    }
}

关于侧滑item的添加,则在适配器的编写中,设置在每个item的布局上,注意这里的侧滑菜单按钮的宽度不能设置为wrap_content,不然侧滑按钮的宽度就会为0,需要给固定宽度,这里先给上布局截图

Android RecyclerView 二级列表侧滑简单实现
item布局.png

为了看看效果,这边写了个简单的适配器,实现item中两个控件的点击监听,侧滑出删除菜单后点击删除数据并且提示并关闭,适配器代码如下:

public class TestAdapter extends RecyclerView.Adapter {

    private List list;
    private onAdapterItemClickListener itemClickListener;
    public TestAdapter(List list) {
        this.list = list;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).
                inflate(R.layout.item_text,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {

        holder.tv_content.setText(list.get(position));
        holder.tv_content.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                itemClickListener.onItemClick(view,position);
            }
        });

        holder.tv_delete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                itemClickListener.onItemClick(view,position);
            }
        });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    static class ViewHolder extends RecyclerView.ViewHolder{

        TextView tv_content,tv_delete;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            tv_content=itemView.findViewById(R.id.tv_content);
            tv_delete=itemView.findViewById(R.id.tv_delete);
        }
    }


    public void reFreshData(List list){
        this.list=list;
        notifyDataSetChanged();
    }


    public interface onAdapterItemClickListener{
        void onItemClick(View view,int selectPosition);
    }

    public void setItemClickListener(onAdapterItemClickListener itemClickListener) {
        this.itemClickListener = itemClickListener;
    }
}

在主界面绑定控件后实现适配器初始化,initAdapter()代码如下:

 private void initAdapter() {
        final List data=new ArrayList();
        for(int i=0; i

效果图如下:

Android RecyclerView 二级列表侧滑简单实现
测滑简单效果图.gif

到这里为止实现了简单侧滑,若是觉得可扩展功能太少,github上有更为成熟的自定义控件,各位可以看看这位大佬的开源库: com.yanzhenjie.recyclerview

二级列表适配器的实现

接着来说说二级列表的实现,其实就是实现多样式布局的编写,根据item类型来绑定我们自定义创建的holder,然后在各自的item实现控件不同样式布局编写,这里我在原来大佬的基础上实现打开某个父列表下的子item。

先编写用来封装数据类型的类DataTree

import java.util.List;
/**
 * 二级列表数据格式
 */
public class DataTree {
    private K groupItem;//第一级
    private List subItems;//第二级

    public DataTree(K groupItem, List subItems) {
        this.groupItem = groupItem;
        this.subItems = subItems;
    }

    public K getGroupItem() {
        return groupItem;
    }

    public void setGroupItem(K groupItem) {
        this.groupItem = groupItem;
    }

    public List getSubItems() {
        return subItems;
    }

    public void setSubItems(List subItems) {
        this.subItems = subItems;
    }
}

接着再编写用于判断每个item的视图类型,用来区分ViewType 的类型与记录索引位置的类 ItemStatus

public class ItemStatus {
    public static final int VIEW_TYPE_GROUPITEM = 0;
    public static final int VIEW_TYPE_SUBITEM = 1;

    private int viewType;
    private int groupItemIndex = 0;
    private int subItemIndex = -1;

    public ItemStatus() {
    }

    public int getViewType() {
        return viewType;
    }

    public void setViewType(int viewType) {
        this.viewType = viewType;
    }

    public int getGroupItemIndex() {
        return groupItemIndex;
    }

    public void setGroupItemIndex(int groupItemIndex) {
        this.groupItemIndex = groupItemIndex;
    }

    public int getSubItemIndex() {
        return subItemIndex;
    }

    public void setSubItemIndex(int subItemIndex) {
        this.subItemIndex = subItemIndex;
    }
}

接着来实现我们的抽象类SecondListAdapter

public abstract class SecondListAdapter extends RecyclerView
        .Adapter {
    private List groupItemStatus = new ArrayList();

    private List dataTrees = new ArrayList();


    /**
     * 用来通知刷新某个父view是否展开其子列表
     */
    public void openParentItem(int index) {
        expandOneItem(index);
    }

    private void expandOneItem(int index) {
        if (index > dataTrees.size() - 1) return;//超过下标默认不打
        groupItemStatus.clear();
        for (int i = 0; i  groupItemStatus) {
        for (int i = 0; i  position) {

                itemStatus.setViewType(ItemStatus.VIEW_TYPE_SUBITEM);
                itemStatus.setGroupItemIndex(i - 1);
                itemStatus.setSubItemIndex(position - (count - dataTrees.get(i - 1).getSubItems
                        ().size()));
                break;

            }

            count++;

            if (groupItemStatus.get(i)) {

                count += dataTrees.get(i).getSubItems().size();

            }


        }

        if (i >= groupItemStatus.size()) {
            itemStatus.setGroupItemIndex(i - 1);
            itemStatus.setViewType(ItemStatus.VIEW_TYPE_SUBITEM);
            itemStatus.setSubItemIndex(position - (count - dataTrees.get(i - 1).getSubItems().size
                    ()));
        }
        return itemStatus;
    }
}

让我们自己创建的适配器RecyclerAdapter 继承抽象类 SecondListAdapter,实现其中的方法

public class RecyclerAdapter extends SecondListAdapter {

    private Context context;

    private List> dts;
    private OnParentItemClickListener parentItemClickListener;
    private OnSubItemClickListener subItemClickListener;
    private int expandIndex = -1;//打开某个父级item的子列表的下标,默认不打开

    public RecyclerAdapter(Context context, OnParentItemClickListener parentItemClickListener, OnSubItemClickListener subItemClickListener) {
        this.context = context;
        this.parentItemClickListener = parentItemClickListener;
        this.subItemClickListener = subItemClickListener;
    }

    @Override
    public RecyclerView.ViewHolder groupItemViewHolder(ViewGroup parent) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_first_level, parent, false);
        return new GroupItemViewHolder(view);
    }

    @Override
    public RecyclerView.ViewHolder subItemViewHolder(ViewGroup viewGroup) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_second_level, viewGroup, false);
        return new SubItemViewHolder(view);
    }

    @Override
    public void onGroupItemBindViewHolder(RecyclerView.ViewHolder holder, final int groupItemIndex, boolean ifExpand) {
        ((GroupItemViewHolder) holder).tv_group.setText("第" + (groupItemIndex + 1) + "个" + dts.get(groupItemIndex).getGroupItem());
        ((GroupItemViewHolder) holder).tv_delete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                parentItemClickListener.onParentClick(v, groupItemIndex);
            }
        });

        if (groupItemIndex == expandIndex)
            ((GroupItemViewHolder) holder).img_right.setRotation(ifExpand ? 90 : 0);


    }

    @Override
    public void onSubItemBindViewHolder(RecyclerView.ViewHolder holder, int groupItemIndex, int subItemIndex) {
        ((SubItemViewHolder) holder).tv_name.setText(dts.get(groupItemIndex).getSubItems().get(subItemIndex));

    }

    @Override
    public void onGroupItemClick(Boolean isExpand, GroupItemViewHolder holder, int groupItemIndex) {
        //isExpand:false 展开  true:收起来
        holder.img_right.setRotation(isExpand ? 0 : 90);
    }

    @Override
    public void onSubItemClick(SubItemViewHolder holder, int groupItemIndex, int subItemIndex) {
        subItemClickListener.onChildClick(groupItemIndex, subItemIndex);
    }


    public static class GroupItemViewHolder extends RecyclerView.ViewHolder {

        TextView tv_group, tv_delete;
        ImageView img_right;
        LinearLayout ly_parent;

        public GroupItemViewHolder(View itemView) {
            super(itemView);

            tv_group = itemView.findViewById(R.id.tv_group);
            img_right = itemView.findViewById(R.id.img_right);
            tv_delete = itemView.findViewById(R.id.tv_delete);
            ly_parent = itemView.findViewById(R.id.ly_parent);
        }
    }

    public static class SubItemViewHolder extends RecyclerView.ViewHolder {
        TextView tv_name;

        public SubItemViewHolder(View itemView) {
            super(itemView);
            tv_name = itemView.findViewById(R.id.tv_name);

        }
    }


    public void setData(List data) {
        dts = data;
        notifyNewData(dts);

    }


    public void expand(int position) {
        expandIndex = position;
        openParentItem(position);
        notifyNewData(dts);
    }


    /**
     * 父列表控件点击监听
     */
    public interface OnParentItemClickListener {
        void onParentClick(View view, int groupItemIndex);
    }

    /**
     * 二级列表整个item点击监听
     */
    public interface OnSubItemClickListener {
        void onChildClick(int groupItemIndex, int subItemIndex);
    }
}

这里附上我两个不同的holder的布局编写样式

Android RecyclerView 二级列表侧滑简单实现
item_first_level.png
Android RecyclerView 二级列表侧滑简单实现
item_second_level.png

接下来在在主界面实现数据填充和初始化,绑定控件啥的就不写,直接上适配器初始化的代码 initAdapter():

  private void initAdapter() {

        List professionList1 = new ArrayList();
        professionList1.add("Android 开发工程师");
        professionList1.add("后台开发");

        List professionList2 = new ArrayList();
        professionList2.add("WEB前端工程师");

        dataTrees.add(new DataTree("JAVA", professionList1));
        dataTrees.add(new DataTree("JavaScript", professionList2));
        //二级列表初始化

        adapter = new RecyclerAdapter(this, this, this);
        ry.setLayoutManager(new LinearLayoutManager(this));
        ry.setAdapter(adapter);

        adapter.setData(dataTrees);

        //这个是实现填充数据后,默认展开某个父级列表下的子item
        // 传入的下标超过数据集合的索引则默认不打开,可不调用该方法
        adapter.expand(0);

    }

这个运行的效果就是最先贴出来的gif图( adapter.expand(0) 没有录制进去,就是进入的时候默认打开了某个父级列表下的子列表 ,小伙伴们好奇的话可自行去试试)

至此,二级列表的实现到此为止,在这里在附上我项目的源码,有不足之处麻烦指正,希望能帮上阅读此篇文章的各位

Github Demo

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。