自定义类似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 = LayoutInflater.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;
	}
}

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






  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值