帶CheckBox的ListView

ListView嵌套CheckBox在應用中很常見，比如es檔案管理工具中多選檔案。

下面就自己來實現一下。看最終效果。

首先來看兩個布局檔案：

主布局檔案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".ListActivity" >    <ListView        android:id="@+id/main_list"            android:layout_width="fill_parent"             android:layout_height="wrap_content"        android:background="#ffffff"          /></RelativeLayout>

很簡單，就一個listiew。

item布局檔案：

<?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" >    <RelativeLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:orientation="horizontal" >        <ImageView            android:id="@+id/item_iv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical" />        <TextView            android:id="@+id/item_tv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_toRightOf="@id/item_iv"            android:layout_weight="1"            android:layout_margin="20dip"            android:textSize="18dip"             android:textColor="#000000"/>        <CheckBox            android:id="@+id/item_cb"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentRight="true"            android:layout_marginRight="30dip"            android:clickable="false"            android:focusable="false"            android:focusableInTouchMode="false" />    </RelativeLayout></LinearLayout>

每項都有一個圖片，一個textiew和CheckBox。

再自己建立一個Adapter類，繼承BaseAdapter。

package com.empty.adaptertest;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.CheckBox;import android.widget.ImageView;import android.widget.TextView;public class MyListAdapter extends BaseAdapter{// 填充資料的listprivate ArrayList<String> mList;// 用來控制CheckBox的選中狀況private static HashMap<Integer,Boolean> isSelected;// 上下文private Context mContext;// 用來匯入布局private LayoutInflater inflater = null;private List<Map<String, Object>> mData;    // 構造器public MyListAdapter(ArrayList<String> list, Context context) {this.mContext = context;this.mList = list;inflater = LayoutInflater.from(context);// 初始化資料initDate();}// 初始化isSelected的資料private void initDate(){//這兒定義isSelected這個map是記錄每個listitem的狀態，初始狀態全部為false。       isSelected = new HashMap<Integer, Boolean>();            for (int i = 0; i < mList.size(); i++) {                isSelected.put(i, false);         }        }@Overridepublic int getCount() {return mList.size();//return mData.size();  }@Overridepublic Object getItem(int position) {return mList.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder = null;if (convertView == null) {// 獲得ViewHolder對象holder = new ViewHolder();// 匯入布局並賦值給convertviewconvertView = inflater.inflate(R.layout.list_item, null);holder.iv = (ImageView)convertView.findViewById(R.id.item_iv);holder.tv = (TextView)convertView.findViewById(R.id.item_tv);holder.cb = (CheckBox)convertView.findViewById(R.id.item_cb);// 為view設定標籤convertView.setTag(holder);} else {// 取出holderholder = (ViewHolder) convertView.getTag();}// 設定list中TextView的顯示holder.iv.setImageDrawable(mContext.getResources().getDrawable(R.drawable.smile));holder.tv.setText(mList.get(position));// 根據isSelected來設定checkbox的選中狀況holder.cb.setChecked(getIsSelected().get(position));//holder.cb.setChecked(false);return convertView;}public static HashMap<Integer,Boolean> getIsSelected() {return isSelected;}public static void setIsSelected(HashMap<Integer,Boolean> isSelected) {MyListAdapter.isSelected = isSelected;}public final class ViewHolder{  public ImageView iv;  public TextView tv;   public CheckBox cb;  }}

主Activity：

package com.empty.adaptertest;import java.util.ArrayList;import android.os.Bundle;import android.app.Activity;import android.app.AlertDialog;import android.app.AlertDialog.Builder;import android.app.ListActivity;import android.view.Menu;import android.view.View;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.ListView;import android.widget.Toast;import com.empty.adaptertest.*;import com.empty.adaptertest.MyListAdapter.ViewHolder;public class TestActivity extends Activity{private ListView mListView;private MyListAdapter mAdapter;private ArrayList<String> list;private int checkNum;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_list);mListView=(ListView)findViewById(R.id.main_list);list = new ArrayList<String>();// 為Adapter準備資料initDate();// 執行個體化自訂的MyAdaptermAdapter = new MyListAdapter(list, this);mListView.setAdapter(mAdapter);mListView.setOnItemClickListener(new OnItemClickListenerImpl());}private class OnItemClickListenerImpl implements OnItemClickListener{@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {// TODO Auto-generated method stub// 取得ViewHolder對象，這樣就省去了通過層層的findViewById去執行個體化我們需要的cb執行個體的步驟  ViewHolder holder = (ViewHolder) arg1.getTag();  // 改變CheckBox的狀態  holder.cb.toggle();  // 將CheckBox的選中狀況記錄下來  mAdapter.getIsSelected().put(arg2, holder.cb.isChecked());   // 調整選定條目  if (holder.cb.isChecked() == true) {  checkNum++;  } else {  checkNum--;  }  // 用TextView顯示 Toast.makeText(getApplicationContext(), "You choose "+checkNum+"items.", Toast.LENGTH_SHORT).show();}};private void initDate(){for (int i = 0; i < 15; i++) {list.add("data" + "   " + i);}}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.activity_list, menu);return true;}}

這樣就完成了。動過initDate可以動態地控制listiew的大小，在OnItemClickListenerImpl，通過holder.cb.toggle();來選定CheckBox。

擴充  

        這種介面在很多情況下並不能提供一個很好的體驗，因為listiew大部分的情況是用於呈現內容，單擊是用於選擇查看，而checkbox並不是一直需要顯示，所以我們需要對其進行改進。

        改進的效果：正常模式下checkbox不顯示。單擊item彈出對話方塊，長按item進入多選模式，checkbox出現，單擊item則可選中checkbox。

        同時在菜單中顯示添加全選與反選。

        實現思路就是在主Activity和MyListAdapter中添加一個boolean的狀態變數，然後通過OnItemLongClickListener來設定點擊的模式。代碼如下：

修改後的MyListAdapter

package com.empty.adaptertest;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.CheckBox;import android.widget.ImageView;import android.widget.TextView;public class MyListAdapter extends BaseAdapter{// 填充資料的listprivate ArrayList<String> mList;// 用來控制CheckBox的選中狀況private static HashMap<Integer,Boolean> isSelected;// 上下文private Context mContext;// 用來匯入布局private LayoutInflater inflater = null;private List<Map<String, Object>> mData;private boolean isMultiChoose;// 構造器public MyListAdapter(ArrayList<String> list, Context context) {this.mContext = context;this.mList = list;inflater = LayoutInflater.from(context);isMultiChoose=false;// 初始化資料initDate();}// 初始化isSelected的資料private void initDate(){//這兒定義isSelected這個map是記錄每個listitem的狀態，初始狀態全部為false。       isSelected = new HashMap<Integer, Boolean>();            for (int i = 0; i < mList.size(); i++) {                isSelected.put(i, false);         }        }@Overridepublic int getCount() {return mList.size();//return mData.size();  }@Overridepublic Object getItem(int position) {return mList.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder = null;if (convertView == null) {// 獲得ViewHolder對象holder = new ViewHolder();// 匯入布局並賦值給convertviewconvertView = inflater.inflate(R.layout.list_item, null);holder.iv = (ImageView)convertView.findViewById(R.id.item_iv);holder.tv = (TextView)convertView.findViewById(R.id.item_tv);holder.cb = (CheckBox)convertView.findViewById(R.id.item_cb);if(isMultiChoose){System.out.println("isMultiChoose");holder.cb.setVisibility(View.VISIBLE);}else{System.out.println("isNotMultiChoose");holder.cb.setVisibility(View.GONE);}// 為view設定標籤convertView.setTag(holder);} else {// 取出holderholder = (ViewHolder) convertView.getTag();}// 設定list中TextView的顯示holder.iv.setImageDrawable(mContext.getResources().getDrawable(R.drawable.smile));holder.tv.setText(mList.get(position));// 根據isSelected來設定checkbox的選中狀況holder.cb.setChecked(getIsSelected().get(position));return convertView;}public static HashMap<Integer,Boolean> getIsSelected() {return isSelected;}public static void setIsSelected(HashMap<Integer,Boolean> isSelected) {MyListAdapter.isSelected = isSelected;}public void setIsMultiChoose(Boolean b){isMultiChoose=b;}public final class ViewHolder{  public ImageView iv;  public TextView tv;   public CheckBox cb;  }}

修改後的TestActivity

package com.empty.adaptertest;import java.util.ArrayList;import android.os.Bundle;import android.app.Activity;import android.app.AlertDialog;import android.app.AlertDialog.Builder;import android.app.ListActivity;import android.view.KeyEvent;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.AdapterView.OnItemLongClickListener;import android.widget.ListView;import android.widget.Toast;import com.empty.adaptertest.*;import com.empty.adaptertest.MyListAdapter.ViewHolder;public class TestActivity extends Activity{private ListView mListView;private MyListAdapter mAdapter;private ArrayList<String> list;private int checkNum;private boolean isMultiChoose;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_list);mListView=(ListView)findViewById(R.id.main_list);list = new ArrayList<String>();// 為Adapter準備資料initDate();// 執行個體化自訂的MyAdaptermAdapter = new MyListAdapter(list, this);mListView.setAdapter(mAdapter);mListView.setOnItemClickListener(new OnItemClickListenerImpl());mListView.setOnItemLongClickListener(new OnItemLongClickListenerImpl());isMultiChoose=false;}private class OnItemClickListenerImpl implements OnItemClickListener{@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {// TODO Auto-generated method stub/**/// 取得ViewHolder對象，這樣就省去了通過層層的findViewById去執行個體化我們需要的cb執行個體的步驟  if(isMultiChoose){ViewHolder holder = (ViewHolder) arg1.getTag();  // 改變CheckBox的狀態  holder.cb.toggle();  // 將CheckBox的選中狀況記錄下來  mAdapter.getIsSelected().put(arg2, holder.cb.isChecked());   // 調整選定條目  if (holder.cb.isChecked() == true) {  checkNum++;  } else {  checkNum--;  }  // 用TextView顯示 Toast.makeText(getApplicationContext(), "You choose "+checkNum+"items.", Toast.LENGTH_SHORT).show();}else{AlertDialog.Builder builder = new Builder(TestActivity.this);builder.setMessage("You Clicked Me!");builder.setTitle("Warning");builder.setPositiveButton("Ok",null);builder.show();}}};private class OnItemLongClickListenerImpl implements OnItemLongClickListener{@Overridepublic boolean onItemLongClick(AdapterView<?> arg0, View arg1,int arg2, long arg3) {// TODO Auto-generated method stubisMultiChoose=true;mAdapter.setIsMultiChoose(isMultiChoose);mListView.setAdapter(mAdapter);return false;}}private void initDate(){for (int i = 0; i < 15; i++) {list.add("data" + "   " + i);}}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.//getMenuInflater().inflate(R.menu.activity_list, menu);menu.add(0,1,1,"Select All");  menu.add(0,2,2,"Select Invert");menu.add(0,3,3,"Exit");//getMenuInflater().inflate(R.menu.activity_gtd, menu);  return true;  }@Override    public boolean onMenuItemSelected(int featureId, MenuItem item) {    // TODO Auto-generated method stub    if(item.getItemId()==1) {isMultiChoose=true;mAdapter.setIsMultiChoose(isMultiChoose);mListView.setAdapter(mAdapter);for (int i = 0; i < list.size(); i++) {  mAdapter.getIsSelected().put(i, true);  } // 數量設為list的長度  checkNum = list.size();  // 重新整理listview和TextView的顯示  dataChanged();  }if(item.getItemId()==2) {for (int i = 0; i < list.size(); i++) {                  if (mAdapter.getIsSelected().get(i)) {                      mAdapter.getIsSelected().put(i, false);                      checkNum--;                  } else {                      mAdapter.getIsSelected().put(i, true);                      checkNum++;                  }              }  // 重新整理listview和TextView的顯示  dataChanged();  }if(item.getItemId()==3) finish();    return super.onMenuItemSelected(featureId, item);    }    @Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {// TODO Auto-generated method stubif (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {// do something on back.if(isMultiChoose){isMultiChoose=false;mAdapter.setIsMultiChoose(isMultiChoose);mListView.setAdapter(mAdapter);// 遍曆list的長度，將已選的按鈕設為未選  for (int i = 0; i < list.size(); i++) {  if (mAdapter.getIsSelected().get(i)) {  mAdapter.getIsSelected().put(i, false);  checkNum--;// 數量減1  }  }  // 重新整理listview和TextView的顯示  dataChanged();}return true;}return super.onKeyDown(keyCode, event);}// 重新整理listview和TextView的顯示  private void dataChanged() {  // 通知listView重新整理  mAdapter.notifyDataSetChanged();   }}

參考： android UI進階之實現listview中checkbox的多選與記錄-http://blog.csdn.net/notice520/article/details/7266896