Android开发丶带有选择功能的列表功能的实现

一般在开发过程中，我们会遇到这种需求，对列表的某些条目进行点选，然后进行下一步操作，一般列表控件都没该功能，这里就需要我们去自定义了，本篇博文将进行归纳和总结。

先看下效果图

  

下面说下实现步骤

1.按照国际惯例，分析界面，画布局

核心控件就是这个列表了，这里我们当然是用RecyclerView啦

<?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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="选择界面"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/main_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:padding="10dp"
            android:text="全选" />
    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/colorPrimaryDark" />

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

    <Button
        android:id="@+id/main_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="确定" />
</LinearLayout>

2.新建MainBean，我们这里比较简单，只有一个标题title和选中状态isSelect

package com.fantasychong.selectlisttest0910;

import java.io.Serializable;

/*
 *Crated by yedona on 2018/9/10
 */
public class MainBean implements Serializable {
    private String title;
    private boolean isSelect;

    @Override
    public String toString() {
        return "MainBean{" +
                "title='" + title + '\'' +
                ", isSelect=" + isSelect +
                '}';
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public boolean isSelect() {
        return isSelect;
    }

    public void setSelect(boolean select) {
        isSelect = select;
    }

    public MainBean(String title, boolean isSelect) {
        this.title = title;
        this.isSelect = isSelect;
    }
}

3.新建适配器adapter，依旧继承BaseQuickAdapter。

绘制item布局，一个title和一个圆点图片，圆点图片这里我们使用selector，当选中时显示

反之显示

xml文件如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_choose" android:state_checked="true"/>
    <item android:drawable="@drawable/radio_normal" android:state_checked="false"/>
</selector>

item布局为

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/item_main_ll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingLeft="10dp"
            android:paddingRight="10dp">

            <ImageView
                android:id="@+id/item_main_point"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@drawable/radio_choose_select" />
        </LinearLayout>

        <TextView
            android:id="@+id/item_main_tv"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="今天天气很不错!!!" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimaryDark" />
</RelativeLayout>

在adapter中，除了常规title赋值外，有几个比较重要的方法

a.圆点布局的点击事件，为了方便点击，特地给圆点图片外面套了一个布局，点击时改变该条item的选中状态（选中改为未选中，未选中改为选中），如果点击完后是选中状态就给图片赋radio_choose，反之赋radio_normal.

ll.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        item.setSelect(!item.isSelect());
        iv.setImageResource(item.isSelect() ? R.drawable.radio_choose : R.drawable.radio_normal);
    }
});

b.自定义一个selectAll方法。将列表所有的item都设置为XX状态，结果取决于用户调用该方法时传递的isSelectAll值，为true则选中所有item，为false则取消选中所有item。

public void selectAll(boolean isSelectAll) {
    for (MainBean bean : getData()) {
        bean.setSelect(isSelectAll);
    }
    notifyDataSetChanged();
}

c.自定义一个getSelectList()方法，用于获取当前点选的item的list

public List<MainBean> getSelectList() {
    List<MainBean> list = new ArrayList<>();
    for (MainBean bean : getData()) {
        if (bean.isSelect()) {
            list.add(bean);
        }
    }
    return list;
}

4.准备工作都做完了，下面就可以在MainActivity中调用了。

a.首先初始化控件。主要是设置右上角文字的点击事件，当前文字是"全选"，则调用取消全选的功能，当前文字是'全不选", 则调用全选的功能。下方按钮的点击事件主要是将选择的item数据list传递给上一个页面，实际需求我们可以灵活调用，这里仅供展示。

/**
 * 初始化控件
 */
private void initView() {
    rl= findViewById(R.id.main_rl);
    tv= findViewById(R.id.main_tv);
    btn= findViewById(R.id.main_btn);
    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Intent intent= new Intent();
            intent.putExtra("data", adapter.getSelectList().toString());
            setResult(1, intent);
            finish();
        }
    });
    tv.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if("全选".equals(tv.getText().toString())){
                tv.setText("全不选");
                adapter.selectAll(true);
            }else{
                tv.setText("全选");
                adapter.selectAll(false);
            }
            Log.d("listdata", adapter.getSelectList().toString());
        }
    });
}

b.初始化列表list，默认都是没选中的

/**
 * 初始化数据list
 */
private void initList() {
    MainBean bean= new MainBean("是你给了我一把伞，撑住倾盆洒落的孤单", false);
    dataList.add(bean);
    MainBean bean1= new MainBean("所以好像给你一湾河岸，洗涤腐蚀心灵的遗憾", false);
    dataList.add(bean1);
    MainBean bean2= new MainBean("给你我所有的温暖，脱下唯一挡风的衣衫", false);
    dataList.add(bean2);
    MainBean bean3= new MainBean("思念刮过背脊打着冷颤，眼神依旧为你而点燃", false);
    dataList.add(bean3);
}

c.初始化适配器

/**
 * 初始化适配器
 */
private void initAdapter() {
    adapter= new MainAdapter(dataList);
    LinearLayoutManager manager= new LinearLayoutManager(this);
    rl.setLayoutManager(manager);
    rl.setAdapter(adapter);
}

 

MainActivity完整代码：

package com.fantasychong.selectlisttest0910;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView rl;
    private TextView tv;
    private List<MainBean> dataList= new ArrayList<>();
    private MainAdapter adapter;
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化控件
        initView();
        //初始化数据list
        initList();
        //初始化适配器
        initAdapter();

    }

    /**
     * 初始化适配器
     */
    private void initAdapter() {
        adapter= new MainAdapter(dataList);
        LinearLayoutManager manager= new LinearLayoutManager(this);
        rl.setLayoutManager(manager);
        rl.setAdapter(adapter);
    }

    /**
     * 初始化控件
     */
    private void initView() {
        rl= findViewById(R.id.main_rl);
        tv= findViewById(R.id.main_tv);
        btn= findViewById(R.id.main_btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent= new Intent();
                intent.putExtra("data", adapter.getSelectList().toString());
                setResult(1, intent);
                finish();
            }
        });
        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if("全选".equals(tv.getText().toString())){
                    tv.setText("全不选");
                    adapter.selectAll(true);
                }else{
                    tv.setText("全选");
                    adapter.selectAll(false);
                }
                Log.d("listdata", adapter.getSelectList().toString());
            }
        });
    }

    /**
     * 初始化数据list
     */
    private void initList() {
        MainBean bean= new MainBean("是你给了我一把伞，撑住倾盆洒落的孤单", false);
        dataList.add(bean);
        MainBean bean1= new MainBean("所以好像给你一湾河岸，洗涤腐蚀心灵的遗憾", false);
        dataList.add(bean1);
        MainBean bean2= new MainBean("给你我所有的温暖，脱下唯一挡风的衣衫", false);
        dataList.add(bean2);
        MainBean bean3= new MainBean("思念刮过背脊打着冷颤，眼神依旧为你而点燃", false);
        dataList.add(bean3);
    }
}

 

至此全部完成，附上demo

资源下载