Android双向列表左右联动效果

最新推荐文章于 2024-07-25 20:49:13 发布

劳尔_

最新推荐文章于 2024-07-25 20:49:13 发布

阅读量2.9k

点赞数 3

文章标签： Android

本文链接：https://blog.csdn.net/raul575_li/article/details/82222632

版权

本文介绍了如何在Android中实现类似饿了么点餐页面的左右双向联动列表效果。使用BaseRecyclerViewAdapterHelper框架，通过监听右侧列表滑动，动态调整顶部title和左侧列表选中状态，实现联动交互。详细讲解了数据格式、布局设计以及关键代码实现。

摘要由CSDN通过智能技术生成

转载请作明出处：

开篇

前一段时间有一个需求，需要做一个左右双向联动的列表。类似于饿了么点餐页面，但是远没有那么复杂，只是用于展示的一个页面。不是很复杂，做完已经很久了，目前为止没有出现什么问题，所以在此将它分享给大家。

番外

此功能依赖于BaseRecyclerViewAdapterHelper的adapter框架编写，如果各位看官没有接触过这个库，请先点击链接，大致了解过后再回来看此文章，事半功倍（强烈推荐此库，太好用了）。

先看一下效果图吧，下图是做好的demo的效果图：

首先是布局，布局文件是两个RecyclerView，和一个TextView组成。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rec_left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/white" />

    <View
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:background="@color/divider" />

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rec_right"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TextView
            android:id="@+id/right_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/divider"
            android:paddingBottom="@dimen/dp10"
            android:paddingLeft="@dimen/dp13"
            android:paddingRight="@dimen/dp10"
            android:paddingTop="@dimen/dp10"
            android:singleLine="true"
            android:textColor="@color/black"
            android:textSize="@dimen/sp16" />
    </FrameLayout>
</LinearLayout>

功能

然后再看一下数据格式吧（由于是自己写的demo，所以数据格式只是简单的处理了一下，在正常开发的时候，这个格式需要同后台同事协商好）：

//获取数据(若请求服务端数据,请求到的列表需有序排列)
private void initData() {
    left = new ArrayList<>();
    left.add("第一组");
    left.add("第二组略略略略略略略");
    left.add("第三组哈哈哈哈哈哈哈哈哈哈hahahahahahaha");
    left.add("第四组哈哈哈哈哈嗝~");
    left.add("第五组");
    left.add("第六组哎呀我去");
    left.add("第七组");

    right = new ArrayList<>();

    right.add(new ScrollBean(true, left.get(0)));
    right.add(new ScrollBean(new ScrollBean.ScrollItemBean("1111111", left.get(0))));
    right.add(new ScrollBean(new ScrollBean.ScrollItemBean("1111111", left.get(0))));
    right.add(new ScrollBean(new ScrollBean.ScrollItemBean("1111111", left.get(0))));
    right.add(new ScrollBean(new ScrollBean.ScrollItemBean("1111111", left.get(0))));

    right.add(new ScrollBean(true, left.get(1)));
    right.add(new ScrollBean(new ScrollBean.ScrollItemBean("2222222", left.get(1))));
    right.add(new ScrollBean(new ScrollBean.ScrollItemBean("2222222", left.get(1))));
    right.add(new ScrollBean(new ScrollBean.ScrollItemBean("2222222", left.get(1))));
    right.add(new ScrollBean(new ScrollBean.ScrollItemBean("2222222", left.get(1))));
    right.add(new ScrollBean(new ScrollBean.ScrollItemBean("2222222", left.get(1))));
    right.add(new ScrollBean(new