输入控件是应用程序用户接口的一类交互式组件。Android系统提供了大量可供大家在UI中使用的输入控件,比如按钮、文本编辑空间、复选框、单选框以及各种对话框等。

基本输入控件

下面我们通过一个个人设置页面的例子讲解输入控件的基本用法。

先看界面效果,如图10-6所示。

 

Android input边框 android输入框控件_ui

▲图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所示。

 

Android input边框 android输入框控件_android_02

▲图10-7  Spinner弹出选择框示例

第80~88行通过setOnItemSelectedListener设置了Spinner的选择监听器Spinner.OnItemSelected Listener(),当用户选择列表项时系统回调监听器里的onItemSelected函数,我们通过arg2参数获知第几列被选中。

第89~94行是普通的button按钮,通过setOnClickListener设置监听器View.OnClickListener。用户单击按钮时系统回调onClick方法,执行我们的自定义代码。

下面是示例程序单击后的Logcat输出图。

 

Android input边框 android输入框控件_ui_03

▲图10-8  示例Logcat输出图示