Android开发丶二级列表的联动功能实现

通常我们在外卖或者商城app会看到竖排二级列表的界面，点击左边列表的分类菜单，右边列表则会显示对应分类下的列表内容，这篇博文将对该功能的实现归纳和整理。

首先看下效果图：

在第一个页面选择最多三个标签，将书局塞到数组里返回上一个页面，然后就可以按照需求完成一系列操作。

下面说下实现步骤：

1.首先分析界面，是两个等比宽的列表，推荐使用recyclerview，右上角用来记录选择的标签个数，点击即可把数据返回上一个页面，未选择则返回空数组。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="40dp"><TextViewandroid:id="@+id/main_tv"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center_vertical"android:text="确定(0/3)"android:textSize="16sp"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:paddingRight="10dp"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="选择页面"android:textSize="18sp"android:layout_centerInParent="true"/></RelativeLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><android.support.v7.widget.RecyclerViewandroid:id="@+id/main_recyclerviewAll"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1" /><Viewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="@color/colorPrimaryDark" /><android.support.v7.widget.RecyclerViewandroid:id="@+id/main_recyclerviewDetail"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1" /></LinearLayout>
</LinearLayout>

2.绘制列表item布局，因为就是简单的一个文字，只放一个居中的TextView，由于RecyclerView默认没有分隔线，我们在下面再放条高度为1px的view

item_recyclerview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:id="@+id/item_recyclerview_ll"><TextViewandroid:id="@+id/item_recyclerview_tv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="textview"android:layout_gravity="center_horizontal"android:layout_marginTop="15dp"/><Viewandroid:layout_width="match_parent"android:layout_height="1px"android:background="#e3e3d3"android:layout_marginTop="15dp"/></LinearLayout>

3.新建FirstActivity，界面放个跳转至选择界面MainActivity的Button和用于显示从选择界面返回的标签数组的TextView

activity_first.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><Buttonandroid:id="@+id/first_btn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="去选择界面" /><TextViewandroid:id="@+id/first_tv"android:layout_width="wrap_content"android:layout_height="wrap_content" /></LinearLayout>

4.在选择界面MainActivity中，首先初始化控件。

tv = findViewById(R.id.main_tv);
recyclerviewAll = findViewById(R.id.main_recyclerviewAll);
recyclerviewDetail = findViewById(R.id.main_recyclerviewDetail);
LinearLayoutManager layout = new LinearLayoutManager(this);
LinearLayoutManager layout1 = new LinearLayoutManager(this);
recyclerviewAll.setLayoutManager(layout);
recyclerviewDetail.setLayoutManager(layout1);

5.设置列表数据bean，isFirst为是否选中的状态boolean值

package com.fantasychong.doublechecklisttest;import java.io.Serializable;/**Crated by yedona on 2018/9/6*/
public class ListBean implements Serializable {private String name;private boolean isSelect;public ListBean(String name, boolean isSelect) {this.name = name;this.isSelect = isSelect;}public boolean isSelect() {return isSelect;}public void setSelect(boolean select) {isSelect = select;}public String getName() {return name;}public void setName(String name) {this.name = name;}
}

5.设置左列表（一级）的数据，因为第一个数据标签默认选中，所以我们设置isSelect为true。

/*** 设置左列表数据*/
private void initAllList() {allList = new ArrayList<>();AllListBean bean = new AllListBean("英雄联盟", true);allList.add(bean);AllListBean bean1 = new AllListBean("仙剑奇侠传", false);allList.add(bean1);AllListBean bean2 = new AllListBean("大航海时代", false);allList.add(bean2);AllListBean bean3 = new AllListBean("太阁立志传", false);allList.add(bean3);AllListBean bean4 = new AllListBean("战国无双", false);allList.add(bean4);AllListBean bean5 = new AllListBean("三国志", false);allList.add(bean5);AllListBean bean6 = new AllListBean("最终幻想", false);allList.add(bean6);AllListBean bean7 = new AllListBean("幻想传说", false);allList.add(bean7);
}

6.设置左右列表的通用adapter，这里推荐继承BaseQuickApdater，精简易操作。

package com.fantasychong.doublechecklisttest;import android.content.Context;
import android.graphics.Color;
import android.support.annotation.Nullable;
import android.widget.TabHost;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import java.util.List;/**Crated by yedona on 2018/9/6*/
public class ListAdapter extends BaseQuickAdapter<AllListBean, BaseViewHolder> {private final Context context;private final List<AllListBean> data;public ListAdapter (Context context, @Nullable List<AllListBean> data) {super(R.layout.item_recyclerview, data);this.context= context;this.data= data;}@Overrideprotected void convert(BaseViewHolder helper, AllListBean item) {helper.setText(R.id.item_recyclerview_tv, item.getName()).setBackgroundColor(R.id.item_recyclerview_ll, item.isSelect()? Color.WHITE: Color.GRAY);}
}

在convert方法中设置是否选中后的背景颜色，选中设为白色white，反之设为灰色gray。

7.把数据塞到左recyclerView中，这样左列表可以呈现我们的塞进去的数据。

adapterAll = new ListAdapter (MainActivity.this, allList);
recyclerviewAll.setAdapter(adapterAll);

8.设置左列表的点击事件，当选中时标签会变为白色，并且上个选中标签会设置成未选中状态，即为灰色。注意这里要添加notifyDataSetChanged方法通知adapter刷新。

adapterAll.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {@Overridepublic void onItemClick(BaseQuickAdapter adapter, View view, int position) {if (perPosition != position) {allList.get(perPosition).setSelect(false);allList.get(position).setSelect(true);adapterAll.notifyDataSetChanged();perPosition = position;}}
});

9.这样就完成了左列表显示并选中未选中的功能实现，接下来我们配置右（二级）列表。

我们初衷是进入页面时，左列表直接显示数据，右列表也要显示左列表的第一个分类下的数据，更改左列表标签，右列表的数据也会随之更改。

所以我们先把左列表第一个标签下的内容塞到右列表中让它呈现。

adapterAll.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {@Overridepublic void onItemClick(BaseQuickAdapter adapter, View view, int position) {if (perPosition != position) {allList.get(perPosition).setSelect(false);allList.get(position).setSelect(true);adapterAll.notifyDataSetChanged();//设置右列表数据initDetailList(position);adapterDetail.notifyDataSetChanged();perPosition = position;}}
});

adapterDetail = new ListAdapter(MainActivity.this, detailList);
recyclerviewDetail.setAdapter(adapterDetail);

10.这样进入界面两个列表都会显示数据了，接下来做二级列表的选中和取消选中功能，因为二级列表要多选，所以可设置多个标签同时选中状态，同时把选中标签塞到一个checklist中，用于返回上个页面FirstActivity中，记着实时更新右上角的选中个数文本。

adapterDetail.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {@Overridepublic void onItemClick(BaseQuickAdapter adapter, View view, int position) {if (detailList.get(position).isSelect()){checkList.remove(detailList.get(position).getName());}else{if (checkList.size()== 3) {Toast.makeText(MainActivity.this, "最多只能选择三个", Toast.LENGTH_SHORT).show();return;}checkList.add(detailList.get(position).getName());}detailList.get(position).setSelect(!detailList.get(position).isSelect());adapterDetail.notifyDataSetChanged();}
});

11.接下来要做他们的联动，当一级列表点击时，二级列表数据会更新，所以我们先清空二级列表数据list，再把一级列表position对应的数据塞到二级列表数据list，把已选中标签塞到一个checklist中，用于返回上一个页面FirstActivity中。

/*** 设置右列表数据*/
private void initDetailList(int position) {detailList.clear();switch (position) {case 0:ListBean bean = new ListBean("暗夜猎手薇恩", false);detailList.add(bean);ListBean bean1 = new ListBean("暴走萝莉金克丝", false);detailList.add(bean1);ListBean bean2 = new ListBean("皮城女警凯瑟琳", false);detailList.add(bean2);ListBean bean3 = new ListBean("放逐之刃锐雯", false);detailList.add(bean3);break;case 1:ListBean bean4 = new ListBean("李逍遥", false);detailList.add(bean4);ListBean bean5 = new ListBean("赵灵儿", false);detailList.add(bean5);ListBean bean6 = new ListBean("林月如", false);detailList.add(bean6);ListBean bean7 = new ListBean("阿奴", false);detailList.add(bean7);break;case 2:ListBean bean8 = new ListBean("拉斐尔卡斯特路", false);detailList.add(bean8);ListBean bean9 = new ListBean("丽璐阿歌特", false);detailList.add(bean9);ListBean bean10 = new ListBean("李华梅", false);detailList.add(bean10);ListBean bean11 = new ListBean("赫德拉姆约阿奇姆柏格斯统", false);detailList.add(bean11);ListBean bean12 = new ListBean("蒂雅瓦曼恰斯卡", false);detailList.add(bean12);break;case 3:ListBean bean13 = new ListBean("丰臣秀吉", false);detailList.add(bean13);ListBean bean14 = new ListBean("织田信长", false);detailList.add(bean14);ListBean bean15 = new ListBean("真田幸村", false);detailList.add(bean15);ListBean bean16 = new ListBean("武田信玄", false);detailList.add(bean16);ListBean bean17 = new ListBean("本多忠胜", false);detailList.add(bean17);break;case 4:ListBean bean18 = new ListBean("上杉谦信", false);detailList.add(bean18);break;case 5:ListBean bean19 = new ListBean("赵云", false);detailList.add(bean19);break;case 6:ListBean bean20 = new ListBean("萨菲罗斯", false);detailList.add(bean20);break;case 7:ListBean bean21 = new ListBean("达尔斯", false);detailList.add(bean21);break;default:break;}
}

12.把initDetailList方法放到一级列表的onitemclicklistener中，同时一级列表切换时，清空二级列表的已选中标签数组checklist。

adapterAll.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {@Overridepublic void onItemClick(BaseQuickAdapter adapter, View view, int position) {if (perPosition != position) {allList.get(perPosition).setSelect(false);allList.get(position).setSelect(true);adapterAll.notifyDataSetChanged();//设置右列表数据initDetailList(position);checkList.clear();tv.setText("确定(0/3)");adapterDetail.notifyDataSetChanged();perPosition = position;}}
});

13.这下联动已经完成，设置右上角个数文本的点击事件，使用setResult方法传递checklist。

tv.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Intent intent= new Intent();intent.putExtra("list", checkList.toString());setResult(1, intent);finish();}
});

14.在FirstActivity中接受list并显示在textview上，可以根据实际需求做相应操作。

@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {if (data== null){return;}if (requestCode== 1){tv.setText(data.getStringExtra("list"));Log.d("listlistlist", data.getStringExtra("list"));}
}

至此全部完成，Demo附上。

资源下载

Android开发丶二级列表的联动功能实现相关推荐

android购物车栏,Android怎么实现二级列表购物车功能
Android怎么实现二级列表购物车功能发布时间:2021-04-16 12:45:40 来源:亿速云阅读:61 作者:小新小编给大家分享一下Android怎么实现二级列表购物车功能,希望大家阅 ...
Android开发丶集成微信原生分享并于分享网页时加载网络缩略图
微信分享也是一项很常用的功能了,以往都是用友盟或者mobShareSDK框架来实现的,这两者在微信官方的sdk基础上封装的很好,并且加入了一些很实用性的功能,不过这次因为只有微信平台的分享,而且微信登 ...
android开发 RecyclerView 瀑布列表布局
android开发 RecyclerView 瀑布列表布局 1.写一个内容的自定义小布局: <?xml version="1.0" encoding="utf-8& ...
android微信风格,Android开发实现模仿微信小窗口功能【Dialog对话框风格窗口】
本文实例讲述了Android开发实现模仿微信小窗口功能.分享给大家供大家参考,具体如下: 运用方法: 将显示窗口的风格设置为对话框风格即可具体效果: 具体实现: 首先我们先定义布局文件: andr ...
Android开发调用系统相机相册图片功能，解决小米手机拍照或者图片横竖相反问题，及小米手机相册图片路径问题
Android开发调用系统相机相册图片功能,解决小米手机拍照或者图片横竖相反问题,及小米手机相册图片路径问题 1.调用相机,兼容7.0 AndroidManifest配置 <providera ...
android 文字选中朗读,Android开发之文本内容自动朗读功能实现方法
本文实例讲述了Android开发之文本内容自动朗读功能实现方法.分享给大家供大家参考,具体如下: Android提供了自动朗读支持.自动朗读支持可以对指定文本内容进行朗读,从而发生声音:不仅如此,An ...
android的发音功能实现,Android开发之文本内容自动朗读功能实现方法
本文实例讲述了Android开发之文本内容自动朗读功能实现方法.分享给大家供大家参考,具体如下: Android提供了自动朗读支持.自动朗读支持可以对指定文本内容进行朗读,从而发生声音:不仅如此,An ...
android相册功能实现,Android开发实现的保存图片到相册功能示例
本文实例讲述了Android开发实现的保存图片到相册功能.分享给大家供大家参考,具体如下: 废话不多说,先上效果: 点击图片调用savephoto的SaveBitmapFromView(View v ...
Android 泽宇二级列表
在开发 Android APP 的时候,难免会需要实现二级列表的情况,而在自己的项目中使用的列表是ExpandableListView 如若转发标明转载处:https://mp.csdn.net/po ...

Android开发丶二级列表的联动功能实现

Android开发丶二级列表的联动功能实现相关推荐

最新文章

热门文章