Android入门笔记 - 界面开发 - RadioButton,CheckBox,Spinner,AutoCompleteTextView,DatePicker,TimePicker
好了，今天进入界面开发第二课，今天的内容是：
- RadioButton ：单选框
- CheckBox ：多选框
- Spinner：下拉选择框
- AutoCompleteTextView：带自动提示的输入框
- DatePicker：日期选择器
- TimePicker：时间选择器
好了，还是先贴代码，我的项目叫 demo_UI。
（1）res/layout/ 目录下的main_activity.xml
<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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RadioGroup
android:id="@+id/radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFF00FF" >
<RadioButton
android:id="@+id/radiobtn1"
android:text="单选1" />
<RadioButton
android:id="@+id/radiobtn2"
android:text="单选2" />
</RadioGroup>
<CheckBox
android:id="@+id/check1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="多选1" />
<CheckBox
android:id="@+id/check2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="多选2" />
<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<AutoCompleteTextView
android:id="@+id/autocomplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="自动提示" />
<DatePicker
android:id="@+id/datepicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TimePicker
android:id="@+id/timepicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn_datepicker_dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DatePickerDialog" />
<Button
android:id="@+id/btn_timepicker_dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TimePickerDialog" />
</LinearLayout>
</ScrollView>
</LinearLayout>
（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<String> adapter;
String[] data = new String[] { "O型血", "A型血", "B型血", "C型血" };
adapter = new ArrayAdapter<String>(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<String> auto_adapter = new ArrayAdapter<String>(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
android:id="@+id/radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFF00FF" >
<RadioButton
android:id="@+id/radiobtn1"
android:text="单选1" />
<RadioButton
android:id="@+id/radiobtn2"
android:text="单选2" />
</RadioGroup>以上是单选框的配置文件，其中单选框需要有一个 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 也很好理解，当改变选中按钮的时候触发。
复选框：
配置：
<CheckBox
android:id="@+id/check1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="多选1" />
<CheckBox
android:id="@+id/check2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="多选2" />定义：
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);
}
});这里和单选框不一样哦，添加事件的对象是每一个多选框。
下拉选择框：
配置：
<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
定义：
private Spinner spin<pre name="code" class="java"> ArrayAdapter<String> adapter;
String[] data = new String[] { "O型血", "A型血", "B型血", "C型血" };
adapter = new ArrayAdapter<String>(mCtx, R.layout.li,
R.id.spiner_item_tv, data);
spin.setAdapter(adapter);
这里够着下拉选择框的时候我们看到了一个新东西 ArrayAdapter，这是一个简单的数组适配器，来看看它的构造：
adapter = new ArrayAdapter<String>(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文件：
<?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="horizontal" >
<TextView
android:id="@+id/spiner_item_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
/>
</LinearLayout>适配器是用来填充数据，意在通过配置适配器提高重用性。android中还有很多适配器：SimpleAdapter, BaseAdapter 等，后面我们来做讲解。
添加监听事件：
<pre name="code" class="java"> 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) {
}
});
看名字就知道 当某个选项被选择时触发。
日期选择器：
配置：
<DatePicker
android:id="@+id/datepicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />定义：
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);
}
};当日期选择改变的时候触发。
其他的实例这里就不做讲解了，我相信大家都能看懂。这些简单的控件知道会用就可以了，今天就到这里。