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{
// 填充数据的list
private 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);
}
}
@Override
public int getCount() {
return mList.size();
//return mData.size();
}
@Override
public Object getItem(int position) {
return mList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
// 获得ViewHolder对象
holder = new ViewHolder();
// 导入布局并赋值给convertview
convertView = 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 {
// 取出holder
holder = (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;
@Override
protected 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();
// 实例化自定义的MyAdapter
mAdapter = new MyListAdapter(list, this);
mListView.setAdapter(mAdapter);
mListView.setOnItemClickListener(new OnItemClickListenerImpl());
}
private class OnItemClickListenerImpl implements OnItemClickListener
{
@Override
public 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);
}
}
@Override
public 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{
// 填充数据的list
private 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);
}
}
@Override
public int getCount() {
return mList.size();
//return mData.size();
}
@Override
public Object getItem(int position) {
return mList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
// 获得ViewHolder对象
holder = new ViewHolder();
// 导入布局并赋值给convertview
convertView = 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 {
// 取出holder
holder = (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;
@Override
protected 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();
// 实例化自定义的MyAdapter
mAdapter = new MyListAdapter(list, this);
mListView.setAdapter(mAdapter);
mListView.setOnItemClickListener(new OnItemClickListenerImpl());
mListView.setOnItemLongClickListener(new OnItemLongClickListenerImpl());
isMultiChoose=false;
}
private class OnItemClickListenerImpl implements OnItemClickListener
{
@Override
public 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
{
@Override
public boolean onItemLongClick(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
// TODO Auto-generated method stub
isMultiChoose=true;
mAdapter.setIsMultiChoose(isMultiChoose);
mListView.setAdapter(mAdapter);
return false;
}
}
private void initDate()
{
for (int i = 0; i < 15; i++) {
list.add("data" + " " + i);
}
}
@Override
public 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);
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
if (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