Android入门笔记 - 界面开发 - RadioButton,CheckBox,Spinner,AutoCompleteTextView,DatePicker,TimePicker

好了，今天进入界面开发第二课，今天的内容是：

• RadioButton ：单选框
  
• CheckBox ：多选框
  
• Spinner：下拉选择框
• AutoCompleteTextView：带自动提示的输入框
• DatePicker：日期选择器
• TimePicker：时间选择器

好了，还是先贴代码，我的项目叫 demo_UI。

（1）res/layout/ 目录下的main_activity.xml

（2）src/ 目录下的MainActivity.java 文件：

package com.example.demo_ui;

import java.util.Calendar;

import android.os.Bundle;
import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.DatePickerDialog.OnDateSetListener;
import android.app.TimePickerDialog;
import android.app.TimePickerDialog.OnTimeSetListener;
import android.content.Context;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.DatePicker;
import android.widget.DatePicker.OnDateChangedListener;
import android.widget.TimePicker.OnTimeChangedListener;
import android.widget.MultiAutoCompleteTextView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.TimePicker;
import android.widget.Toast;

public class MainActivity extends Activity {
	private Context mCtx;
	private RadioGroup rg;
	private RadioButton rb1;
	private RadioButton rb2;
	private CheckBox ck1;
	private CheckBox ck2;
	private Spinner spin;
	private AutoCompleteTextView auto;
	private DatePicker mDatePicker;
	private Calendar mCalendar;
	private TimePicker mTimePicker;
	private Button mDatePickerDialog;
	private Button mTimePickerDialog;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mCtx = this;
		
		rg = (RadioGroup) findViewById(R.id.radiogroup);
		rb1 = (RadioButton) findViewById(R.id.radiobtn1);
		rb2 = (RadioButton) findViewById(R.id.radiobtn2);
		ck1 = (CheckBox) findViewById(R.id.check1);
		ck2 = (CheckBox) findViewById(R.id.check2);
		spin = (Spinner) findViewById(R.id.spinner);
		auto = (AutoCompleteTextView) findViewById(R.id.autocomplete);
		// 单选框
		rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				if (checkedId == rb1.getId()) {
					showToast("one");
				} else if (checkedId == rb2.getId()) {
					showToast("two");
				}
			}
		});

		// 多选框
		ck1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(CompoundButton buttonView,
					boolean isChecked) {
				showToast("多选1" + isChecked);
			}
		});
		ck2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(CompoundButton buttonView,
					boolean isChecked) {
				showToast("多选2" + isChecked);
			}
		});

		// 下拉选择框
		ArrayAdapter adapter;
		String[] data = new String[] { "O型血", "A型血", "B型血", "C型血" };
		adapter = new ArrayAdapter(mCtx, R.layout.li,
				R.id.spiner_item_tv, data);
		spin.setAdapter(adapter);
		spin.setOnItemSelectedListener(new OnItemSelectedListener() {
			@Override
			public void onItemSelected(AdapterView arg0, View arg1,
					int arg2, long arg3) {
				arg0.setVisibility(View.VISIBLE);
			}

			@Override
			public void onNothingSelected(AdapterView arg0) {
			}
		});

		// 自动提示输入框
		String[] autoString = new String[] { "abc", "bcd", "abcd" };
		ArrayAdapter auto_adapter = new ArrayAdapter(mCtx,
				R.layout.simple_down_line, R.id.auto_item_tv, autoString);
		auto.setAdapter(auto_adapter);
		auto.setThreshold(1);
		
		// 日期选择
		mDatePicker = (DatePicker) findViewById(R.id.datepicker);
		mCalendar = Calendar.getInstance();
		mDatePicker.init(mCalendar.get(mCalendar.YEAR),
		mCalendar.get(mCalendar.MONTH),
		mCalendar.get(mCalendar.DAY_OF_MONTH), dateChange);

		// 时间选择
		mTimePicker = (TimePicker) findViewById(R.id.timepicker);
		mTimePicker.setCurrentHour(mCalendar.get(Calendar.HOUR_OF_DAY));
		mTimePicker.setCurrentMinute(mCalendar.get(Calendar.MINUTE));
		mTimePicker.setOnTimeChangedListener(timeChange);
		mTimePicker.setIs24HourView(true);
		
		 //日期选择对话框
		mDatePickerDialog = (Button) findViewById(R.id.btn_datepicker_dialog);
		mDatePickerDialog.setOnClickListener(new View.OnClickListener() {
			
		@Override
			 public void onClick(View v) {
				new DatePickerDialog(mCtx, dateset, 
						mCalendar.get(Calendar.YEAR), 
						mCalendar.get(Calendar.MONTH), 
						mCalendar.get(Calendar.DAY_OF_MONTH)).show();
			 }
		});
		
		 //时间选择对话框
 		mTimePickerDialog = (Button) findViewById(R.id.btn_timepicker_dialog);
		mTimePickerDialog.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				new TimePickerDialog(mCtx, timeset ,
						mCalendar.get(Calendar.HOUR_OF_DAY), 
						 mCalendar.get(Calendar.MINUTE), 
						true).show();
 			}
		});
		
	
 	}
	
	private OnDateSetListener dateset = new OnDateSetListener() {
		@Override
		public void onDateSet(DatePicker view, int year, int monthOfYear,
				int dayOfMonth) {
			showToast("year:"+year+"month:"+monthOfYear+"day:"+dayOfMonth);
		 }
	};
	
 	private OnTimeSetListener timeset = new OnTimeSetListener() {
		@Override
		public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
			showToast("hour:"+hourOfDay+"minute:"+minute);
		}
	};

	private OnTimeChangedListener timeChange = new OnTimeChangedListener() {
		@Override
 		public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
			showToast("hour:" + hourOfDay + "minute:" + minute);
		}
	};

	private OnDateChangedListener dateChange = new OnDateChangedListener() {

		@Override
		public void onDateChanged(DatePicker view, int year, int monthOfYear,
				int dayOfMonth) {
			 showToast("year:" + year + "month:" + monthOfYear + "day:"
					+ dayOfMonth);
		}
	};

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

 	private void showToast(String s) {
		Toast.makeText(mCtx, s, Toast.LENGTH_SHORT).show();
	}

}

好了开始讲解：

单选框：

配置：

以上是单选框的配置文件，其中单选框需要有一个 RadioGroup 包含要单选的 RadioButton ，确保Group中选中的Button只有一个。MainActivity 中怎么使用呢?

定义：

	private RadioGroup rg;
	private RadioButton rb1;
	private RadioButton rb2;

找到资源：

	rg = (RadioGroup) findViewById(R.id.radiogroup);
	rb1 = (RadioButton) findViewById(R.id.radiobtn1);
	rb2 = (RadioButton) findViewById(R.id.radiobtn2);

添加监听事件：

	rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) {
			if (checkedId == rb1.getId()) {
				showToast("one");
			} else if (checkedId == rb2.getId()) {
				showToast("two");
			}
		}
	});

简单吧！这里要注意的是添加监听事件是对 Group添加， OnCheckedChangedListener 也很好理解，当改变选中按钮的时候触发。

复选框：

配置：

定义：

	private CheckBox ck1;
	private CheckBox ck2;

	ck1 = (CheckBox) findViewById(R.id.check1);
	ck2 = (CheckBox) findViewById(R.id.check2);

添加监听事件：

	ck1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
		@Override
		public void onCheckedChanged(CompoundButton buttonView,
				boolean isChecked) {
			showToast("多选1" + isChecked);
		}
	});
	ck2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
		@Override
		public void onCheckedChanged(CompoundButton buttonView,
				boolean isChecked) {
			showToast("多选2" + isChecked);
		}
	});

这里和单选框不一样哦，添加事件的对象是每一个多选框。

下拉选择框：

配置：

定义：

        private Spinner spin
	ArrayAdapter adapter;
	String[] data = new String[] { "O型血", "A型血", "B型血", "C型血" };
	adapter = new ArrayAdapter(mCtx, R.layout.li,
			R.id.spiner_item_tv, data);
	spin.setAdapter(adapter);
 
  
 
  
 
  
这里够着下拉选择框的时候我们看到了一个新东西 ArrayAdapter，这是一个简单的数组适配器，来看看它的构造：
 
  
 
  
adapter = new ArrayAdapter(mCtx, R.layout.li,
		R.id.spiner_item_tv, data);
mCtx是上下文对象， R.layout.li 这是一个 layout/ 文件目录下的xml文件：layout/li.xml， R.id.spiner_item_tv 是里面TextView的id， data是我们要显示的数据。来看看layout/li.xml文件： 
  
 
  



    

适配器是用来填充数据，意在通过配置适配器提高重用性。android中还有很多适配器：SimpleAdapter, BaseAdapter 等，后面我们来做讲解。 
  
 
  
 
  
添加监听事件：
 
  
 
  
	spin.setOnItemSelectedListener(new OnItemSelectedListener() {
		@Override
		public void onItemSelected(AdapterView arg0, View arg1,
				int arg2, long arg3) {
			arg0.setVisibility(View.VISIBLE);
		}
		@Override
		public void onNothingSelected(AdapterView arg0) {
		}
	});
 
  
 看名字就知道 当某个选项被选择时触发。 
  
 
  
 
  

 
  

 
  
日期选择器：
 
  
配置：
 
  
 
  
            
定义： 
  
 
  
	private DatePicker mDatePicker;
 
  
	mDatePicker = (DatePicker) findViewById(R.id.datepicker);
	Calendar mCalendar = Calendar.getInstance();
	mDatePicker.init(mCalendar.get(mCalendar.YEAR),
	mCalendar.get(mCalendar.MONTH),
	mCalendar.get(mCalendar.DAY_OF_MONTH), dateChange);
监听事件： 
  
 
  
	private OnDateChangedListener dateChange = new OnDateChangedListener() {

		@Override
		public void onDateChanged(DatePicker view, int year, int monthOfYear,
				int dayOfMonth) {
			 showToast("year:" + year + "month:" + monthOfYear + "day:"
					+ dayOfMonth);
		}
	};
当日期选择改变的时候触发。 
  

 
  
其他的实例这里就不做讲解了，我相信大家都能看懂。这些简单的控件知道会用就可以了，今天就到这里。