天天看點

ListView 的單選模式

    《RadioButton與ListView的混合使用》一文中,我在擴充卡中用标記的方法實作了使用者選擇的操作,這次用ListView的單選模式來實作一下。ListView的預設狀态下是沒有選擇行為的,把ListView的choiceMode設定為singleChoice,清單就可以實作單選(當然它也有多選模式,這個後面再研究)。

    Activity的布局檔案如下,ListView選擇了單選模式,這次我把ListView上方的TextView換成了Button:

<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" >

    <Button
        android:id="@+id/select"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/select_authors"
        android:textSize="25sp" />

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice" />

</LinearLayout>      

    ItemList的XML檔案,RadioButton換成了CheckBox,另外, CheckBox 是可以擷取焦點的UI控件,為實作ListView的點選,需要設定

“  android:clickable="false"

    android:focusable="false"

    android:focusableInTouchMode="false"”

這三項,其中,CheckBox的背景選用了自己做的一張圖檔,圖檔是RadioButton的樣子:

<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="wrap_content"
    android:orientation="horizontal"
    android:background="#fff" >

    <TextView
        android:id="@+id/author"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:padding="10dp"
        android:textSize="20sp" />

    <CheckBox
        android:id="@+id/radio"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="10dp"
        android:background="@drawable/radio_button_normal"
        android:button="@null"
        android:clickable="false"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:padding="10dp" />

</RelativeLayout>      

    Activity的代碼如下,點選ListView的Item或者其上方的Button,都可以彈出Toast:

package com.example.choicelistviewtest;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

public class RadioButtonListActivity extends Activity {

	private ListView radioButtonList;
	private RadioAdapter adapter;
	// 模拟幾個資料,作為List的條目
	private String[] authors = { "芥川龍之介", "三島由紀夫", "川端康成", "村上春樹", "東野圭吾",
			"張愛玲", "金庸", "錢鐘書", "老舍", "梁實秋", "亨利米勒", "海明威", "菲茲傑拉德", "凱魯亞克",
			"傑克倫敦", "小仲馬", "杜拉斯", "福樓拜", "雨果", "巴爾紮克", "莎士比亞", "勞倫斯", "毛姆",
			"柯南道爾", "笛福" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_choice_list_view_test);
		radioButtonList = (ListView) findViewById(R.id.list);
		adapter = new RadioAdapter(this, authors);
		radioButtonList.setAdapter(adapter);
		radioButtonList.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
					long arg3) {

				Toast.makeText(RadioButtonListActivity.this,
						"您選擇的作家是:" + authors[arg2], Toast.LENGTH_SHORT).show();
			}
		});

		findViewById(R.id.select).setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				int select = radioButtonList.getCheckedItemPosition();
				// INVALID_POSITION 代表無效的位置。有效值的範圍是 0 到目前擴充卡項目數減 1 。
				if (ListView.INVALID_POSITION != select) {
					Toast.makeText(RadioButtonListActivity.this,
							"您選擇的作家是:" + authors[select], Toast.LENGTH_SHORT)
							.show();
				} else {
					// 如果使用者開始沒有選擇
					Toast.makeText(RadioButtonListActivity.this, "請選擇一位作家!",
							Toast.LENGTH_SHORT).show();
				}
			}
		});
	}
}      

    擴充卡:

package com.example.choicelistviewtest;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

public class RadioAdapter extends BaseAdapter {

	private String[] authors;
	private Context c;

	public RadioAdapter(Context c, String[] authors) {
		super();
		this.c = c;
		this.authors = authors;
	}

	@Override
	public int getCount() {
		return authors.length;
	}

	@Override
	public Object getItem(int arg0) {
		return null;
	}

	@Override
	public long getItemId(int arg0) {
		return 0;
	}

	@Override
	public View getView(int arg0, View arg1, ViewGroup arg2) {

		ChoiceListItemView choiceListItemView = new ChoiceListItemView(c, null);
		choiceListItemView.setName(authors[arg0]);
		return choiceListItemView;
	}

}      

    ListView是通過實作Checkable接口來處理單選模式的,這要求Item的視圖實作Checkable接口,建立ChoiceListItemView類來實作該接口,ListView選中某個Item時,會調用ChoiceListItemView類的setChecked的方法:

package com.example.choicelistviewtest;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.CheckBox;
import android.widget.Checkable;
import android.widget.LinearLayout;
import android.widget.TextView;

public class ChoiceListItemView extends LinearLayout implements Checkable {

	private TextView nameTxt;
	private CheckBox selectBtn;
	public ChoiceListItemView(Context context, AttributeSet attrs) {
		super(context, attrs);

		LayoutInflater inflater = LayoutInflater.from(context);
		View v = inflater.inflate(R.layout.item_list, this, true);
		nameTxt = (TextView) v.findViewById(R.id.author);
		selectBtn = (CheckBox) v.findViewById(R.id.radio);
	}

	public void setName(String text) {
		nameTxt.setText(text);
	}

	@Override
	public boolean isChecked() {
		return selectBtn.isChecked();
	}

	@Override
	public void setChecked(boolean checked) {
		selectBtn.setChecked(checked);
		//根據是否選中來選擇不同的背景圖檔
		if (checked) {
			selectBtn.setBackgroundResource(R.drawable.radio_button_checked);
		} else {
			selectBtn.setBackgroundResource(R.drawable.radio_button_normal);
		}
	}

	@Override
	public void toggle() {
		selectBtn.toggle();
	}

}      

    效果圖:

繼續閱讀