美文网首页
左右两侧recyclerView相互滑动

左右两侧recyclerView相互滑动

作者: 大叔不秃 | 来源:发表于2022-02-16 16:28 被阅读0次

    最近做项目需要用到两个RecyclerView互相联动的功能,类似美团外卖的点餐列表,不同的是项目用到的右侧是点击分类,要想写出流畅的列表,就一定要考虑得非常的周全,那么左侧一个RecyclerView,右侧一个RecyclerView,尽量减少嵌套,对于如下这种布局我们可以考虑使用GridLayoutManager,然后通过Recyclerview多布局和GridLayoutManager的一项占据多列来实现然后找了很多资料,把遇到的问题记录下来和大家一起分享,有类似需要的朋友可以看一下。先上图:


    image.png

    1.左侧联动右侧,点击左侧任意一项、背景变色、右侧对应位置滚动到顶部。

    2.右侧联动左侧,右侧滚动,左侧需要同步右侧在顶部的位置。

    public class SortBean {
        public int bigSortId;
        public String bigSortName;
        public List<SortItem> list;
        public boolean isSelected;
     
        public SortBean(int bigSortId, String bigSortName, List<SortItem> list) {
            this.bigSortId = bigSortId;
            this.bigSortName = bigSortName;
            this.list = list;
        }
    }
     
     
     
    public class SortItem {
        public int viewType;
        public int id;
        public String name;
     
        public int position = -1;
     
        public SortItem(int viewType, int id, String name, int position) {
            this.viewType = viewType;
            this.id = id;
            this.name = name;
            this.position = position;
        }
    }
    

    构造数据

    public class Repository {
     
        private final List<SortBean> leftList = new ArrayList<>();
        private final List<SortItem> rightList = new ArrayList<>();
        // 记录左侧列表和右侧列表index对应关系
        private final Map<Integer, Integer> indexMap = new HashMap<>();
     
        public Repository() {
            buildList();
            buildIndexMap();
        }
     
        private void buildList() {
            for (int i = 0; i < 30; i++) {
                SortBean bean = new SortBean(i, "大分类" + i, getRightItemList(i));
                leftList.add(bean);
                rightList.addAll(bean.list);
            }
        }
     
        private void buildIndexMap() {
            for (int i = 0; i < rightList.size(); i++) {
                if (rightList.get(i).position != -1) {
                    indexMap.put(rightList.get(i).position, i);
                }
            }
        }
        ...
        ...
    }
    

    左侧联动右侧

    private void onClickLeftItem(int index) {
        // 左侧选中并滑到中间位置
        leftAdapter.setSelectedPosition(index);
        MyUtils.moveToMiddle(leftRecyclerView, index);
        // 右侧滑到对应位置
        ((GridLayoutManager)rightRecyclerView.getLayoutManager())
                .scrollToPositionWithOffset(repository.getIndexMap().get(index),0);
    }
    

    左侧adapter的setSelectedPosition方法

    public void setSelectedPosition(int position) {
        mListData.get(mSelectedPosition).isSelected = false;
        notifyItemChanged(mSelectedPosition);
        mListData.get(position).isSelected = true;
        notifyItemChanged(position);
        mSelectedPosition = position;
    }
    

    只贴出了关键的代码,实现起来还是很ok的,是我走了很多坑才写出来这么一个比较流畅的列表,我用的RecyclerView的Adapter和ViewHolder是继承了封装好的基类,如果有需要大家可以下载源码运行一下,看一下。
    如果想学习RecyclerView的使用,推荐大家看鸿洋大神的博客,写的很详细了。
    源码地址:https://gitee.com/oubajunping/list_RecyclerView.git

    转载请标明出处:
    http://blog.csdn.net/lmj623565791/article/details/45059587
    本文出自:【张鸿洋的博客】

    相关文章

      网友评论

          本文标题:左右两侧recyclerView相互滑动

          本文链接:https://www.haomeiwen.com/subject/bprdlrtx.html