输入控件是应用程序用户接口的一类交互式组件。Android系统提供了大量可供大家在UI中使用的输入控件,比如按钮、文本编辑空间、复选框、单选框以及各种对话框等。
基本输入控件
下面我们通过一个个人设置页面的例子讲解输入控件的基本用法。
先看界面效果,如图10-6所示。
▲图10-6 控件示例界面
主界面main.xml
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:orientation="vertical"
7. android:background="#ffe8e8e8">
8. <LinearLayout
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content">
11. <TextView
12. android:id="@+id/textView1"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:text="头像:"
16. android:layout_gravity="center"
17. android:textColor="#000000"/>
18. <ImageView
19. android:id="@+id/ImageView1"
20. android:layout_width="100dp"
21. android:layout_height="100dp"
22. android:src="@drawable/sample" />
23. </LinearLayout>
24. <LinearLayout
25. android:layout_width="fill_parent"
26. android:layout_height="wrap_content">
27. <TextView
28. android:layout_width="wrap_content"
29. android:layout_height="wrap_content"
30. android:textColor="#000000"
31. android:text="姓名:" />
32. <EditText
33. android:id="@+id/editText1"
34. android:layout_width="wrap_content"
35. android:layout_height="wrap_content"
36. android:layout_weight="1" >
37. <requestFocus />
38. </EditText>
39. </LinearLayout>
40. <LinearLayout
41. android:layout_width="fill_parent"
42. android:layout_height="wrap_content">
43. <TextView
44. android:layout_width="wrap_content"
45. android:layout_height="wrap_content"
46. android:text="性别: "
47. android:textColor="#000000"
48. android:layout_gravity="center"/>
49. <RadioGroup
50. android:id="@+id/RadioGroup1"
51. android:layout_width="wrap_content"
52. android:layout_height="wrap_content"
53. android:orientation="horizontal">
54. <RadioButton
55. android:id="@+id/RadioButton1"
56. android:layout_width="wrap_content"
57. android:layout_height="wrap_content"
58. android:textColor="#000000"
59. android:text="男 "
60. android:checked="true"/>
61. <RadioButton
62. android:id="@+id/RadioButton2"
63. android:layout_width="wrap_content"
64. android:layout_height="wrap_content"
65. android:textColor="#000000"
66. android:text="女"/>
67. </RadioGroup>
68. </LinearLayout>
69. <LinearLayout
70. android:layout_width="fill_parent"
71. android:layout_height="wrap_content">
72. <TextView
73. android:layout_width="wrap_content"
74. android:layout_height="wrap_content"
75. android:text="爱好: "
76. android:textColor="#000000"
77. android:layout_gravity="center"/>
78. <CheckBox android:id="@+id/checkbox1"
79. android:layout_width="wrap_content"
80. android:layout_height="wrap_content"
81. android:textColor="#000000"
82. android:text="唱歌" />
83. <CheckBox android:id="@+id/checkbox2"
84. android:layout_width="wrap_content"
85. android:layout_height="wrap_content"
86. android:textColor="#000000"
87. android:text="跳舞" />
88. </LinearLayout>
89. <LinearLayout
90. android:layout_width="fill_parent"
91. android:layout_height="wrap_content">
92. <TextView
93. android:layout_width="wrap_content"
94. android:layout_height="wrap_content"
95. android:text="婚姻: "
96. android:textColor="#000000"
97. android:layout_gravity="center"/>
98. <ToggleButton android:id="@+id/ToggleButton1"
99. android:textOn="已婚"
100. android:textOff="未婚"
101. android:layout_width="wrap_content"
102. android:layout_height="wrap_content"/>
103. </LinearLayout>
104. <LinearLayout
105. android:layout_width="fill_parent"
106. android:layout_height="wrap_content">
107. <TextView
108. android:layout_width="wrap_content"
109. android:layout_height="wrap_content"
110. android:layout_gravity="center"
111. android:text="生日: "
112. android:textColor="#000000" />
113. <DatePicker android:id="@+id/datePicker"
114. android:layout_width="wrap_content"
115. android:layout_height="wrap_content"
116. android:layout_gravity="center_horizontal"/>
117. </LinearLayout>
118. <LinearLayout
119. android:layout_width="fill_parent"
120. android:layout_height="wrap_content">
121. <TextView
122. android:layout_width="wrap_content"
123. android:layout_height="wrap_content"
124. android:text="来自: "
125. android:textColor="#000000" />
126. <Spinner
127. android:id="@+id/Spinner1"
128. android:text="国内 "
129. android:layout_width="wrap_content"
130. android:layout_height="wrap_content"
131. />
132. </LinearLayout>
133. <Button android:id="@+id/button1"
134. android:layout_height="wrap_content"
135. android:layout_width="fill_parent"
136. android:text="普通按钮"/>
137. </LinearLayout>
主界面布局我们整体上采用纵向的线性布局,内嵌套横向线性布局。
我们用TextView来做文本展示,通过android:text=””属性设置我们要展示的文本内容,其中android:textColor属性设置了字体颜色。
第18~22行是一个ImageView用于显示图像,在这里我们指定了图像的显示大小为100dp,通过android:src属性设置了要显示的图片。当然我们也可以在Java代码里设置要显示的图片。
第32~38行的EditText控件常作为文字输入框,设置<requestFocus />属性获得输入焦点。我们也能通过设置android:inputType属性来限定输入类型为数字、电话号码、密码、IP地址等类型。
第49~67行声明在RadioGroup标签内的2个RadioButton单选按钮组合成一个单选框。其作为一个整体由RadioGroup设置监听器。其中的android:checked属性用于设置默认值。
第78~87行是2个CheckBox组成的多选框,与单选框必须组合不同,CheckBox能独立放置,独立设置监听器。
第98~103行ToggleButton是开关形式的按钮,通过android:textOn属性设置选中状态的文字,通过android:textOff属性设置未选中状态的文字。在功能上它和CheckBox很类似。
第113~116行的DatePicker是日期选择控件,可以进行挑选年、月、日,也可以软键盘输入指定的年月日。
第126~131行的Spinner控件是一个列表选择框,单击后弹出选择列表,允许用户从一组数据中选择一个值。控件内的具体内容在代码里通过设置适配器来完成。
第133~136行是个普通Button按钮,我们可以在代码里设置按钮的监听事件来完成相应操作。
下面是本例的Java代码部分。
TestActivity.java
1. public class TestActivity extends Activity {
2. private ImageView ImageView1;
3. private EditText editText1;
4. private Spinner spinner1;
5. private RadioGroup RadioGroup1;
6. private CheckBox checkbox1,checkbox2;
7. private ToggleButton ToggleButton1;
8. private ArrayAdapter<String> adapter;
9. private DatePicker datePicker;
10. private Button button1;
11. @Override
12. public void onCreate(Bundle savedInstanceState) {
13. super.onCreate(savedInstanceState);
14. setContentView(R.layout.test);
15. findwidget();}
16. void findwidget()
17. {
18. ImageView1=(ImageView)findViewById(R.id.ImageView1);
19. ImageView1.setImageResource(R.drawable.sample);
20. editText1=(EditText)findViewById(R.id.editText1);
21. editText1.addTextChangedListener(new TextWatcher() {
22. @Override
23. public void afterTextChanged(Editable arg0) {
24. // TODO Auto-generated method stub
25. }
26. @Override
27. public void beforeTextChanged(CharSequence s, int start, int count,int after) {
a) // TODO Auto-generated method stub
28. }
29. @Override
30. public void onTextChanged(CharSequence s, int start, int before,int count) {
31. // TODO Auto-generated method stub
32. }});
33. RadioGroup1=(RadioGroup)findViewById(R.id.RadioGroup1);
34. RadioGroup1.setOnCheckedChangeListener(new
RadioGroup.OnCheckedChangeListener()
35. {@Override
36. public void onCheckedChanged(RadioGroup arg0, int checkedId)
37. {
38. switch(checkedId)
39. {
40. case R.id.RadioButton1:
41. Log.d("TestActivity","select RadioButton1");
42. break;
43. case R.id.RadioButton2:
44. Log.d("TestActivity","select RadioButton2");
45. break;
46. default:
47. break;
48. }}});
49. checkbox1=(CheckBox)findViewById(R.id.checkbox1);
50. checkbox2=(CheckBox)findViewById(R.id.checkbox2);
51. OnCheckedChangeListener listener = new
CompoundButton.OnCheckedChangeListener()
52. {
53. @Override
54. public void onCheckedChanged(CompoundButton buttonView, boolean
isChecked) {
55. switch(buttonView.getId()){
56. case R.id.checkbox1: //action
57. Log.d("TestActivity","checkbox1:"+isChecked+"="+buttonView.getText());
58. break;
59. case R.id.checkbox2: //action
60. Log.d("TestActivity","checkbox2:"+isChecked+"="+buttonView.getText());
61. break;
62. case R.id.ToggleButton1: //action
63. Log.d("TestActivity","ToggleButton1:"+isChecked+"="+buttonView.getText());
64. break;
65. } } } ;
66. checkbox1.setOnCheckedChangeListener(lisdtener);
67. checkbox2.setOnCheckedChangeListener(listener);
68. ToggleButton1=(ToggleButton)findViewById(R.id.ToggleButton1);
69. ToggleButton1.setOnCheckedChangeListener(listener);
70. datePicker=(DatePicker)findViewById(R.id.datePicker);
71. datePicker.init(2012, 9, 8, new DatePicker.OnDateChangedListener(){
72. public void onDateChanged(DatePicker view, int year,int monthOfYear, int
dayOfMonth) {
73. Log.d("TestActivity","datePicker您选择的日期是:"+year+"年"+(monthOfYear+1)+"月"+
dayOfMonth+"日。");
74. }});
75. final String[] from={"中国","美国","俄罗斯","加拿大"};
76. spinner1=(Spinner)findViewById(R.id.Spinner1);
77. adapter = new
ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, from);
78. adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
79. spinner1.setAdapter(adapter);
80. spinner1.setOnItemSelectedListener(new
Spinner.OnItemSelectedListener(){
81. @Override
82. public void onItemSelected(AdapterView<?> arg0, View arg1,
int arg2,long arg3)
83. {
84. Log.d("TestActivity","我单击的是spinner1:"+from[arg2]);
85. }
86. @Override
87. public void onNothingSelected(AdapterView<?> arg0) {
88. }} );
89. button1=(Button)findViewById(R.id.button1);
90. button1.setOnClickListener(new View.OnClickListener() {
91. @Override
92. public void onClick(View v) {
93. Log.d("TestActivity:","我单击的是:button");
94. }});}
95. }
第2~10行是控件对象定义部分,定义了main布局文件里用到的控件。
第12~15行在onCreate函数里我们把main布局设置为程序的view,然后在findwidget函数里绑定控件和设置监听器。
第18~19行是ImageView控件的代码,通过setImageResource方法可以把drawable里的图片资源设置到图片上。
第20~32行是EditText控件,通过addTextChangedListener设置了TextWatcher监听器。这个监听器在用户输入、删除和修改EditText内容时被回调。通过beforeTextChanged函数可以获得修改前的内容,通过onTextChanged函数能知道哪些地方被改动了,而afterTextChanged函数能获得修改后的内容。通过这几个回调函数能在用户输入时做一些判断、提醒、限制的工作。
第33~48行是RadioGroup和RadioButton组成的单选框。在代码里只需要获取到RadioGroup对象并通过setOnCheckedChangeListener设置RadioGroup.OnCheckedChangeListener监听器。当用户单击单选项时系统就会回调设置的监听器代码,在监听器的onCheckedChanged方法里通过checkedId就能知道是哪个RadioButton触发了单击事件,并作相应的处理。
第49~50行是两个多选控件checkbox1和checkbox2对象。
第51~65行定义了CheckBox的Checked状态改变监听对象OnCheckedChangeListener listener。在这个对象里实现了系统回调函数onCheckedChanged。onCheckedChanged被回调时会通过buttonView指示哪个控件的状态改变了,改变的值是isChecked。在这里给checkbox 1、checkbox 2和ToggleButton 1都设置了listener监听器对象,然后通过buttonView.getId()函数来判断是哪个控件状态改变。
第66~67行给checkbox 1和checkbox 2设置了监听器listener。
第68~69行是ToggleButton控件,也用了监听器listener,其功能上和CheckBox类似。
第70~74行是日期选择DatePicker控件,datePicker.init函数用来初始化控件的年月日,并设置日期改变监听器DatePicker.OnDateChangedListener()。当用户改变日期时系统就会回调监听器里的onDateChanged函数,通过这个函数我们知道了修改后的年月日数据。注意:monthOfYear是从0开始计数的,即0代表一月。
第75~79行是Spinner列表选择器并设置了adapter适配器。字符串数组from里是列表的内容源,通过数组适配器adapter将内容源与其连接,通过设置adapter.setDropDownViewResource给列表设置simple_spinner_dropdown_item显示风格。单击Spinner后的效果图如图10-7所示。
▲图10-7 Spinner弹出选择框示例
第80~88行通过setOnItemSelectedListener设置了Spinner的选择监听器Spinner.OnItemSelected
Listener(),当用户选择列表项时系统回调监听器里的onItemSelected函数,我们通过arg2参数获知第几列被选中。
第89~94行是普通的button按钮,通过setOnClickListener设置监听器View.OnClickListener。用户单击按钮时系统回调onClick方法,执行我们的自定义代码。
下面是示例程序单击后的Logcat输出图。
▲图10-8 示例Logcat输出图示