自定义类似RadioButton的单选、多选的ListView

很多时候我们在做选择框的时候会想到RadioButton，但是RadioButton只是一个Button，很难添加丰富的内容，比如添加图片，文件及说明等。这个时候我们可以通过自定义ListView来实现类似的效果。当然，这也就是在ListView控件中实现点击选择或取消的效果。

我们先在layout中放上2个button和一个listview，分别用来单选、多选和自定义的listview。

<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity" >

<Button
android:id="@+id/btn_select_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="单选"
android:textSize="16sp" />

<Button
android:id="@+id/btn_select_multi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="多选"
android:textSize="16sp" />

<ListView
android:id="@+id/listview_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="5dip"
android:cacheColorHint="@android:color/transparent" />

</LinearLayout>

ListView的单个item的布局我们放2个imageview和2个textview：

<?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="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="5dip" >

<ImageView
android:id="@+id/iv_icon"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="2" />

<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_weight="5"
android:orientation="vertical" >

<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textSize="16sp" />

<TextView
android:id="@+id/tv_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textSize="12sp" />
</LinearLayout>

<ImageView
android:id="@+id/iv_select"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" />

</LinearLayout>

布局写好了，我们在Java这边监听这几个控件，并且将listview的内容通过方法getListData()来获取，而listview的单选多选我们通过一个全局的boolean变量来控制,代码都很简单，也就没什么注释：

public class MainActivity extends Activity
{
private ListView mListView;
private ListViewAdapter mListViewAdapter;		//自定义的Adapter

private Button btn_Select_One;
private Button btn_Select_Multi;

public static boolean isSelectOne = true;	//用来控制是否单选、多选

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

mListView = (ListView)findViewById(R.id.listview_main);
mListViewAdapter = new ListViewAdapter(MainActivity.this, getListData());
mListView.setAdapter(mListViewAdapter);
mListView.setOnItemClickListener(itemClickListener);

btn_Select_One = (Button)findViewById(R.id.btn_select_one);
btn_Select_One.setOnClickListener(clickListener);
btn_Select_Multi = (Button)findViewById(R.id.btn_select_multi);
btn_Select_Multi.setOnClickListener(clickListener);
}

private OnClickListener clickListener = new OnClickListener()
{

@Override
public void onClick(View v)
{
// TODO Auto-generated method stub
switch (v.getId())
{
case R.id.btn_select_one:
isSelectOne = true;
Toast.makeText(MainActivity.this, "单选", Toast.LENGTH_SHORT).show();
break;
case R.id.btn_select_multi:
isSelectOne = false;
Toast.makeText(MainActivity.this, "多选", Toast.LENGTH_SHORT).show();
break;
}
}
};

private OnItemClickListener itemClickListener = new OnItemClickListener()
{

@Override
public void onItemClick(AdapterView<?> arg0, View v, int position, long arg3)
{
// TODO Auto-generated method stub
mListViewAdapter.setSelectItem(position);
}
};

private List<Map<String, Object>> getListData()
{
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

Map<String, Object> item = new HashMap<String, Object>();
item.put("icon", R.drawable.pay_alipay);
item.put("title", "支付宝");
item.put("content", "推荐支付宝用户使用");
item.put("select", R.drawable.pay_select);
list.add(item);

item = new HashMap<String, Object>();
item.put("icon", R.drawable.pay_alipay);
item.put("title", "支付宝");
item.put("content", "推荐支付宝用户使用");
item.put("select", R.drawable.pay_select);
list.add(item);

item = new HashMap<String, Object>();
item.put("icon", R.drawable.pay_alipay);
item.put("title", "支付宝");
item.put("content", "推荐支付宝用户使用");
item.put("select", R.drawable.pay_select);
list.add(item);

item = new HashMap<String, Object>();
item.put("icon", R.drawable.pay_alipay);
item.put("title", "支付宝");
item.put("content", "推荐支付宝用户使用");
item.put("select", R.drawable.pay_select);
list.add(item);

item = new HashMap<String, Object>();
item.put("icon", R.drawable.pay_alipay);
item.put("title", "支付宝");
item.put("content", "推荐支付宝用户使用");
item.put("select", R.drawable.pay_select);
list.add(item);

return list;
}

}

实现单选、多选的地方在自定义的Adapter中，单选的话，我们定义一个整型变量selectItem，在点击listview的item的时候，将item的位置赋值给selectItem，然后再adapter的getview方法中判断position与selectItem是否相等，相等为已选择的，对其做处理，如改背景色，这里将选择的图片设为可见；

若是多选，则定义了一个HashMap来存储已经被点击的item位置和是否选择键值对，点击item时，若map中无此item或此item值为false，将其置为true，表示被选择，反之，置为false，表示取消选择。

/**
* 自定义可单选、多选的ListView Adapter
* @author Tony
*/
@SuppressLint("UseSparseArrays")
public class ListViewAdapter extends BaseAdapter
{
private List<Map<String, Object>> mList;
private HashMap<Integer, Boolean> mMap = new HashMap<Integer, Boolean>();
protected LayoutInflater mInflater;
private int selectItem = -1;

public ListViewAdapter(Context context, List<Map<String, Object>> list)
{
// TODO Auto-generated constructor stub
this.mList = list;
mInflater = LayoutInfla
4000
ter.from(context);
}

@Override
public int getCount()
{
// TODO Auto-generated method stub
return mList.size();
}

@Override
public Object getItem(int location)
{
// TODO Auto-generated method stub
return mList.get(location);
}

@Override
public long getItemId(int position)
{
// TODO Auto-generated method stub
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent)
{
// TODO Auto-generated method stub
ViewHolder mViewHolder;

if (convertView == null)
{
convertView = mInflater.inflate(R.layout.list_item, null);
mViewHolder = new ViewHolder();
mViewHolder.iv_Icon = (ImageView) convertView.findViewById(R.id.iv_icon);
mViewHolder.tv_Title = (TextView) convertView.findViewById(R.id.tv_title);
mViewHolder.tv_Content = (TextView) convertView.findViewById(R.id.tv_content);
mViewHolder.iv_Select = (ImageView) convertView.findViewById(R.id.iv_select);

convertView.setTag(mViewHolder);
} else
{
mViewHolder = (ViewHolder) convertView.getTag();
}

mViewHolder.iv_Icon.setImageResource(Integer.parseInt(mList.get(position).get("icon").toString()));
mViewHolder.tv_Title.setText(mList.get(position).get("title").toString());
mViewHolder.tv_Content.setText(mList.get(position).get("content").toString());
mViewHolder.iv_Select.setImageResource(Integer.parseInt(mList.get(position).get("select").toString()));

if (MainActivity.isSelectOne)
{
if (selectItem == position)
{
mViewHolder.iv_Select.setVisibility(View.VISIBLE);
} else
{
mViewHolder.iv_Select.setVisibility(View.INVISIBLE);
}
} else
{
if (mMap.containsKey(position) && mMap.get(position))
{
mViewHolder.iv_Select.setVisibility(View.VISIBLE);
} else
{
mViewHolder.iv_Select.setVisibility(View.INVISIBLE);
}
}

return convertView;
}

/**
* 将被点击的item的位置传值过来，如果是单选，则直接赋值为selectItem；
* 若为多选，则判断map中是否已有此item，且其值为true，则代表已经被点击，
* 若再点击，则变为false，反之（若无此item或其值为false），变为true。
* @param item
*/
public void setSelectItem(int item)
{
if (MainActivity.isSelectOne)
{
this.selectItem = item;
} else
{
if (mMap.containsKey(item) && mMap.get(item))
{
mMap.put(item, false);
} else
{
mMap.put(item, true);
}
}
notifyDataSetChanged();
}

public class ViewHolder
{
public ImageView iv_Icon;
public TextView tv_Title;
public TextView tv_Content;
public ImageView iv_Select;
}
}

完整工程下载：点击打开链接