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