第二章Android基本用户界面.docx

第二章Android基本用户界面.docx

《第二章Android基本用户界面.docx》由会员分享，可在线阅读，更多相关《第二章Android基本用户界面.docx（27页珍藏版）》请在冰豆网上搜索。

第二章Android基本用户界面

第二章Android基本用户界面

2.1常用组件

程序员开发的游戏以及应用都是运行在Android系统上的程序，这类应用程序跟用户的接触就是通过界面来完成的。

可见用户界面对于开发者来说是至关重要的一部分，本节我们就来学习用户界面的部分常用基本组件。

Android当中的大部分UI组件都是位于android.view包和android.widget包当中，本节所介绍的常用组件都是位于android.widget包中的。

2.1.1TextView文本框

TextView直接继承了View类，是用于在界面上显示文本的组件。

它是不允许编辑的，在第一章我们创建的HelloAndroid项目当中，我们在res—>layout—>main.xml文件中就能见到有TextView组件。

实例TextView

a.创建一个名为TestTextView的新项目。

b.打开main.xml布局文件，在代码当中添加如下代码。

本段代码中13-21行是我们所添加的一个TextView

第14-15行：

定义了该组件的宽和高

第16行：

设置了该文本框显示的文本内容

第17行：

设置了文本的字体大小

第18行：

设置文本的颜色

第19行：

设置了文本是否一行显示，如果选择true，那么文本内容多的情况下会以省略号显示显示不完的内容。

运行出来的结果如下图。

我可以到API当中查阅到TextView这个类的XMLAttributes属性，上述实例当中只是简单的列举和使用了部分的属性设置。

如果需要设置更多的属性，我们可以到API当中来查阅。

部分属性介绍，如下表所示。

XML属性

相关方法

描述说明

android:

autoLink

setAutoLinkMask（int）

将符合指定格式的文本转换为可单击的超链接

android:

cursorVisible

setCursorVisible（boolean）

文本框光标是否可见

android:

drawableBottom

setCompoundDrawablesWithIntrinsicBounds（int,int,int,int）

文本框内文本的底部绘制指定图像

android:

drawableLeft

setCompoundDrawablesWithIntrinsicBounds（int,int,int,int）

文本框内文本的左边绘制指定图像

android:

drawablePadding

setCompoundDrawablePadding（int）

文本框内文本与图像之间的间距

android:

drawableRight

setCompoundDrawablesWithIntrinsicBounds（int,int,int,int）

文本框内文本的右边绘制指定图像

android:

drawableTop

setCompoundDrawablesWithIntrinsicBounds（int,int,int,int）

文本框内文本的顶部绘制指定图像

android:

ellipsize

setEllipsize（TextUtils.TruncateAt）

设置文本框的内容超过文本框长度时处理文本内容的方式

android:

gravity

setGravity（int）

设置文本框对齐方式

android:

hint

setHint（int）

文本框默认显示的提示文本

android:

height

setHeight（int）

设置文本框的高度

android:

password

setTransformationMethod

设置文本框为密码框

android:

phoneNumber

setKeyListener（KeyListener）

设置文本框只显示电话号码

android:

selectAllOnFocus

setSelectAllOnFocus（boolean）

设置当文本框获得焦点时是否选中所有文本

android:

singleLine

setTransformationMethod

设置文本框是否为单行模式

android:

text

setText（CharSequence,TextView.BufferType）

设置文本框内容

android:

textColor

setTextColor（int）

设置文本颜色

android:

textSize

setTextSize（int,float）

设置文本的字体大小

android:

width

setWidth（int）

设置文本框宽度

2.1.2EditText编辑框

EditText是一个可编辑的文本框，它是TextView的子类，与它父类的区别就在于Android关闭了TextView的文字编辑功能，而EditText允许用户编辑文本框的内容。

实例EditText

1.创建一个名为TestEditText的项目。

2.打开string.xml文件，代码添加如下。

在5-7行中添加了三个字符串变量。

在string.xml文件当中添加string的好处是便于代码的修改和移植，如果需要更换内容或者更换语言，只需要直接在string.xml当中修改，而不需要去修改代码。

3.打开main.xml文件，代码添加如下。

第7-11行：

是系统生成的一个TextView组件，我们在第10行，将该文本框的内容修改为text这个字符串。

第12-20行：

自定义的EditText。

第16行：

为该EditText组件加上了id，该id将在R．java文件中自动添加。

第17行：

为EditText设置了默认显示的提示文本。

第18行：

设置了文本框获取到焦点时，自动选中所有文本内容。

第22-30行：

自定义的第二个EditText。

第28行：

设定了改文本框为密码框。

2.1.3Button按钮

Button继承了TextView。

Button的功能很简单，就是在界面上生成一个按钮，该按钮可以供用户单击，当用户单击按钮时，按钮会触发一个OnClick事件。

关于OnClick事件编程，会在2.3事件处理当中具体讲解。

在界面上添加一个按钮，跟上述当中的组件类似。

、

实例Button

1.创建一个名为TestButton的项目。

2.打开string.xml文件，添加按钮文字的字符串。

3.打开main.xml文件，添加一个Button组件。

在main.xml文件当中添加两个Button按钮。

第一个Button是最简单的。

第二个Button当中我们给它设定了id、文本颜色和字体大小，还设置了background属性，该属性可以设置颜色也可以入24行设置一副具体的图片作为背景。

Android当中，图片按钮有单独的ImageButton，如果需要用到图片的按钮可以查阅API使用。

类似Button的编写方法。

运行结果如下。

2.1.4RadioButton单选按钮和RadioGroup

RadioButton是用户界面最普通和常用的组件，RadioButton继承了Button类，

因此可以直接使用Button类的属性和方法。

RadioButton是单选按钮，所以RadioButton通常与RadioGroup一起使用，用于定义一组单选按钮。

RadioButton实例：

1.创建一个名为TestRadioButton的项目。

2.打开string.xml文件，添加如下。

3.打开main.xml文件，添加如下。

第9行：

为整个RadioGroup添加布局对齐方式。

运行结果如下图。

2.1.5CheckBox复选框

CheckBox也是Button的子类。

它也可以使用Button类的属性和方法。

它与RadioButton的不同之处就是它是一个复选文本框。

CheckBox实例：

1.创建一个名为TestCheckBox的项目。

2.打开string.xml文件，添加代码如下。

3.打开main.xml文件，添加代码如下。

4.运行结果如下图。

上面所有介绍的组件当中，只是Android常用组件的部分。

常用的控件还有ImageView、ImageButton、ToggleButton、AnalogClock、DigitalClock等。

这些控件的使用方法基本相同。

Android当中组件的使用方法除了上述的在xml当中配置，另一种就是在java应用程序当中直接的调用。

在游戏的开发过程当中，很少使用在XML中配置的方法，一般都是源代码当中直接使用。

而在源代码中直接调用的方法，在游戏界面的章节进行介绍。

2.2布局管理器

上面的章节当中介绍了很多组件，为了更好的管理Android当中的各个组件位置。

Android提供了五种布局模式，开发人员可以通过对这几种布局模式进行组合构造出各种需要的用户界面。

通过使用布局管理器也可以让编写出的Android应用图形界面具有良好的平台无关性。

Android当中的布局管理器本身就是一个UI组件，大部分位于android.widget包中，所有布局管理器都是android.view.ViewGroup的子类，所有的布局都可以作为容器类使用，因此可以通过调用addView（）向布局管理器当中添加组件。

但实际上，我们可以用一个布局管理器嵌套到其他布局管理器当中，因为布局管理器也继承了View，也可以作为普通UI组件来使用。

下面将对这五种布局管理器进行详细的讲解。

2.2.1LinearLayout

线性布局（LinearLayout）是Android当中最简单的布局方式，它分水平和垂直两

种排列方式，但需要注意的是Android当中的线性布局是不会换行的。

当组件排到屏幕之外，那么屏幕外的组件将不会被显示出来。

下表列出了LinearLayout常用的xml属性及相关方法的说明。

XML属性

相关方法

描述说明

android:

gravity

setGravity（int）

设置布局管理器内组件的对齐方式

android:

orientation

setOrientation（int）

设置布局管理器内组件为水平或者垂直排列

注意：

android:

gravity属性可以用|运算符填写，但运算符前后不能有空格。

例如有五个Button的线性布局XML文件。

实例LinearLayout。

1.创建一个名为TestLinearLayout的项目。

2.打开string.xml文件。

设置如下内容。

3.打开main.xml文件。

代码编写如下。

4.运行的结果如下。

如果将XML文件中的orientation属性值改为"horizontal"，gravity属性值改为"top"那么运行处的结果就如下图。

开发者可以根据自己的需要选择不同的对齐和排列方式。

2.2.2TableLayout

表格布局（TableLayout）。

表格布局采用行列的形式来管理UI组件。

行列是通过在TableLayout当中添加TableRow和其他组件来控制的。

常见的是在TableLayout中添加TableRow也就是一个表格行。

TableRow也是容器，因此也可以在TableRow当中再添加组件，在TableRow当中每添加一个组件就相当于添加一列。

TableLayout中常用的xml属性及相关方法说明。

XML属性

相关方法

描述说明

android:

collapseColumns

setColumnCollapsed（int,boolean）

设置需要被隐藏的列序号，如有多个用逗号区隔

android:

shrinkColumns

setShrinkAllColumns（boolean）

设置允许收缩的列序号，如有多个用逗号区隔

android:

stretchColumns

setStretchAllColumns（boolean）

设置允许拉升的列序号，如有多个用逗号区隔

实例TableLayout：

1.创建一个名为TestTableLayout的项目。

2.打开string.xml文件，添加字符串量。

3.打开main.xml文件，添加如下内容。

从main.xml文件中不难发现，TableLayout是嵌套在LinearLayout当中的。

在TableLayout当中添加了两个TableRow也就是两行，第一个TableRow中添加了四个TextView也就是四列，第二个TableRow中添加了三个Button也就是三列。

在第十行我们设置了第二列为允许被收缩的。

第十一行我们设置了第三列为允许被拉伸的。

2.2.3RelativeLayout

相对布局（RelativeLayout）。

相对布局是一种参照其它组件位置来设定相对位置的布局方式。

相对布局的XML属性及方法说明。

XML属性

相关方法

描述说明

android:

gravity

setGravity（int）

设置该布局内组件的对齐方式

android:

ignoreGravity

setIgnoreGravity（int）

设置哪个组件不受gravity影响

由于相对布局是设置各个自组建的相对位置，所以RelativeLayout提供了一个内部类：

RelativeLayout.LayoutParams来提供相应的XML属性控制和设置RelativeLayout布局容器当中各个组件的布局分布。

RelativeLayout.LayoutParams的XML属性

android:

layout_above

设置该子组件位于给定ID组件的上方

android:

layout_alignBottom

设置该子组件的底部与给定ID组件的底部对齐

android:

layout_alignLeft

设置该子组件的左边与给定ID组件的左边对齐

android:

layout_alignParentBottom

设置该子组件是否与布局容器底端对齐

android:

layout_alignParentLeft

设置该子组件是否与布局容器左边对齐

android:

layout_alignParentRight

设置该子组件是否与布局容器右边对齐

android:

layout_alignParentTop

设置该子组件是否与布局容器顶端对齐

android:

layout_alignRight

设置该子组件的右边与给定ID组件的右边对齐

android:

layout_alignTop

设置该子组件的顶部与给定ID组件的顶部对齐

android:

layout_below

设置该子组件位于给定ID组件的下方

android:

layout_centerHorizontal

设置该自组建是否位于布局容器的水平中间位置

android:

layout_centerInParent

设置该自组建是否位于布局容器的中间位置

android:

layout_centerVertical

设置该自组建是否位于布局容器的垂直中间位置

android:

layout_toLeftOf

设置该子组件位于给定ID组件的左侧

android:

layout_toRightOf

设置该子组件位于给定ID组件的右侧

除上述表格当中介绍的的属性之外，由于RelativeLayout.LayoutParams继承自android.view.ViewGroup.MarginLayoutParams，所以RelativeLayout布局容器中组件也可以指定android.view.ViewGroup.MarginLayoutParams中所支持的XML属性。

实例RelativeLayout。

1.创建名为TestRelativeLayout的项目。

2.打开string.xml，设置相应string内容。

3.打开main.xml。

编写代码如下。

设置的布局方式就是RelativeLayout，没有布局的嵌套。

运行结果如下图。

2.2.4FrameLayout

帧布局（FrameLayout）。

帧布局中每个组件就称为一帧。

每帧都会根据gravity属性对齐到对应的位置。

FrameLayout当中常用的XML属性及说明。

XML属性

相关方法

描述说明

android:

foreground

setForeground（Drawable）

设置该帧布局容器的前置图片

android:

foregroundGravity

setForegroundGravity（int）

设置前置图片的gravity属性

实例FrameLayout。

1.创建一个名为TestFrameLayout的项目。

2.打开main.xml文件，编写代码内容如下。

在该实例当中，添加了五个ImageView组件，每个ImageView组件添加的图片资源都是Android自带icon图片。

分别把这五个帧设置了不同的gravity属性，对齐到不同的位置。

运行结果如图。

2.2.5AbsoluteLayout

绝对布局（AbsoluteLayout）又可以称为坐标布局。

绝对布局是绝对自由的一种布局方式，程序员可以把组件设置到屏幕的制定X,Y坐标位置。

相对于其它的布局来说绝对布局能精准的确定组件的位置，但就移植来说却比其它的布局方式要繁琐。

绝对布局当中，设置组件的X,Y位置可以使用几种不同的单位，这里就对这些单位做一些简单的描述。

程序员开发过程当中根据自己的需求选择不同的单位。

px:

像素单位，每个像素对应屏幕上的一个点。

dp:

deviceindependentpixels，设备独立像素是基于屏幕密度的抽象单位。

在没英寸160点的显示器上，1dp=1px。

但换算会随着屏幕密度的改变而改变。

sp:

scaledpixels比例像素，主要用于处理字体的大小。

in：

英寸。

mm:

毫米。

pt:

磅1/72英寸。

实例AbsoluteLayout：

1.创建名为TestAbsoluteLayout的项目。

2.打开string.xml文件，编写代码如下。

3.打开main.xml文件，编写代码如下。

实例当中实现了一个登录界面。

运行结果如下图。

2.3事件处理

用户在应用程序界面上执行操作时，比如按下一个按钮，此时应用程序应该为用户的动作做相应的响应和操作，而动作的响应以及对应操作的代码编程就是通过事件处理来完成的。

本节介绍的是简单的基于监听器的事件处理。

如果具有AWT或者Swing事件处理编程经验的程序员可以根据以往经验直接编写，非常类似。

下面用实例来了解事件处理的具体开发步骤。

1.创建一个名为Sample的项目。

2.打开main.xml文件，编写代码如下。

在布局文件中，添加了一个普通按钮和一个开关按钮，分别给每个按钮加上了ID。

3.打开src中的SampleActivity.java源代码文件，编写内容如下。

按钮的单击事件必须实现View.OnClickListener接口。

该接口有一个onClick方法需要被实现，onClick方法也就是单击事件产生的时候调用，View对象即为产生单击事件的组件对象。

在代码当中采用的是内部类作为事件监听器类。

当然代码编写的过程当中也可以让Activity类来实现该接口让Activitu本身作为监听器类，还可以编写一个外部类作为事件监听器类。

使用哪种开发者可以根据自己的编程习惯来选择。

另外代码当中有使用到Toast对象。

Toast是一个显示提示信息框，提示信息后它过一段时间就会自动的消失。

在android.widget包当中，可以通过API的查阅来了解Toast类。

4.运行结果如下图。

2.4基本用户界面实例

下面通过实例来看看如何制作一个用户的登录注册界面。

1.创建一个名为TestAndroid的项目。

2.打开string.xml文件，添加字符串如下。

3.打开main.xml文件，编写代码如下。

4.运行结果如下图。

2.5本章小结

本章节介绍到了Android应用的用户界面，包括有常用的常用的现实控件，常用的布局管理器以及简单的事件处理。