文章 4 - Android UI 布局和控件
4.21/5 (14投票s)
探索 Android 支持的各种用户界面布局和控件。
引言
在本节中，我们将探索 Android 支持的各种 UI 布局和控件。
布局
布局展示了用户界面如何在屏幕和小部件上显示。布局可以在运行时或通过 XML 中的 UI 元素以两种方式实现。
每种实现的优点
- 运行时实现
- 通过上述实现，用户可以通过编程方式创建 ViewGroup 和 View 对象，并能够在运行时访问或修改它们的属性。
- XML 中的 UI 元素
- 在 XML 中显示 UI 元素的优点是将演示与后台代码分离。
布局类型
- 灵活的布局
- LinearLayout
- RelativeLayout
- TableLayout
- AbsoluteLayout（在 API 级别 3 已弃用）
- FrameLayout
- Adapter View
- List View
- Grid View
灵活的布局
灵活布局的最终目的是它可以在多个屏幕上显示。它可以根据适当的屏幕分辨率拉伸内容。要启用此功能，我们必须根据需要设置 wrap_content 属性。
线性布局
如标题所示，内容根据方向配置以水平或垂直方式依次排列。权重最高的子项将占用布局上剩余的空间。属性名称为 android:layout_weight="1"
activity_linear_layout.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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".LinearLayout"
android:orientation="vertical">
<EditText
android:text="@string/first_name"
android:id="@+id/firstname"
android:inputType="text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"/>
<EditText
android:text="@string/last_name"
android:id="@+id/lastname"
android:inputType="text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:text="@string/age"
android:id="@+id/age"
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="@string/submit"
android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
</LinearLayout>
string.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Linear Layout</string>
<string name="first_name">First Name</string>
<string name="last_name">Last Name</string>
<string name="age">Age</string>
<string name="submit">Submit</string>
<string name="action_settings">Settings</string>
</resources>
通过模拟器进行水平和垂直方向的模拟输出
水平方向
垂直方向
Relative Layout
顾名思义，它完全基于最近的控件或同级控件的相对位置。控件的位置根据以下属性 above/below 和 left/right 进行放置。
activity_relative_layout.xml
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".RelativeLayout">
<EditText
android:text="@string/first_name"
android:id="@+id/firstname"
android:inputType="text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"
/>
<EditText
android:text="@string/last_name"
android:id="@+id/lastname"
android:inputType="text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/firstname"/>
<EditText
android:text="@string/age"
android:id="@+id/age"
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/lastname"/>
<Button
android:text="@string/submit"
android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_below="@+id/age"
android:layout_alignParentRight="true"/>
</RelativeLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Relative Layout</string>
<string name="first_name">First Name</string>
<string name="last_name">Last Name</string>
<string name="age">Age</string>
<string name="submit">Submit</string>
<string name="action_settings">Settings</string>
</resources>
Table Layout
它类似于带有行和列的 HTML 表格格式。这里的元素是 TableRow 和 TableColumn。要将列右对齐，我们必须设置布局属性并指定列号，如 android:stretchColumns="1" 所示，这样列 1 将延伸到屏幕宽度。android:layout_gravity=”right” 将提交按钮移到第 1 列的右侧，因为它被拉伸了。
优点
无论在哪种屏幕上查看，单元格内容的对齐方式都将保持一致。
activit_table_layout.xml
<TableLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".TableLayout"
android:stretchColumns="1">
<TableRow android:id="@+id/tablerow1"
android:padding="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:text="@string/first_name"
android:layout_column="0"
/>
<EditText
android:id="@+id/firstname"
android:inputType="text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"
android:layout_column="1"
/>
</TableRow>
<TableRow android:id="@+id/tablerow2"
android:padding="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:text="@string/last_name"
android:layout_column="0"
/>
<EditText
android:id="@+id/lastname"
android:inputType="text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
/>
</TableRow>
<TableRow android:id="@+id/tablerow3"
android:padding="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:text="@string/age"
android:layout_column="0"
/>
<EditText
android:id="@+id/age"
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
/>
</TableRow>
<TableRow android:id="@+id/tablerow4"
android:padding="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="@string/submit"
android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_column="1"/>
</TableRow>
</TableLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Table Layout</string>
<string name="first_name">First Name</string>
<string name="last_name">Last Name</string>
<string name="age">Age</string>
<string name="submit">Submit</string>
<string name="action_settings">Settings</string>
</resources>
模拟器上的模拟 
Absolute Layout（已弃用）
此功能在 API 级别 3 已弃用。此布局的目的是在平板电脑屏幕的绝对位置（X 和 Y 坐标）放置控件。位置根据以下参数 android:layout_x 和 android:layout_y 进行设置。
Frame Layout
此布局充当容器，其设计方式使其可以显示单个项目。当我们希望根据需要通过编程方式隐藏和显示元素，或者通过指定重力并重叠显示内容时，它将很有帮助。它总是将内容堆叠在布局内。
activity_frame_layout.xml
<FrameLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".FrameLayout">
<ImageView
android:src="@drawable/balloon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<Button
android:text="@string/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<TextView
android:text="@string/display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"/>
</FrameLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Frame Layout</string>
<string name="display_name">Welcome to Frame Layout!</string>
<string name="submit">Button above Balloon</string>
<string name="action_settings">Settings</string>
</resources>
适配器
是数据（Cursor /ArrayList）和 Adapter View（ListView / Grid View）之间的连接器。
Adapter View
是一个视图，用于表示通过连接器（即适配器）获得的数据。根据表示形式，它分为 ListView 和 GridView
ListView
使用 ListAdapter / ArrayAdapter / Cursor Adapter 显示具有可滚动（分页）功能的数据。下面的示例展示了如何使用 ArrayAdapter 显示数据
activity_list_view_layout.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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".ListView">
<ListView android:id="@+id/tamiluyirelluthu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></ListView>
</LinearLayout>
ListViewLayout.java
public class ListViewLayout extends ActionBarActivity {
static final String[] tamiluyirelluthukal = new String[] {"அ", "ஆ", "இ", "ஈ", "உ", "ஊ",
"எ", "ஏ", "ஐ", "ஒ", "ஓ", "ஔ"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_view_layout);
ArrayAdapter adapter =new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,tamiluyirelluthukal);
ListView listview = (ListView) findViewById(R.id.tamiluyirelluthu);
listview.setAdapter(adapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.list_view_layout, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ListView Layout</string>
<string name="action_settings">Settings</string>
</resources>
模拟器上的模拟
GridView
使用 android:numColumns="auto_fit" 和 android:stretchMode="columnWidth" 以网格格式显示数据（行和列）。绑定类似于列表项，可以通过适配器完成，显示方式是行和列，像矩阵一样。我们可以根据需要通过设置 numColumns 属性来指定列数，auto_fit 会根据设备和数据进行跨度。
activity_grid_view_layout.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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".GridViewLayout">
<GridView android:id="@+id/tamiluyirelluthu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:columnWidth="50dip"
android:stretchMode="columnWidth"
/>
</LinearLayout>
GridViewLayout.java
package apps.gridviewlayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;
public class GridViewLayout extends ActionBarActivity {
static final String[] tamiluyirelluthukal = new String[] {"அ", "ஆ", "இ", "ஈ", "உ", "ஊ",
"எ", "ஏ", "ஐ", "ஒ", "ஓ", "ஔ"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grid_view_layout);
ArrayAdapter adapter =new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,tamiluyirelluthukal);
GridView gridView = (GridView) findViewById(R.id.tamiluyirelluthu);
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{
Toast.makeText(getApplicationContext(),
((TextView) view).getText(),Toast.LENGTH_SHORT).show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.grid_view_layout, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">GridView Layout</string>
<string name="action_settings">Settings</string>
</resources>
模拟器上的模拟
输入控件
输入控件是应用程序的交互组件，我们将看到 Android 支持的各种控件以及 Android Studio 开发的示例。
控件类型
- Button
- Textfield
- EditView
- AutoCompleteView
- 复选框
- 单选按钮
- RadioGroup
- RadioButton
- Toggle button
- Toggle
- Switch
- 微调器
- 选择器
- 日期选择器
- TimePicker
Button
它是一个可点击的控件，可以显示文本/图标或两者。这可以通过 xml 按钮元素上的各种参数实现，例如 android:text="@string/myname" 来显示文本。要单独显示图像，我们可以使用 ImageButton 元素并设置 src 参数 android:src="@drawable/button_icon"。要在 Button 控件上同时显示文本和图像，我们必须通过以下参数告知图像显示在左侧还是右侧：android:text="@string/button_text" 和 android:drawableLeft="@drawable/button_icon"
activity_button_uicontrols.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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".button_uicontrols"
android:orientation="vertical">
<Button
android:text="@string/button"
android:onClick="Display_Toast"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageButton
android:src="@drawable/balloon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imgbutton"/>
<Button
android:id="@+id/imgtextbutton"
android:drawableTop="@drawable/ic_launcher"
android:text="@string/bellow_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Andorid UIControls - Buttons</string>
<string name="action_settings">Settings</string>
<string name="bellow_image">Text Below Image</string>
<string name="button">Button Click</string>
</resources>
button_uicontrols.java
package apps.buttonuicontrols;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;
import android.widget.Button;
public class button_uicontrols extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button_uicontrols);
ImageButton imgButton = (ImageButton) findViewById(R.id.imgbutton);
imgButton.setOnClickListener(new View.OnClickListener(){
public void onClick(View v)
{
Toast.makeText(getApplicationContext(),"Image Button Clicked",
Toast.LENGTH_SHORT).show();
}
});
Button txt_img_button = (Button) findViewById(R.id.imgtextbutton);
txt_img_button.setOnClickListener(new View.OnClickListener(){
public void onClick(View v)
{
Toast.makeText(getApplicationContext(),"Text Below Image Button Clicked",
Toast.LENGTH_SHORT).show();
}
});
}
public void Display_Toast(View v)
{
Toast.makeText(getApplicationContext(),"Button clicked",Toast.LENGTH_LONG).show();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.button_uicontrols, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
文本字段
此输入控件用户可以根据需要键入文本、数字或字母数字。根据操作，它可以是 EditView 或 AutocompleteView。
EditView 键盘输入可以通过以下参数指定：android:inputtype "text" -> 普通文本键盘，"textEmailAddress" -> 带有“@”字符的普通文本键盘，"textUri" -> 带有“/”字符的普通文本键盘，"number" -> 基本数字键盘，"phone" -> 电话式键盘。通过上述属性，我们可以控制文本字段的行为，要查看其他属性和组合，请参考以下链接，其中详细解释。
https://developer.android.com.cn/reference/android/widget/TextView.html#attr_android:inputType
activity_textfield.xml
<TableLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:stretchColumns="1"
tools:context=".textfield">
<TableRow android:id="@+id/tablerow1">
<TextView
android:text="@string/numericfield"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:inputType="number"/>
</TableRow>
<TableRow android:id="@+id/tablerow2">
<TextView
android:text="@string/email_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:inputType="textEmailAddress"/>
</TableRow>
</TableLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">TextField</string>
<string name="numericfield">Enter Number:</string>
<string name="email_address">Enter EmailAddress:</string>
<string name="action_settings">Settings</string>
</resources>
textfield.java
package apps.textfield;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class textfield extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_textfield);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.textfield, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
AutoCompleteView
此输入控件根据按键笔划提供建议，以匹配建议列表。
activity_auto_complete_view_text.xml
<TableLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:stretchColumns="1"
tools:context=".AutoCompleteViewText">
<TableRow android:id="@+id/tablerow1">
<TextView
android:text="Fruits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"/>
<AutoCompleteTextView
android:id="@+id/autocompleteText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"/>
</TableRow>
</TableLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Android UIControls - AutoCompleteTextView</string>
<string name="action_settings">Settings</string>
<string-array name="fruits_array">
<item>Apple</item>
<item>American Raspery</item>
<item>American ChesNut</item>
<item>American Grape</item>
<item>African Mango</item>
<item>Apricot</item>
<item>American Cherry Orange</item>
</string-array>
</resources>
AutoCompleteViewText.java
package apps.autocompleteviewtext;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
public class AutoCompleteViewText extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_auto_complete_view_text);
AutoCompleteTextView autoCompleteTextView =
(AutoCompleteTextView) findViewById(R.id.autocompleteText);
String[] fruitslist = getResources().getStringArray(R.array.fruits_array);
ArrayAdapter<String> arrayAdapter =
new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line,fruitslist);
autoCompleteTextView.setAdapter(arrayAdapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.auto_complete_view_text, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
复选框
此输入控件允许我们根据需要选择单个或多个值。下面的示例允许您选择多个操作系统，并且选定的操作系统在模拟器上以 Toast 形式显示
activity_checkbox_control.xml
<TableLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".CheckboxControl"
android:stretchColumns="1">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="Mobile OS" />
</TableRow>
<TableRow>
<CheckBox android:id="@+id/checkbox_blackberry"
android:text="@string/blackberry"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onClick="onCheckboxClicked" />
</TableRow>
<TableRow>
<CheckBox android:id="@+id/checkbox_apple"
android:text="@string/apple"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onClick="onCheckboxClicked" />
</TableRow>
<TableRow>
<CheckBox android:id="@+id/checkbox_android"
android:text="@string/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onClick="onCheckboxClicked" />
</TableRow>
<TableRow>
<CheckBox android:id="@+id/checkbox_windows"
android:text="@string/windows"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onClick="onCheckboxClicked" />
</TableRow>
</TableLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Android UIControls - Checkbox Control</string>
<string name="action_settings">Settings</string>
<string name="blackberry">2000 Blackberry</string>
<string name="apple">2007 Apple</string>
<string name="android">2008 Android 1.0</string>
<string name="windows">2010 Windows Phone</string>
</resources>
CheckboxControl.java
package apps.checkboxcontrol;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.CheckBox;
import android.widget.Toast;
public class CheckboxControl extends ActionBarActivity {
String selectedMsg = "";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_checkbox_control);
}
public void onCheckboxClicked(View view) {
boolean checked = ((CheckBox) view).isChecked();
switch(view.getId()) {
case R.id.checkbox_blackberry:
if (checked)
selectedMsg = selectedMsg + "BlackBerry |";
break;
case R.id.checkbox_apple:
if (checked)
selectedMsg = selectedMsg + "Apple |";
break;
case R.id.checkbox_android:
if (checked)
selectedMsg = selectedMsg + "Android |";
break;
case R.id.checkbox_windows:
if (checked)
selectedMsg = selectedMsg + "Windows Phone |";
break;
}
Toast.makeText(getApplicationContext(),selectedMsg,Toast.LENGTH_LONG).show();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.checkbox_control, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
RadioButtons
此输入控件允许用户在组内选择单个选项。RadioButton 有单击事件 oncClick，并根据 isChecked 属性，我们将知道选定的 RadioButton
activity_radiobutton_control.xml
<TableLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".RadiobuttonControl"
android:stretchColumns="1">
<TableRow android:id="@+id/tablerow1"
android:padding="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:text="@string/gender"
android:layout_column="0"
/>
<RadioGroup
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:orientation="horizontal"
android:layout_column="1"
>
<RadioButton android:id="@+id/male"
android:text="Male" android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onClick="onRadioButtonClicked" />
<RadioButton android:id="@+id/female"
android:text="Female" android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onClick="onRadioButtonClicked" />
</RadioGroup>
</TableRow>
<TableRow android:id="@+id/tablerow2"
android:padding="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:text="@string/martial_status"
android:layout_column="0"
/>
<RadioGroup android:layout_height="wrap_content"
android:layout_width="wrap_content" android:orientation="vertical"
android:layout_column="1"
>
<RadioButton android:id="@+id/single"
android:text="Single" android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onClick="onRadioButtonClicked" />
<RadioButton android:id="@+id/married"
android:text="Married" android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onClick="onRadioButtonClicked" />
<RadioButton android:id="@+id/other"
android:text="Other" android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onClick="onRadioButtonClicked" />
</RadioGroup>
</TableRow>
</TableLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Android UIControls - RadioButton</string>
<string name="action_settings">Settings</string>
<string name="gender">Gender</string>
<string name="martial_status">Martial Status</string>
</resources>
RadiobuttonControl.java
package apps.radiobuttoncontrol;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RadioButton;
import android.view.View;
import android.widget.Toast;
public class RadiobuttonControl extends ActionBarActivity {
String selectedMsg = "";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_radiobutton_control);
}
public void onRadioButtonClicked(View view) {
boolean checked = ((RadioButton) view).isChecked();
switch(view.getId()) {
case R.id.male:
if (checked)
selectedMsg = "Male |";
break;
case R.id.female:
if (checked)
selectedMsg = "Female |";
break;
case R.id.single:
if (checked)
selectedMsg = selectedMsg + "Single |";
break;
case R.id.married:
if (checked)
selectedMsg = selectedMsg + "Married |";
break;
case R.id.other:
if (checked)
selectedMsg = selectedMsg + "Other |";
break;
}
Toast.makeText(getApplicationContext(),selectedMsg,Toast.LENGTH_LONG).show();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.radiobutton_control, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
ToggleButtons
切换按钮允许用户将状态设置为开和关。Switch 是另一个切换按钮，从 Android 4.0（API 14 级）开始支持。在我的环境中，构建版本设置的最低支持版本是 API 级别 10，这会显示如下所示的警报。
如果我们运行它，它将抛出运行时错误，例如 java.lang.ClassNotFoundException: android.view.Switch in loader dalvik.system.PathClassLoader
activity_toggle_button_control.xml
<TableLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:stretchColumns="1"
tools:context=".ToggleButtonControl">
<TableRow android:id="@+id/tablerow1">
<TextView
android:text="Toggle Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"/>
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:textOn="On"
android:textOff="Off"
android:onClick="onToggleClicked"/>
</TableRow>
<TableRow android:id="@+id/tablerow2">
<TextView
android:text="@string/switch_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"/>
<Switch
android:id="@+id/switch_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:textOn="On"
android:textOff="Off"
android:onClick="onSwitchClicked"/>
</TableRow>
</TableLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Android UIControl - ToggleButton</string>
<string name="switch_button">Switch Button</string>
<string name="action_settings">Settings</string>
</resources>
ToggleButtonControl.java
package apps.togglebuttoncontrol;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Switch;
import android.widget.ToggleButton;
import android.widget.Toast;
public class ToggleButtonControl extends ActionBarActivity {
String selectedMsg = "";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toggle_button_control);
}
public void onToggleClicked(View view)
{
boolean checked = ((ToggleButton) view).isChecked();
selectedMsg = "Toggle Off";
if (checked)
{
selectedMsg = "Toggle On";
}
Toast.makeText(getApplicationContext(),selectedMsg,Toast.LENGTH_LONG).show();
}
public void onSwitchClicked(View view)
{
boolean checked = ((Switch) view).isChecked();
selectedMsg = "Switch Off";
if (checked)
{
selectedMsg = "Switch On";
}
Toast.makeText(getApplicationContext(),selectedMsg,Toast.LENGTH_LONG).show();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.toggle_button_control, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
微调器
此输入控件类似于下拉列表，用户可以在其中选择一个值。
activity_spinner_control.xml
<TableLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".SpinnerControl"
android:stretchColumns="1">
<TableRow android:id="@+id/tablerow1"
android:padding="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:text="Fruits"
android:layout_column="0"
/>
<Spinner android:id="@+id/spinner_control"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Android UIControls - Spinner Control</string>
<string name="action_settings">Settings</string>
<string-array name="fruits_array">
<item>Apple</item>
<item>Mango</item>
<item>Grape</item>
<item>Strawberry</item>
<item>Raspberry</item>
</string-array>
</resources>
SpinnerControl.java
package apps.spinnercontrol;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
public class SpinnerControl extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_spinner_control);
Spinner spinnerControl = (Spinner) findViewById(R.id.spinner_control);
ArrayAdapter<CharSequence> arrayAdapter = ArrayAdapter.createFromResource(this,
R.array.fruits_array,android.R.layout.simple_spinner_item);
arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinnerControl.setAdapter(arrayAdapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.spinner_control, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
选择器
DatePicker 和 TimePicker 支持两种类型的选择器。选择器可以通过适当的 Dialog（如 DatePickerDialog 和 TimePickerDialog）查看，这些 Dialog 由 DialogFragment 支持，DialogFragment 从 Android 3.0（API 级别 10）开始支持，并且向后兼容到 Android 1.6。
activity_picker_control.xml
<TableLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".PickerControl">
<TableRow>
<TextView android:text="@string/timePicker"/>
<TimePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/timePicker"
android:layout_column="1" />
</TableRow>
<TableRow>
<TextView android:text="@string/datePicker"/>
<DatePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/datePicker"
android:layout_column="1"/>
</TableRow>
</TableLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Android UIControls - Picker Control</string>
<string name="timePicker">Time Picker</string>
<string name="datePicker">Date Picker</string>
<string name="action_settings">Settings</string>
</resources>
PickerControl.java
package apps.pickercontrol;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class PickerControl extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_picker_control);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.picker_control, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
参考
https://developer.android.com.cn/guide/topics/ui/declaring-layout.html
https://developer.android.com.cn/guide/topics/ui/controls.html
https://developer.android.com.cn/guide/practices/screens_support.html
https://developer.android.com.cn/training/best-ui.html
http://www.mkyong.com/tutorials/android-tutorial/