Android 常用控件讲解 --控件

最新推荐文章于 2024-08-11 18:18:18 发布

海蓝树

最新推荐文章于 2024-08-11 18:18:18 发布

阅读量1k

点赞数

分类专栏： Android

Android 专栏收录该内容

92 篇文章 0 订阅

订阅专栏

Android输入控件是一种用于人机交互的元件，Android为此提供了各种各样的输入控件，例如：按钮（Button），文本域（text fields），拖动条（seek bars），复选框（checkBos），缩放按钮（zoom buttons）,开关按钮（togglebuttons）,等等。

为UI添加输入控件，只需要在对应的布局文件（XML Layout）添加对应的控件节点。如下，是一个包含编辑框和按钮的布局文件：

view source print ?

01. <?xml version="1.0" encoding="utf-8"?>

02. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03. android:layout_width="fill_parent"

04. android:layout_height="fill_parent"

05. android:orientation="horizontal">

06. <EditText android:id="@+id/edit_message"

07. android:layout_weight="1"

08. android:layout_width="0dp"

09. android:layout_height="wrap_content"

10. android:hint="@string/edit_message" />

11. <Button android:id="@+id/button_send"

12. android:layout_width="wrap_content"

13. android:layout_height="wrap_content"

14. android:text="@string/button_send"

15. android:onClick="sendMessage" />

16. </LinearLayout>

每个输⼊控件都支持⼀个特定的输⼊事件，如当用户输⼊文本或触摸⼀个按钮，这样你就可以执行一个动作（处理事件）。

常规控制元件

下表列出了在App常用的输入元件，若要了解更为详细的信息，看参阅官方文档。

控件类型	描述	相关类
Button	按钮，可以被用户按下或点击，以执行⼀个动作	Button
Text field	可编辑的文本区域，可以使用`AutoCompleteTextView创建一个带有自动完成功能的编辑文本域`	EditText,AutoCompleteTextView
Checkbox	复选框，⼀个可以由用户切换的ON/OFF开关。当提供给用户⼀组不互斥的可选项时，你应该使用复选框	CheckBox
Radio button	单选按钮，与CheckBox类型，只是一组里只能选择一个选项	RadioGroup，RadioButton
Toggle button	切换按钮，带有亮度显示的 ON/OFF 按钮	ToggleButton
Spinner	下拉列表，让用户从一系列的值中选择一个值	Spinner
Pickers	选择器，一个通过使用向上/向下按钮或手势从⼀系列值中选择⼀个值的对话框。用DatePicker输⼊日期（月，日，年）或用TimePicker输⼊时间（⼩时，分钟，上午/下午），这将被自动的格式化为用户区域的值（本地化）。	DatePicker,TimePicker

tips：除了以上输入控件，Android还有很多未列出来的控件，可以浏览android.widget包去了解更多的控件信息。如果您的应用程序需要特定的输⼊控件，你可以自定义该组件。

Buttons

在Android里，Button可以有一下三种显示（纯文本，图片，或者文本+图片）。

根据给出来的三种形式，你可以在布局文件中通过以下三种方法创建一个Button。

纯文本组成，使用Button节点

 
   1. 
   <Button 
  
   2. 
   android:layout_width="wrap_content" 
  
   3. 
   android:layout_height="wrap_content" 
  
   4. 
   android:text="@string/button_text" 
  
   5. 
   ... 
  
   6. 
   />

由图片组成，使用ImageButton 节点（需要把相应的图片添加到drawable文件夹里）

 
   1. 
   <ImageButton 
  
   2. 
   android:layout_width="wrap_content" 
  
   3. 
   android:layout_height="wrap_content" 
  
   4. 
   android:src="@drawable/button_icon" 
  
   5. 
   ... />

文本+图片，使用Button节点和android:drawableLeft属性

 
   1. 
   <Button 
  
   2. 
   android:layout_width="wrap_content" 
  
   3. 
   android:layout_height="wrap_content" 
  
   4. 
   android:text="@string/button_text" 
  
   5. 
   android:drawableLeft="@drawable/button_icon" 
  
   6. 
   ... />

tips：还有drawableRight，drawableTop，drawableBottom，drawablePadding等等

如何响应Button的点击事件

响应Button的点击事件，大概可以分为以下两种方式：

1、在java代码里添加事件监听器：

 
   1. 
   Button button = (Button) findViewById(R.id.button_send); 
  
   2. 
   button.setOnClickListener(new View.OnClickListener() { 
  
   3. 
   public void onClick(View v) { 
  
   4. 
   // 响应按钮点击事件 
  
   5. 
   } 
  
   6. 
   });

2、在布局文件里定义Button的行为属性onClick，如下所示：

 
   1. 
   <?xml version="1.0" encoding="utf-8"?> 
  
   2. 
   <Button xmlns:android="http://schemas.android.com/apk/res/android" 
  
   3. 
   android:id="@+id/button_send" 
  
   4. 
   android:layout_width="wrap_content" 
  
   5. 
   android:layout_height="wrap_content" 
  
   6. 
   android:text="@string/button_send" 
  
   7. 
   android:onClick="sendMessage" />

这样，在点击Button时，便会调用Activity里的sendMessage()方法处理事件。

在Activity里实现对应的事件处理方法sendMessage

 
   1. 
   /** 点击Button时调用*/ 
  
   2. 
   publicvoid sendMessage(View view){ 
  
   3. 
   // 处理逻辑 
  
   4. 
   }

使用这种xml的定义方式，有以下几点是需要注意的：

（1）在布局文件里onClick属性的值（onClick_event）必须与Activity里方法名（onClick_event）一致（在这指sendMessage的一致）

（2）方法onClick_event返回值必须为void，且为public方法

（3）onClick_event只能一个参数View，View指事件源（Button）

tips：在没有特别要求的情况下，可以选择其中一种来响应Button的点击事件。如果需要初始化Button控件或者在Fragment定义Button的响应方法，选择使用第一种方式。

定义Button的样式

不同版本的Android系统或者说由不同厂家生产的Android手机，其Button的默认显示样式都会有所不同。如果需要控制Button在各种版本显示一致的样式，可以选择定义App的主题样式。如：在Android4..0或者更高的版本中，可以定义Holo的主题样式——在manifest.xml的<application>节点添加属性（低版本的系统需要添加对应支持包）

android:theme="@android:style/Theme.Holo"

类似的，可以通过在布局文件里<Button>节点添加属性android:background来定义Button的背景，其背景可以是一张图片或者是某种特定额颜色。

android:background="@drawable/button_icon"

`无框Button`

偶尔，也许你会使用到无框按钮，可以通过在布局文件的<Button>节点添加borderlessButtonStyle来定义无框按钮

 
   1. 
   <Button 
  
   2. 
   android:id="@+id/button_send" 
  
   3. 
   android:layout_width="wrap_content" 
  
   4. 
   android:layout_height="wrap_content" 
  
   5. 
   android:text="@string/button_send" 
  
   6. 
   android:onClick="sendMessage" 
  
   7. 
   style="?android:attr/borderlessButtonStyle" />

自定义Button的背景

有时候为了炫酷的外观和用户体验的需要，需要重新定义Button的背景和形状（并不是简简单单地添加一张图片或者改变背景颜色）。那又是如何去美化Button默认的显示样式：

Demo1：使用位图来改变Button三种状态的样式（default—默认样式，pressed—被点击时样式，focused—获得焦点时的样式）

第一步：选好或者制作好Button各种状态下的背景图片。需要注意的是，制作的图片要适应不同大小的Button，可以选择制成nine-patch位图。

第二步：将做好的图片放到目录res/drawable/下，并为图片统一命名，如button_default.9.png，button_pressed.9.png,，button_focused.9.png.

第三步：在res/drawable/下创建xml文件（button_custom.xml），如下：

 
   1. 
   <?xml version="1.0" encoding="utf-8"?> 
  
   2. 
   <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
  
   3. 
   <item android:drawable="@drawable/button_pressed" 
  
   4. 
   android:state_pressed="true" /> 
  
   5. 
   <item android:drawable="@drawable/button_focused" 
  
   6. 
   android:state_focused="true" /> 
  
   7. 
   <item android:drawable="@drawable/button_default" /> 
  
   8. 
   </selector>

如此，便可为Button指定各种状态下的背景图片。

第四步：在布局文件里创建Button按钮，添加background属性（其值为@drawable/button_custom）

 
   1. 
   <Button 
  
   2. 
   android:id="@+id/button_send" 
  
   3. 
   android:layout_width="wrap_content" 
  
   4. 
   android:layout_height="wrap_content" 
  
   5. 
   android:text="@string/button_send" 
  
   6. 
   android:onClick="sendMessage" 
  
   7. 
   android:background="@drawable/button_custom"  />

注意：在button_custom.xml文件里，<item>有着顺序之分的，android会自上往下去搜索第一个满足条件的<item>,搜到就停止往下搜索。所以默认的显示图片需要放在最后一个。

Text Fields

文本域组件中，EditText就是我们常用的一个组件。 EditText是一个非常重要的组件，可以说它是用户和App进行数据传输窗户，有了它就等于有了一扇和App传输的门，通过它用户可以把数据传给App，然后得到我们想要的数据。EditText是TextView的子类，所以TextView的方法和特性同样存在于EditText中，有兴趣的可以参阅官方文档了解TextView的特性。

为文本指定特定的软键盘类型

文本域里可以输入不同类型的信息，如数字、密码、email等等，在输入时，系统会根据输入类型来决定弹出哪一种虚拟键盘。那呀如何来确定文本域的输入类型呢？？

在节点EditText里通过添加属性android:inputType来控制文本域的输入类型，如一个输入email的文本域，可以这样定义：

 
   1. 
   <EditText 
  
   2. 
   android:id="@+id/email_address" 
  
   3. 
   android:layout_width="fill_parent" 
  
   4. 
   android:layout_height="wrap_content" 
  
   5. 
   android:hint="@string/email_hint" 
  
   6. 
   android:inputType="textEmailAddress" />

对应弹出的键盘如下：

常用inputType有以下几种：

“text”：常规文本键盘

“textEmailAddress”：带有‘@’符号的常规文本键盘

“textUrl”：带有‘/’的常规文本键盘

“number”：数字键盘

“phone”：拨号键盘

数字键盘

常规文本键盘

定制键盘的其他表现形式

通过属性android:inputTyp同样可以定制特定的键盘行为，如使首字母大写，使用拼写建议等等。

属性android:inputType是通过按位组合得到值的，所以你可以一次性定制一个或多个值（使用“|”隔开）。

下面给出属性android:inputType常用的值：

"textCapSentences"常规文本键盘，句子首字母大写

"textCapWords" 常规文本键盘，所有单词首字母大写。（适合用来输入标题和人名）

"textAutoCorrect" 常规文本键盘，会纠正单词拼写错误

"textPassword" 数字键盘，以原点显示输入的数据

"textMultiLine" 常规文本键盘，允许用户输入多行文本

如下：定义了一个单词首字母大写，没有拼写建议的键盘

Demo：

 
   1. 
   <EditText 
  
   2. 
   android:id="@+id/postal_address" 
  
   3. 
   android:layout_width="fill_parent" 
  
   4. 
   android:layout_height="wrap_content" 
  
   5. 
   android:hint="@string/postal_address_hint" 
  
   6. 
   android:inputType="textCapWords|textNoSuggestions" />

定制键盘指定键的Action

除了可以控制键盘的输入类型，我们一样可以去定制指定键（“回车键”）的Action。例如让“回车键”具有“发送”或者“搜索”的功能。

可以通过属性android:imeOptions来设置此Action，如下，使“回车键”具有“发送”的功能。

 
   1. 
   <EditText 
  
   2. 
   android:id="@+id/search" 
  
   3. 
   android:layout_width="fill_parent" 
  
   4. 
   android:layout_height="wrap_content" 
  
   5. 
   android:hint="@string/search_hint" 
  
   6. 
   android:inputType="text" 
  
   7. 
   android:imeOptions="actionSend" />

附：如果没有显式指定属性android:imeOptions的值，系统会自动往后搜索是否有可以获得焦点的组件，如果存在这样的组件，此时的“回车键”会显示为“Next”（actionNext）；如果没有则显示为“Done”（actionDone）。

监听“回车键”的Action

如果通过android:imeOptions定制了“回车键”的Action（例如上文的“actionSend”），你需要使用TextView.OnEditorActionListener监听它的Action。监听器TextView.OnEditorActionListener.里有一个回调方法onEditorAction()，当中参数actionId用来识别哪一种Action，如IME_ACTION_SEND和IME_ACTION_SEARCH.。

Demo：监听是否按下了“Send”（actionSend）按钮。

 
   01. 
   EditText editText = (EditText) findViewById(R.id.search); 
  
   02. 
   editText.setOnEditorActionListener(new OnEditorActionListener() { 
  
   03. 
   @Override 
  
   04. 
   public boolean onEditorAction(TextView v, int actionId, KeyEvent event) { 
  
   05. 
   boolean handled = false; 
  
   06. 
   if (actionId == EditorInfo.IME_ACTION_SEND) { 
  
   07. 
   sendMessage(); 
  
   08. 
   handled = true; 
  
   09. 
   } 
  
   10. 
   return handled; 
  
   11. 
   } 
  
   12. 
   });

如果屏幕够大（如横屏的时候），你可以在EditText旁自定义一个按钮（用来实现某种逻辑），通过属性android:imeActionLabel来设置

 
   1. 
   <EditText 
  
   2. 
   android:id="@+id/launch_codes" 
  
   3. 
   android:layout_width="fill_parent" 
  
   4. 
   android:layout_height="wrap_content" 
  
   5. 
   android:hint="@string/enter_launch_codes" 
  
   6. 
   android:inputType="number" 
  
   7. 
   android:imeActionLabel="@string/launch" />

创建带有提示文的文本域

使用EditText的子类AutoCompleteTextView，可以创建带有提示文的文本域。根据提示文的来源不同（数据库或数组），AutoCompleteTextView提供了不同的适配器。

如下，演示如何使用ArrayAdapter（数组适配器）来创建AutoCompleteTextView。

第一步：在布局文件里添加节点AutoCompleteTextView

 
   1. 
   <AutoCompleteTextView        xmlns:android="http://schemas.android.com/apk/res/android" 
  
   2. 
   android:id="@+id/autocomplete_country" 
  
   3. 
   android:layout_width="fill_parent" 
  
   4. 
   android:layout_height="wrap_content" />

第二步：在strings.xml定义提示文数组，这里以输入国家名为列，给出各个国家名的提示：

 
   01. 
   <?xml version="1.0" encoding="utf-8"?> 
  
   02. 
   <resources> 
  
   03. 
   <string-array name="countries_array"> 
  
   04. 
   <item>Afghanistan</item> 
  
   05. 
   <item>Albania</item> 
  
   06. 
   <item>Algeria</item> 
  
   07. 
   <item>American Samoa</item> 
  
   08. 
   <item>Andorra</item> 
  
   09. 
   <item>Angola</item> 
  
   10. 
   <item>Anguilla</item> 
  
   11. 
   <item>Antarctica</item> 
  
   12. 
   ... 
  
   13. 
   <item>China</item> 
  
   14. 
   ... 
  
   15. 
   </string-array> 
  
   16. 
   </resources>

第三步：在Activity或Fragment里为AutoCompleteTextView设置适配器

 
   1. 
   // 获得AutoCompleteTextView组件 
  
   2. 
   AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.autocomplete_country); 
  
   3. 
   // 从strings.xml获得国家名称的数组 
  
   4. 
   String[] countries = getResources().getStringArray(R.array.countries_array); 
  
   5. 
   // 创建适配器，并用setAdapter（）为AutoCompleteTextView设置此适配器 
  
   6. 
   ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, countries); 
  
   7. 
   textView.setAdapter(adapter);

在这里，ArrayAdapter绑定了国家名称的数组countries，并以TextView的形式和simple_list_item_1的布局显示。布局simple_list_item_1是Android系统为列表信息的显示提供的一种标准外观。

效果如图：

附：在这里只是为演示功能的使用，所有并没有设置所有的国家名称提示文,(可根据App的实际需要来设置提示文)

Checkboxes（复选框）

CheckBos（复选框）的主要功能就是完成复选框额操作，在用户输入信息时，可以一次性选择多个内容。例如，用户在选择个人兴趣爱好时，或者用户在设置系统的功能时，这样选项一定会存在一个或多个，则此时可以直接使用CheckBox完成此功能。

监听CheckBox的点击事件

往布局文件里的<CheckBox>节点添加属性android:onClick，其值为调用的方法名（与上文Button用法类似）。

Demo：

在布局文件定义两个CheckBox

 
   01. 
   <?xml version="1.0" encoding="utf-8"?> 
  
   02. 
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  
   03. 
   android:orientation="vertical" 
  
   04. 
   android:layout_width="fill_parent" 
  
   05. 
   android:layout_height="fill_parent"> 
  
   06. 
   <CheckBox android:id="@+id/checkbox_meat" 
  
   07. 
   android:layout_width="wrap_content" 
  
   08. 
   android:layout_height="wrap_content" 
  
   09. 
   android:text="@string/meat" 
  
   10. 
   android:onClick="onCheckboxClicked"/> 
  
   11. 
   <CheckBox android:id="@+id/checkbox_cheese" 
  
   12. 
   android:layout_width="wrap_content" 
  
   13. 
   android:layout_height="wrap_content" 
  
   14. 
   android:text="@string/cheese" 
  
   15. 
   android:onClick="onCheckboxClicked"/> 
  
   16. 
   </LinearLayout>

在Activity里实现对应的事件处理方法：

 
   01. 
   public void onCheckboxClicked(View view) { 
  
   02. 
   // 获得checkBox的选中状态（选中或不选） 
  
   03. 
   boolean checked = ((CheckBox) view).isChecked(); 
  
   04. 
     
   05. 
   switch(view.getId()) {//通过Id获得改变了状态的CheckBox 
  
   06. 
   case R.id.checkbox_meat: 
  
   07. 
   if (checked) 
  
   08. 
   // 选中状态下的逻辑 
  
   09. 
   else 
  
   10. 
   // 没有选中状态下的逻辑 
  
   11. 
   break; 
  
   12. 
   case R.id.checkbox_cheese: 
  
   13. 
   if (checked) 
  
   14. 
   //选中状态下的逻辑 
  
   15. 
   else 
  
   16. 
   //没有选中状态下的逻辑 
  
   17. 
   break; 
  
   18. 
   // ... 
  
   19. 
   } 
  
   20. 
   }

使用这种xml设置响应方式的定义方式，有以下几点是需要注意的：

（1）在布局文件里onClick属性的值（onClick_event）必须与Activity里方法名（onClick_event）一致（在这指onCheckboxClicked的一致）

（2）方法onClick_event返回值必须为void，且为public方法

（3）onClick_event只能一个参数View，View指事件源（CheckBox）

同样地，可以在java代码里添加监听器(CompoundButton.OnCheckedChangeListener):

 
   01. 
   meat = (CheckBox) findViewById(R.id.checkbox_meat); 
  
   02. 
   // 给CheckBox设置事件监听 
  
   03. 
   meat.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { 
  
   04. 
   @Override 
  
   05. 
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { 
  
   06. 
   if (isChecked) { 
  
   07. 
   // 选中状态下的逻辑 
  
   08. 
   } else { 
  
   09. 
   // 没有选中状态下的逻辑 
  
   10. 
   } 
  
   11. 
   } 
  
   12. 
   });

tips:可以用setchecked（boolean）或 toggle（）方法来设置checkbox的选中状态。

Radio Buttons

RadioButton（单选按钮）提供了一种多选一的操作模式（添加到RadioGroup里），例如从性别“男”或“女”中选择一个。

Demo：

在布局文件里定义RadioGroup和RadioButton，

 
   01. 
   <?xml version="1.0" encoding="utf-8"?> 
  
   02. 
   <RadioGroup xmlns:android="http://schemas.android.com/apk/res/android" 
  
   03. 
   android:layout_width="fill_parent" 
  
   04. 
   android:layout_height="wrap_content" 
  
   05. 
   android:orientation="vertical"> 
  
   06. 
   <RadioButton android:id="@+id/radio_pirates" 
  
   07. 
   android:layout_width="wrap_content" 
  
   08. 
   android:layout_height="wrap_content" 
  
   09. 
   android:text="@string/pirates" 
  
   10. 
   android:onClick="onRadioButtonClicked"/> 
  
   11. 
   <RadioButton android:id="@+id/radio_ninjas" 
  
   12. 
   android:layout_width="wrap_content" 
  
   13. 
   android:layout_height="wrap_content" 
  
   14. 
   android:text="@string/ninjas" 
  
   15. 
   android:onClick="onRadioButtonClicked"/> 
  
   16. 
   </RadioGroup>

附：RadioGroup是LinearLayout的一个子类，其orientation默认为vertical。

在Activity里实现对应的事件处理方法：

 
   01. 
   public void onRadioButtonClicked(View view) { 
  
   02. 
   // 获得RadioButton的选中状态（选还是没选） 
  
   03. 
   boolean checked = ((RadioButton) view).isChecked(); 
  
   04. 
     
   05. 
   switch(view.getId()) {//通过Id获得改变了状态的CheckBox 
  
   06. 
   case R.id.radio_pirates: 
  
   07. 
   if (checked) 
  
   08. 
   // 选中了R.id.radio_pirates 
  
   09. 
   break; 
  
   10. 
   case R.id.radio_ninjas: 
  
   11. 
   if (checked) 
  
   12. 
   // 选中了R.id.radio_ninjas 
  
   13. 
   break; 
  
   14. 
   } 
  
   15. 
   }

使用这种xml设置响应方式的定义方式，有以下几点是需要注意的：

（1）在布局文件里onClick属性的值（onClick_event）必须与Activity里方法名（onClick_event）一致（在这指onRadioButtonClicked的一致）

（2）方法onClick_event返回值必须为void，且为public方法

（3）onClick_event只能一个参数View，View指事件源（RadioButton）

同样地，可以在java代码里添加监听器(RadioGroup.OnCheckedChangeListener，注意这里的监听器和上文提到的CompoundButton.OnCheckedChangeListener是不一样的)，实现方法与上文类似，在此需要为RadioGroup添加一个Id（radioGroup）

 
   01. 
   // 通过findViewById获得RadioGroup对象 
  
   02. 
   raGroup = (RadioGroup) findViewById(R.id.radioGroup); 
  
   03. 
   // 添加事件监听器 
  
   04. 
   raGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { 
  
   05. 
   @Override 
  
   06. 
   public void onCheckedChanged(RadioGroup group, int checkedId) { 
  
   07. 
   if (checkedId == R.id.radio_pirates) { 
  
   08. 
   // 选中R.id. radio_pirates的逻辑 
  
   09. 
   } else if (checkedId == R.id.radio_ninjas) { 
  
   10. 
   // 选中R.id.radio_ninjas的逻辑 
  
   11. 
   } else { 
  
   12. 
   // 其他逻辑 
  
   13. 
   } 
  
   14. 
   } 
  
   15. 
   });