Android开发与实践-Android用户界面

第4章Android中用户界面

Android系统为我们提供了丰富的可视化用户界面组件，包括文本框、编辑框、普通按钮、图片按钮、单选按钮、复选按钮、菜单、对话框、下拉列表等。4.1文本框（TextView）在Android中，文本框使用TextView表示，用于在屏幕上显示文本，这与Java中的文本框组件不同，它相当于Java中的标签，也就是JLable。需要说明的是，Android中的文本框组件可以显示单行文本，也可以显示多行文本，而且还可以显示带图像的文本。在Android中，向屏幕中添加文本框，通过在XML布局文件中使用<TextView>标记添加，在XML布局文件中添加文本框的基本的语法格式如下：<TextView

属性列表/>TextView支持的常用XML属性见课本43页表4-1所示。4.2编辑框（EditText）在Android中，编辑框使用EditText表示，用于在屏幕上显示文本输入框，这与Java中的编辑框组件功能类似。需要说明的是，Android中的编辑框组件可以输入单行文本，也可以输入多行文本，而且还可以输入指定格式的文本（例如，密码、电话号码、E-mail地址等）。

在Android中，向屏幕中添加编辑框，通过在XML布局文件中使用<EditText>标记添加，在XML布局文件中添加编辑框的基本的语法格式如下：<EditText

属性列表/>

由于EditText类是TextView的子类，所以对于表4-1中列出的XML属性，同样适用于EditText组件。特别需要注意的是android:inputType属性，在EditText组件中，通过指定该属性可以帮助输入法显示合适的类型。例如，要添加一个只能显示电话号码的编辑器，可以将android:inputType属性设置为phone。下面给出一个关于文本框和编辑框的实例。

在Eclipse中创建Android项目，主要使用EditText组件实现用户注册信息的输入功能。

修改新建项目的res/layout目录下的布局文件main.xml，为默认添加的垂直线性布局管理器<LinearLayout>设置背景，并为默认添加的TextView组件设置高度和对其中的E-mail格式的文本设置超链接，修改后的代码如下：<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入用户名："

android:textSize="12sp" /><EditText

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:inputType="text"

android:hint="请输入用户名" /><TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入用户密码："

android:textSize="12sp" />

<EditText

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:inputType="textPassword"

android:hint="请输入用户密码" /><TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入出生日期："

android:textSize="12sp" /><EditText

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:inputType="date"

android:hint="请输入出生日期" /><TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入手机号码："

android:textSize="12sp" />

<EditText

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:maxLength="11"

android:inputType="phone"

android:hint="请输入手机号码"

android:drawableLeft="@drawable/icon" />运行本实例，将显示如图4.1所示的运行结果。

图4.1使用文本框和编辑框实现用户注册信息的输入4.3普通按钮（Button）在Android中向屏幕中添加按钮，首先在XML布局文件中使用<Button>标记添加，也就是通过<Button>在XML布局文件中添加。在XML布局文件中添加普通按钮的基本格式如下：<Button

android:text="显示文本"

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>在屏幕上添加按钮后，还需要为按钮添加单击事件监听器，才能让按钮发挥其特有的用途。其在Java代码中完成，例如在Activity的onCreate()方法中完成，具体的代码如下：importandroid.view.View.OnClickListener;importandroid.widget.Button;//通过ID获取布局文件中添加的按钮Buttonlogin=(Button)findViewById(R.id.login); //为按钮添加单击事件监听 login.setOnClickListener(new

OnClickListener(){ @Override publicvoidonClick(Viewv){ //编写要执行的动作代码 }});4.4图片按钮（ImageButton）图片按钮与普通的使用方法基本相同，只不过图片按钮使用ImageButton关键字定义，并且还可以为其指定android:src属性，该属性用于设置要显示的图片。在布局文件中，添加图片按钮的基本格式如下：<ImageButton

android:id="@+id/imageButton1"

android:src="@drawable/图片文件名"

android:background="#000"

android:layout_width="wrap_content"

android:layout_height="wrap_content"></ImageButton>下面给出一个关于图片按钮的实例。在Eclipse中创建Android项目，主要实现添加图片按钮的功能。修改新建项目的res/layout目录下的布局文件main.xml，在其中添加一个ImageButton组件，并为其设置背景图片，代码如下：<ImageButton

android:id="@+id/login"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/login“

android:background="#000"/>运行本实例，将显示如图4.2所示的运行结果。

图4.2图片按钮的使用4.5单选按钮（RadioButton）在默认的情况下，单选按钮显示一个圆形图标，并且在该图标旁边放置一些说明性文字，而在程序中，一般将多个单选按钮放置在按钮组中，使这些单选按钮表现出某种功能，当用户选中某个单选按钮后，按钮组中的其他单选按钮将被自动取消选取状态。在Android中，单选按钮使用RadioButton表示，而RadioButton类又是Button的子类，所以单选按钮可以直接使用Button支持的各种属性。

在Android中向屏幕中添加单选按钮，通过在XML布局文件中使用<RadioButton>标记添加，在XML布局文件中添加单选按钮的基本格式如下：<RadioButton

android:text="显示文本"

android:id="@+id/ID号"

android:checked="true|false"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>RadioButton组件的android:checked属性用于指定选中状态，属性值为true时，表示选中，属性值为false时，表示不选中，默认为false。通常情况下，RadioButton组件需要与RadioGroup组件一起使用，组成一个单选按钮组。在XML布局文件中，添加RadioGroup组件的基本格式如下：<RadioGroup

android:id="@+id/radioGroup1"

android:orientation="horizontal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"> <!--添加多个RadioButton组件--></RadioGroup>与普通按钮相同，只有在屏幕上添加按钮后，还需要为按钮添加单击事件监听，才能让按钮发挥其特有的用途。4.6复选按钮（CheckBox）

在默认的情况下，复选按钮显示一个方块图标，并且在该图标旁边放置一些说明性文字。与单选按钮唯一不同的是复选按钮可以进行多选设置，每一个复选按钮都提供“选中”和“不选中”两种状态。在Android中，复选按钮使用CheckBox表示，而CheckBox类又是Button的子类，所以复选按钮可以直接使用Button支持的各种属性。

在Android中向屏幕中添加复选按钮，是通过在XML布局文件中使用<CheckBox>标记添加。在XML布局文件中添加复选按钮的基本格式如下：<CheckBox

android:text="显示文本"

android:id="@+id/ID号"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>由于复选框可以选中多项，所以为了确定用户是否选择了某一项，还需要为每一个选项添加setOnCheckedChangeListener事件监听。例如，要为id为like1的复选按钮添加状态改变事件监听，可以使用下面的代码：finalCheckBoxlike1=(CheckBox)findViewById(R.id.like1); //根据id属性获取复选按钮like1.setOnCheckedChangeListener(newOnCheckedChangeListener(){ publicvoidonCheckedChanged(CompoundButton

buttonView,boolean

isChecked){//判断该复选按钮是否被选中

if(like1.isChecked()){ //获取选中项的值 like1.getText(); } }});

4.7菜单

菜单的设计在人机交互中可以说是非常人性化的，它提供了不同功能分组展示的能力。Android中菜单分为三种类型:选项菜单(OptionMenu)、上下文菜单(ContextMenu)和子菜单(SubMenu)4.7.1选项菜单(OptionMenu)当用户单击设备上的菜单(Menu)按键时，弹出的菜单就是选项菜单。选项菜单的菜单项最多只能有六个，超过六个第六个自动显示“更多”选项来展开显示。我们先来看一个Android系统自带的选择菜单功能，当我们单击“Menu”按键时，将弹出如图4.3所示的选项菜单。图4.3Android选项菜单4.7.1选项菜单(OptionMenu)我们也经常会在程序里自己创建选项菜单。例如，我们设计了一款游戏，这就需要设计一个选项菜单给用户提供交互接口。创建一个选项菜单需要如下步骤。

(1)覆盖Activity的onCreateOptionsMenu(Menumenu)方法，当我们第一次打开菜单时该方法被自动调用。(2)调用Menu的add()方法添加菜单项(MenuItem)，可以调用MenuItem的setlcon()方法来为菜单项设置图标。(3)当菜单项(Menuitem)被选择时，覆盖Activity的onOptionsltemSelected()方法来响应事件.4.7.1选项菜单(OptionMenu)下面是一个创建并响应菜单选项的实例代码:packagecom.amaker.test;importandroid.app.Activity;importandroid.os.Bundle;importandroid.view.Menu;importandroid.view.MenuItem;publicclassMainActivityextendsActivity{

privatestaticfinalintITEM1=Menu.FIRST;

privatestaticfinalintITEM2=Menu.FIRST+1;

publicvoidonCreate(Bundle

savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

4.7.1选项菜单(OptionMenu)/**覆盖该方法添加菜单项*/

publicboolean

onCreateOptionsMenu(Menumenu){

menu.add(0,ITEM1,0,"开始");

menu.add(0,ITEM2,0,"退出");

returntrue;}

/**覆盖该方法，响应菜单选项被单击事件*/

publicboolean

onOptionsItemSelected(MenuItemitem){

switch(item.getItemId()){

caseITEM1:

setTitle("开始游戏！");

break;

caseITEM2:

setTitle("退出！");

break;}

returntrue;

}}4.7.1选项菜单(OptionMenu)

4.7.2上下文菜单当用户长时间按键不放时，弹出的菜单称为上下文菜单。我们经常在Windows中用鼠标右键单击弹出的菜单就是上下文菜单。我们还是先来看看Android系统中的上下文菜单应用吧!当我们在设备的启动界面长时间按键不放时，会弹出如图4.4所示的上下文菜单，代码参见课本145页。图4.4系统上下文菜单4.7.2子菜单很好理解，子菜单就是将相同功能的分组进行多级显示的一种菜单，比如，Windows的“文件”菜单中又有“新建”、“打开”、“关闭”等子菜单，Android系统中的子菜单也很多见，如“Settings"(设置)菜单就有其子菜单，如图4.5所示。

图4.5测试子菜单4.8对话框对话框是程序运行中的弹出窗口。例如，当用户要删除一个联系方式时，会弹出一个对话框，让用户确认是否真的要删除。Android系统提供了四种对话框:警告对话框(AlertDialog)、进度对话框(ProgressDiaiog)、日期选择对话框(DatePickerDialog)和时间选择对话框(TimePickerDialog)，本节重点讲述AlertDialog，其他对话框的应用将在后续章节中进行讲述。

AlertDialog是一个提示窗口，要求用户作出选择。该对话框中一般会有几个选择按钮、标题信息和提示信息。在程序中创建对话框需要如下步骤。(1)获得AlertDialog的静态内部类Builder对象，由该类来创建对话框。

4.8对话框

(2)通过Buidler;对象设置对话框的标题、按钮以及按钮将要响应的事件。(3)调用Builder的create()方法创建对话框。调用AlertDialog的show()方法显示对话框。如下代码创建了具有“是”、“否”按钮和提示信息的对话框，用来确认用户的操作。packagecom.amaker.test;importandroid.app.Activity;importandroid.app.AlertDialog;importandroid.content.DialogInterface;importandroid.os.Bundle;importandroid.view.View;importandroid.view.View.OnClickListener;importandroid.widget.Button;importandroid.widget.TextView;

4.8对话框

publicclassMainActivityextendsActivity{ privateTextView

myTV; privateButtonmyBtn;@OverridepublicvoidonCreate(Bundle

savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

myTV=(TextView)findViewById(R.id.TextView01);

myBtn=(Button)findViewById(R.id.Button01);finalAlertDialog.Builderbuilder=newAlertDialog.Builder(this);

myBtn.setOnClickListener(new

OnClickListener(){

4.8对话框

publicvoidonClick(Viewv){

builder.setMessage("真的要删除该记录吗？").setPositiveButton("是",newDialogInterface.OnClickListener(){ publicvoidonClick(DialogInterfacedialog,intwhich){

myTV.setText("删除成功！");} }).setNegativeButton("否",newDialogInterface.OnClickListener(){ publicvoidonClick(DialogInterfacedialog,intwhich){

myTV.setText("取消删除！");}});AlertDialogad=builder.create();

ad.show();} });}}

4.8对话框

4.9提示信息（Toast）提示信息(Toast)在程序中很常用，使用也很简单。当用户执行某个动作之后，显示一个提示信息，过一会儿将自动消失，这就是Toast。

在程序中创建Toast的步骤说明如下。（1）调用Toast的静态方法makeText()添加显示文本和时长。（2）调用Toast的show()显示。下面实例在屏幕上添加两个按钮:第一个按钮响应事件显示一个长时间Toast;第二个按钮响应事件显示短时间Toast。4.9提示信息（Toast）

packagecom.amaker.test;importandroid.app.Activity;importandroid.os.Bundle;importandroid.view.View;importandroid.view.View.OnClickListener;importandroid.widget.Button;importandroid.widget.Toast;publicclassMainActivityextendsActivity{privateButtonb1,b2;@Override

4.9提示信息（Toast）

publicvoidonCreate(Bundle

savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.main);b1=(Button)findViewById(R.id.Button01);b2=(Button)findViewById(R.id.Button02);finalintl=Toast.LENGTH_LONG;finalints=Toast.LENGTH_SHORT;finalStrings1="我多显示一会儿！";finalStrings2="我少显示一会儿！";b1.setOnClickListener(newOnClickListener(){ publicvoidonClick(Viewv){Toastt1=Toast.makeText(getApplicationContext(),s1,l); t1.show();} });

4.9提示信息（Toast）



b2.setOnClickListener(newOnClickListener(){ publicvoidonClick(Viewv){ Toastt2=Toast.makeText(getApplicationContext(),s2,s); t2.show(); } });

}}

4.9提示信息（Toast）

4.10进度条我们在安装一些软件时，经常会看到进度条显示安装进度。或者我们在执行一些比较耗时的程序时，系统会弹出一个进度对话框提示用户等待。在Android系统中进度条有很多种:对话框进度条、标题栏进度条和水平进度条，我们重点来看看水平进度条。创建水平进度条的步骤说明如下。（1）在布局文件中声明ProgressBar。（2）在Activity中获得ProgressBar实例。（3）调用ProgressBar的incrementProgressBy()方法增加或减少进度。Activity代码如下：4.10进度条packagecom.amaker.test;importandroid.app.Activity;importandroid.os.Bundle;importandroid.view.View;importandroid.view.View.OnClickListener;importandroid.widget.Button;importandroid.widget.ProgressBar;publicclassMainActivityextendsActivity{//声明按钮

privateButtonb1,b2;//声明进度条progressBar

ProgressBar

progressBar;

@Override

publicvoidonCreate(Bundle

savedInstanceState){

4.10进度条super.onCreate(savedInstanceState);//设置当前activity界面布局

setContentView(R.layout.main);//通过findViewbyId方法获得Button实例

b1=(Button)findViewById(R.id.Button01);

b2=(Button)findViewById(R.id.Button02);//通过findViewbyId方法获得ProgressBar实例progressBar=(ProgressBar)findViewById(R.id.ProgressBar01);//为按钮添加事件监听器

b1.setOnClickListener(newOnClickListener(){

publicvoidonClick(Viewv){//增加进度 progressBar.incrementProgressBy(1);

}

});

4.10进度条//为按钮添加事件监听器b2.setOnClickListener(newOnClickListener(){

publicvoidonClick(Viewv){//减少进度

progressBar.incrementProgressBy(-1);

}

});

}}4.11事件处理Android系统中引用Java中的事件处理机制，包括事件、事件源和事件监听器三个方面。事件可以是鼠标事件、键盘事件、触摸事件或者鼠标移动事件等;事件源是指产生时间的组件;事件监听器是组件产生事件时响应的接口。举例来说明三者的关系，现在高级轿车都有防盗功能，当车产生强烈震动时就会报警。在这里事件是震动，事件源是车，事件监听器是报警器。4.11.1事件处理机制

Java中的事件角色有三个。.eventobject:就是事件产生时具体的“事件”，用于listener的相应方法之中，作为参数，一般存在于listerner的方法之中。.eventsource:具体接受事件的实体，比如说，你单击一个button，那么button就是eventsource。.eventlistener:事件监听器，当有其对应的eventobject产生的时候，它就调用相应的方法进行处理。这种方式也被称为方法回调(callback)。4.11.2Android中的事件监听器在Android系统中常见的事件监听器有如下几种:·单击事件(View.OnClickListener):当用户触碰到某个组件或者方向键被按下时产生该事件，该事件的处理方法是onClick()..焦点事件(View.OnFocusChangeListener):组件得到或者失去焦点时产生该事件，事件处理方法是onFocusChange()..按键事件(View.OnKeyListener):用户按下或者释放设备上的某个按键时产生，事件处理方法是onKey().·触碰事件(View.OnTouchListener):设备具有触摸屏功能时，触碰屏幕产生该事件，事件处理方法是onTouch()·4.11.2Android中的事件监听器.创建上下文菜单事件(View.OnCreateContextMenuListener):创建上下文菜单时产生该事件，事件处理方法是onCreateContextMenu().要实现事件处理，有如下几个步骤。(1)创建事件监听器。

(2)给要响应事件的组件注册事件监听器。(3)在事件处理方法中编写实现代码。这里我们看一个用户登录的表单界面是如何来响应用户事件的。4.11.2Android中的事件监听器

//编辑文本框的焦点事件myEdit2.setOnFocusChangeListener(newOnFocusChangeListener(){publicvoidonFocusChange(Viewv,boolean

hasFocus){

Toast.makeText(getApplicationContext(),myEdit2.getText(),

Toast.LENGTH_LONG);}

});//多选框的选择事件cb1.setOnCheckedChangeListener(newOnCheckedChangeListener(){

publicvoidonCheckedChanged(CompoundButton

buttonView,

boolean

isChecked){

Toast.makeText(getApplicationContext(),cb1.isChecked()+"",Toast.LENGTH_LONG);}

});4.11.2Android中的事件监听器

//按钮的选择事件b1.setOnClickListener(newOnClickListener(){

publicvoidonClick(Viewv){

Toast.makeText(getApplicationContext(),b1.getText(),Toast.LENGTH_LONG);

}

4.12布局管理所谓布局就是组件在Activity中的呈现方式，即组件大小、间距和对齐方式等。Android提供了以下两种创建布局的方式:.在XML配置文件中声明:这种方式是将需要呈现的组件在配置文件中进行声明，在程序中通过setContentView(R.layout.main)方法将视图呈现在Activity中，通过findViewById方法获得组件实例(推荐)。

.在程序中通过“硬代码”直接实例化布局及其组件.4.12布局管理在Android中常见的布局方式有如下几种:.线性布局(LinearLayout):按照垂直或者水平方向布局组件。.帧布局(FrameLayout):组件从屏幕的左上角坐标布局组件。.表格布局(TabIeLayout):按照行列方式布局组件。.相对布局(RelativeLayout):相对其他组件的布局方式。.绝对布局(AbsoluteLayout):按照绝对坐标来布局组件。4.12.1线性布局线性布局是将子组件按照垂直或者水平方向来布局，方向控制由“android:orientation"属性来控制，属性值有垂直(vertical)和水平(horizontal)两种。另外一个常用属性是"android:gravity"，来控制左右上下对齐方式，其属性值有上(top)、下(bottom)、左(left)、右(right)。下面的实例是将几个TextView通过LinearLayout以不同的方向来布局。其中使用了LinearLayout外层垂直布局、内层上面水平布局和下面垂直布局。4.12.1线性布局

<?xmlversion="1.0"encoding="utf-8"?><LinearLayout

xmlns:android="http:///apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><LinearLayout

android:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1">

<TextView

android:text="red"android:gravity="center_horizontal"android:background="#aa0000"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>

4.12.1线性布局

<TextView

android:text="green"android:gravity="center_horizontal"android:background="#00aa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>

<TextView

android:text="blue"android:gravity="center_horizontal"android:background="#0000aa"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/><TextView

andr