第3章Android基础界面编程
Android程序开发主要分为三部分: 界面设计、代码流程控制和资源建设。代码和资源主要是由开发者进行编写和维护的，对于大部分用户来说是不关心的，展现在用户面前最直观的就是界面设计。作为一个程序设计者，必须首先考虑用户的体验，只有用户满意了开发的产品，应用才能推广，才有价值，因此界面设计尤为重要。
控件是Android项目开发的基本组成单位，通过使用组件可以高效地开发Android程序，所以熟练掌握控件的使用是进行Android程序开发的重要前提。本章对“购物商城”基本组件进行分析，认识常用基础控件和布局管理器的使用方法。通过对基础控件和布局管理器的综合运用实现“欢乐购商城”登录、注册、首页表格等页面。


本章要点
(1) 掌握文本显示框的功能和用法。
(2) 熟悉文本编辑框的常用属性。
(3) 掌握按钮的简单用法。
(4) 掌握图片的使用方法。
(5) 掌握线性布局的功能和用法。
(6) 熟悉表格布局的功能和用法。
(7) 掌握相对布局的功能和用法。
(8) 掌握网格布局的功能和用法。
(9) 掌握布局的嵌套使用。


视频详解


3．1基础View组件简介

“欢乐购商城”项目中每个页面中都运用了Android基础界面控件，本节运用基础界面控件实现“欢乐购商城”登录页面、注册页面。
分析： 登录页面整体采用垂直方向线性布局，从上往下摆放图片(ImageView)、文本编辑框(EditText)、按钮(Button)、文本显示框(TextView)基础控件，如图31所示。
注册页面整体采用垂直方向线性布局，从上往下摆放图片(ImageView)、文本编辑框(EditText)、按钮(Button)，如图32所示。






图31登录页面





图32注册页面



Android中所有的组件都继承于View类，View类代表的就是屏幕上的一块空白的矩形区域，该空白区域可用于绘画和事件处理。不同的界面组件，相当于对这个矩形区域做了一些处理，如文本显示框、按钮等。
View类有一个重要的子类: ViewGroup。ViewGroup类是所有布局类和容器组件的基类，它是一个不可见的容器，它里面还可以添加View组件或ViewGroup组件，主要用于定义它所包含的组件的排列方式，例如，网格排列或线性排列等。通过View和ViewGroup的组合使用，从而使得整个界面呈现一种层次结构。ViewGroup内包含的组件如图33所示。


图33ViewGroup组件的层次结构


Android中控制组件的显示有两种方式: 一种是通过XML布局文件来设置组件的属性进行控制; 另一种是通过Java代码调用相应的方法进行控制。这两种方式控制Android界面显示的效果是完全一样的。实际上，XML文件的属性与Java代码中方法之间存在着一一对应的关系。从Android API文档中View类的介绍中，可查看所有的属性与方法之间的对应关系，在此只列出一些常用的属性供参考，如表31所示。


表31View类的常见XML属性、对应方法及说明



XML属性对 应 方 法说明

android: alphasetAlpha(float)设置组件的透明度

android: backgroundsetBackgroundResource(int)设置组件的背景

android: clickablesetClickable(boolean)设置组件是否可以触发单击事件

android: focusablesetFocusable(boolean)设置组件是否可以得到焦点

android: idsetId(int)设置组件的唯一ID

android: minHeightsetMinimumHeight(int)设置组件的最小高度

android: minWidthsetMinimumWidth(int)设置组件的最小宽度

android: paddingsetPadding(int,int,int,int)在组件四边设置边距

android: scaleXsetScaleX(float)设置组件在X轴方向的缩放

android: visibilitysetVisibility(int)设置组件是否可见

几乎每个界面组件都需要设置android: layout_height、android: layout_width这两个属性，用于指定该组件的高度和宽度，主要有以下三种取值。
(1) fill_parent: 表示组件的高或宽与其父容器的高或宽相同。
(2) wrap_content: 表示组件的高或宽恰好能包裹内容，随着内容的变化而变化。
(3) match_parent: 该属性值与fill_parent完全相同，Android 2．2之后推荐使用match_parent代替fill_parent。
虽然两种方式都可以控制界面的显示，但是它们又各有优缺点。
(1) 完全使用Java代码来控制用户界面不仅烦琐，而且界面和代码相混合，不利于解耦、分工。
(2) 完全使用XML布局文件虽然方便、便捷，但灵活性不好，不能动态改变属性值。
因此，我们经常会混合使用这两种方式来控制界面，一般来说，习惯将一些变化小的、比较固定的、初始化的属性放在XML文件中管理，而对于那些需要动态变化的属性则交给Java代码控制。例如，可以在XML布局文件中设置文本显示框的高度和宽度以及初始时的显示文字，在代码中根据实际需要动态地改变显示的文字。


视频详解


3．1．1文本显示框TextView
TextView类直接继承于View类，主要用于在界面上显示文本信息，类似于一个文本显示器，从这个方面来理解，有点儿类似于Java编程中的JLable的用法，但是比JLable的功能更加强大，使用更加方便。TextView可以设置显示文本的字体大小、颜色、风格等属性，TextView的常见属性如表32所示。


表32TextView类的常见XML属性、对应方法及说明



XML属性对应方法说明

android: gravitysetGravity(int)设置文本的对齐方式

android: heightsetHeight(int)设置文本框的高度(以pixel为单位)

android: textsetText(CharSequence)设置文本的内容

android: textColorsetTextColor(int)设置文本的颜色

android: textSizesetTextSize(int,float)设置文本的大小

android: textStylesetTypeface(Typeface)设置文本的风格

android: typefacesetTypeface(Typeface)设置文本的字体

android: widthsetWidth(int)设置文本框的宽度(以pixel为单位)

Android: drawableLeftsetCompoundDrawablesWith
IntrinsicBounds(int，int，int，int)要绘制在文本左侧的可绘制对象

这些是文本显示控件都具有的功能。除此之外，Android中的TextView还具有自动识别文本中的各种链接、能够显示字符串中的HTML标签的格式。识别自动链接的属性为android: autoLink，该属性的值有以下几种。
(1) none: 不匹配任何格式，这是默认值。
(2) web: 只匹配网页，如果文本中有网页，网页会以超链接的形式显示。
(3) email: 只匹配电子邮箱，电子邮箱会以超链接的形式显示。
(4) phone: 只匹配电话号码，电话号码会以超链接的形式显示。
(5) map: 只匹配地图地址。
(6) all: 匹配以上所有。
当匹配时，相应部分会以超链接显示，单击超链接，会自动运行相关程序。例如，单击电话号码超链接会调用拨号程序，单击网页超链接会打开网页等。
而显示HTML标签格式，则需要通过Java代码来控制。首先为该文本框添加一个id属性，然后在onCreate()方法中，通过findViewById(R．id．***)获取该文本框，最后通过setText()方法来设置显示的内容。
【例31】使用TextView显示“欢迎使用《Android零基础入门到实战》”文本，其中，“《Android项目开发实战教程》”为蓝色字体。
注意: 本书代码中，右箭头所指内容为编者对读者的提示，实际编译时无须添加。
程序清单31: chart0301＼app＼src＼main＼res＼layout＼activity_main．xml


1<TextView

2android:id="@+id/myText"→为TextView添加id属性



3android:textSize="18sp"→字体大小设置为18sp

4android:layout_width="wrap_content"→组件宽度为内容包裹

5android:layout_height="wrap_content"→组件高度为内容包裹

6/>

程序清单32: chart0301＼app＼src＼main＼java＼com＼jxcia＼chart0301＼MainActivity．java


1TextView tv = (TextView) findViewById(R.id.myText);    //myText为id

2tv.setText(Html.fromHtml("欢迎使用<font color=blue>《Android项目开发实战教程》</font>"));

该代码的显示效果是: 《Android零基础入门到实战》这几个字为蓝色，其他字的颜色为布局文件中设置的颜色，如图34所示。


图34TextView实现效果




视频详解


3．1．2文本编辑框EditText
TextView的功能仅是用于显示信息而不能编辑，好的应用程序往往需要与用户进行交互，让用户进行输入信息。为此，Android中提供了EditText组件，EditText是TextView类的子类，与TextView具有很多相似之处。它们最大的区别在于，EditText允许用户编辑文本内容。使用EditText时，经常使用到的属性有以下几个。
(1) android: hint: 设置当文本框内容为空时，文本框内显示的提示信息，一旦输入内容，该提示信息立即消失，当删除所有输入的内容时，提示信息又会出现。
(2) android: password: 设置文本框是否为密码框，值为true或者false，设置为true时，输入的内容将会以点替代，但已不推荐使用了。
(3) android: inputType: 设置文本框接收值的类型，例如，只能是数字、电话号码等。
【例32】以“欢乐购商城”登录页面输入手机号编辑框为例，介绍文本编辑框使用方法，界面程序代码如下。
程序清单33: char0302＼app＼src＼main＼res＼layout＼activity_main．xml


1<EditText

2android:layout_width="match_parent"→组件宽度为填充父容器

3android:layout_height="40dp"→组件高度为40dp

4android:drawableLeft="@drawable/user_name_icon"→编辑框左侧设置图片

5android:drawablePadding="10dp"→图片内边距为10dp

6android:gravity="center_vertical"→编辑框内容垂直居中

7android:hint="请输入手机号"→提示内容

8android:paddingLeft="8dp"→编辑左侧内编辑为8dp

9android:singleLine="true"→单行输入



10android:textColor="#000000"→字体颜色为白色

11android:textColorHint="#a3a3a3"→提示字体颜色为灰色

12android:textSize="14sp" />→字体大小设置为14sp

程序运行效果如图35所示。


图35EditText运行效果




视频详解


3．1．3按钮Button
Button也是继承于TextView，功能非常单一，就是在界面中生成一个按钮，供用户单击。单击按钮后，会触发一个单击事件，开发人员针对该单击事件可以设计相应的事件处理; 从而实现与用户交互的功能。用户可以设置按钮的大小、显示文字以及背景等。当我们想把一张图片作为按钮时，有两种方法: 一种是将该图片作为Button的背景图片; 另一种是使用ImageButton按钮，将该图片作为ImageButton的android: src属性值即可。需注意的是，ImageButton按钮不能指定android: text属性，即使指定了，也不会显示任何文字。
【例33】以“欢乐购商城”登录页面“登录”按钮为例，介绍按钮使用方法，界面布局代码如下。
程序清单34: char0303＼app＼src＼main＼res＼layout＼activity_main．xml


1<Button

2android:layout_width="fill_parent"→组件宽度为填充父容器

3android:layout_height="40dp"→组件高度为40dp

4android:layout_gravity="center_horizontal"→组件对外水平居中

5android:layout_marginLeft="35dp"→组件左边外边距35dp

6android:layout_marginRight="35dp"→组件右边外边距35dp

7android:layout_marginTop="15dp"→组件顶部外边距15dp

8android:background="#6200EE"→背景为蓝紫色

9android:text="登 录"  →组件文字

10android:textColor="#FFFFFF"→字体颜色为白色

11android:textSize="18sp" />→字体大小18sp



图36按钮界面运行效果

程序运行效果如图36所示。



视频详解


3．1．4图片视图ImageView
ImageView(图片视图)的作用与TextView类似，TextView用于显示文字，ImageView则用于显示图片，既然是显示图片，那就要设置图片的来源，ImageView中有一个src属性用于指定图片的来源。显示图片还存在另外一个问题，就是当图片比ImageView的区域大的时候如何显示呢？在ImageView中有一个常用并且重要的属性scaleType，用于设置图片的缩放类型。该属性值主要包含以下几个。
fitCenter: 保持纵横比缩放图片，直到该图片能完全显示在ImageView中，缩放完成后将该图片放在ImageView的中央。
fitXY: 对图片横向、纵向独立缩放，使得该图片完全适应于该ImageView，图片的纵横比可能会改变。
centerCrop: 保持纵横比缩放图片，以使得图片能完全覆盖ImageView。
【例34】以“欢乐购商城”登录页面登录按钮为例，介绍按钮使用方法，界面布局代码如下。
程序清单35: char0304＼res＼layout＼activity_main．xml


1<ImageView

2android:layout_width="70dp"→组件宽度为70dp

3android:layout_height="70dp"→组件高度为70dp

4android:layout_gravity="center_horizontal"→组件对外水平居中

5android:layout_marginTop="70dp"→组件顶部外边距70dp

6android:scaleType="fitCenter"→图片缩放类型保持纵横比

7android:src="@drawable/head" />→引用图片地址



图37图片控件运行效果

程序运行效果如图37所示。


视频详解


3．1．5实战演练——登录页面
通过前面对基础界面控件TextView、EditText、Button和ImageView的介绍，可以初步实现“欢乐购商城”的登录页面。如图31所示，在“欢乐购商城”登录页面中整体采用垂直方向线性布局，从上往下摆放图片(ImageView)、文本编辑框(EditText)、按钮(Button)、文本显示框(TextView)基础控件，以下介绍登录界面具体实现过程。
在布局文件中多次用到@string/***作为android: text的属性值，表示引用R．java中string内部类的成员变量所代表的资源。这些常量值是在strings．xml文件中定义的。查看strings．xml文件的内容如下。
程序清单36: chart0305＼app＼src＼main＼res＼values＼strings．xml


1<resources>

2<string name="app_name">chart0205</string>

3<string name="inputname">请输入手机号</string>

4<string name="inputpassword">请输入密码</string>

5<string name="btnLogin">登 录</string>

6<string name="registerNow">立即注册</string>

7<string name="findPassword">找回密码？</string>

8</resources>

在布局文件中多次用到@color/***作为android: textColor的属性值，表示引用R．java中Color内部类的成员变量所代表的资源。这些常量值是在colors．xml文件中定义的。查看colors．xml文件的内容如下。

程序清单37: chart0305＼app＼src＼main＼res＼values＼colors．xml


1<resources>

2<color name="colorPrimary">#6200EE</color>

3<color name="colorPrimaryDark">#3700B3</color>

4<color name="colorAccent">#03DAC5</color>

5<color name="white">#FFFFFF</color>

6</resources>

其实在设置android: text和android: textColor属性时，可以直接将这些字符串常量赋值给该属性，但是建议不要这么做。因为一些字符串常量可能会在多处被使用，如果都在属性里写，不仅占用更多的内存，而且修改起来也比较麻烦，需要一个个进行修改; 另一方面，统一放在strings．xml和colors．xml文件中，日后如果要修改，只需要修改相应的资源文件就可以了，而不用去更改别的文件，可扩展性比较好。
登录页面主布局实现，代码如下。
程序清单38: char0305＼app＼src＼main＼res＼layout＼activity_main．xml


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

2xmlns:app="http://schemas.android.com/apk/res-auto"

3xmlns:tools="http://schemas.android.com/tools"

4android:layout_width="match_parent"

5android:layout_height="match_parent"

6android:background="@color/white"→背景引用颜色文件中白色

7android:orientation="vertical"→线性布局方向为垂直

8tools:context=".MainActivity">

9<ImageView

10android:layout_width="70dp"

11android:layout_height="70dp"

12android:layout_gravity="center_horizontal"→图片控件对外水平居中

13android:layout_marginTop="70dp"→图片控件顶部外边距70dp

14android:background="@drawable/defaultuser_icon" />

15<EditText

16android:layout_width="fill_parent"

17android:layout_height="40dp"

18android:layout_gravity="center_horizontal"→控件对外水平居中

19android:layout_marginLeft="35dp"

20android:layout_marginRight="35dp"

21android:layout_marginTop="35dp"

22android:drawableLeft="@drawable/user_name_icon"→引用图片地址

23android:drawablePadding="10dp"→图片内边距10dp

24android:gravity="center_vertical"→控件内容垂直居中

25android:hint="@string/inputname"→文字引用string.xml中文字地址

26android:paddingLeft="8dp"

27android:singleLine="true"→单行输入

28android:textColor="@color/white"

29android:textColorHint="#a3a3a3"→提示文字颜色为灰色

30android:textSize="14sp" />→字体大小为14sp




31<EditText

32android:layout_width="fill_parent"

33android:layout_height="40dp"

34android:layout_gravity="center_horizontal"

35android:layout_marginLeft="35dp"

36android:layout_marginRight="35dp"

37android:layout_marginTop="5dp"

38android:drawableLeft="@drawable/psw_icon"

39android:drawablePadding="10dp"

40android:hint="@string/inputpassword"→文字引用string.xml中文字地址

41android:inputType="textPassword"

42android:paddingLeft="8dp"

43android:singleLine="true"

44android:textColor="@color/white"

45android:textColorHint="#a3a3a3"

46android:textSize="14sp" />

47<Button

48android:layout_width="fill_parent"

49android:layout_height="40dp"

50android:layout_gravity="center_horizontal"→按钮对外水平居中

51android:layout_marginLeft="35dp"

52android:layout_marginRight="35dp"

53android:layout_marginTop="15dp"

54android:background="@color/colorPrimary"→背景引用颜色文件中颜色

55android:text="@string/btnLogin"→文字引用string.xml中文字地址

56android:textColor="@color/white"→字体颜色引用颜色文件中白色

57android:textSize="18sp" />

58<LinearLayout

59android:layout_width="fill_parent"

60android:layout_height="fill_parent"

61android:layout_marginLeft="35dp"

62android:layout_marginRight="35dp"

63android:layout_marginTop="8dp"

64android:gravity="center_horizontal"

65android:orientation="horizontal">→线性布局方向为水平

66<TextView

67android:layout_width="0dp"

68android:layout_height="wrap_content"

69android:layout_weight="1"→线性布局中权重设置为1

70android:gravity="center_horizontal"

71android:padding="8dp"

72android:text="@string/registerNow"→文字引用string.xml中文字地址

73android:textColor="@color/colorPrimary"→背景引用颜色文件中颜色

74android:textSize="14sp" />

75<TextView

76android:layout_width="0dp"

77android:layout_height="wrap_content"

78android:layout_weight="1"→线性布局中权重设置为1


79android:gravity="center_horizontal"

80android:padding="8dp"

81android:text="@string/findPassword"→文字引用string.xml中文字地址

82android:textColor="@color/colorPrimary"→背景引用颜色文件中颜色

83android:textSize="14sp" />

84</LinearLayout>

85</LinearLayout>

登录页面实现后，编辑框（如图38所示）与图31对比会发现用户名和密码编辑框未实现边框，其中边框需要自定义图片作为背景，具体实现将在4.1.2节中讲解。


图38登录页面实现效果




视频详解


3．2布局管理器

“欢乐购商城”项目中每个页面都使用了布局管理器，例如，在登录和注册页面中整体采用了线性布局。本节重点讲解布局管理器中的线性布局、表格布局、相对布局、层布局、网格布局。本节以实现“欢乐购商城”首页作为案例(不包括列表)，先以表格布局实现，然后采用线性布局和网格布局综合使用实现，如图39所示。同时对相对布局、层布局的布局管理器进行讲解，完成常用布局管理器的学习。


图39首页面表格布局



3.1节中学习了几种简单的界面组件，其中在登录页面实现中已经使用到了布局管理器线性布局，如果缺少布局管理器，组件排列杂乱，影响美观。本节将学习Android中提供的几种管理界面组件的布局管理器。
Android中的布局管理器本身也是一个界面组件，所有的布局管理器都是ViewGroup类的子类，都可以当作容器类来使用。因此，可以在一个布局管理器中嵌套其他布局管理器。Android中布局管理器可以根据运行平台来调整组件的大小，具有良好的平台无关性。Android中用得最多的布局主要有: 线性布局、表格布局、相对布局、层布局。


视频详解


3．2．1线性布局
线性布局是最常用也是最基础的布局方式。在前面的示例中，就使用到了线性布局，它用LinearLayout类表示。线性布局和Java编程中AWT编程里的FlowLayout有些相似，它们都会将容器里的所有组件一个挨着一个排列。
它提供了水平和垂直两种排列方向，通过android:orientation属性进行设置，默认为垂直排列。
(1) 当为水平方向时，不管组件的宽度是多少，整个布局只占一行，当组件宽度超过容器宽度时，超出的部分将不会显示。
(2) 当为垂直方向时，整个布局文件只有一列，每个组件占一行，不管该组件宽度有多小。
在线性布局中，除了设置高度和宽度外，主要设置如下属性。
(1) android:gravity: 设置布局管理器内组件的对齐方式，可以同时指定多种对齐方式的组合，多个属性之间用竖线隔开，但竖线前后不能出现空格。例如，bottom|center_horizontal代表出现在屏幕底部，而且水平居中。
(2) android:orientation: 设置布局管理器内组件的排列方向，可以设置为vertical(垂直排列)或horizontal(水平排列)。
(3) android:id: 用于给当前组件指定一个ID属性，在Java代码中可以应用该属性单独引用该组件。为组件指定ID属性后，在R．java文件中，会自动派生一个对应的属性。在Java代码中，可以通过findViewById()方法获取该属性。
(4) android:background: 用于为该组件设置背景，可以是背景图片，也可以是背景颜色。为组件指定背景图片时，可以将准备好的图片复制到目录下，然后使用下面的代码进行设置。


android:background="@drawable/background"


如果想指定背景颜色时，可以使用颜色值，例如，想要指定背景颜色为白色，可以
使用下面的代码。


android:background="#FFFFFF"


线性布局与AWT编程中FlowLayout的最明显的区别: 在FlowLayout中组件一个个地排列到边界就会自动从下一行重新开始; 在线性布局中如果一行的宽度或一列的高度超过了容器的宽度或高度，那么超出的部分将无法显示，如果希望超出的部分能够滚动显示，则需在外边包裹一个滚动组件，ScrollView(垂直滚动)或HorizontalScrollView(水平滚动)。
在使用LinearLayout时，子控件可以设置layout_weight。layout_weight的作用是设置子控件在LinearLayout的重要度(控件的大小比重)。如果在一个LinearLayout里面放置两个Button： Button1和Button2，Button1的layout_weight设置为1，Button2的layout_weight设置为2，且两个Button的layout_width都设置为fill_parent，则Button1占据屏幕宽度的三分之二，而Button2占据三分之一。如果两个Button的layout_width都设置成wrap_content，则情况刚好相反，Button1占三分之一，Button2占三分之二。
【例35】下面通过一个实例讲解线性布局管理使用方法，界面布局代码如下，程序运行效果如图310所示。


图310线性布局管理器实现效果


程序清单39: char0306＼app＼src＼main＼res＼layout＼activity_main．xml


1<ScrollView→垂直滚动条

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

2xmlns:app="http://schemas.android.com/apk/res-auto" 

3xmlns:tools="http://schemas.android.com/tools"

4android:layout_width="match_parent"

5android:layout_height="wrap_content"

6tools:context=".MainActivity">

7<LinearLayout

8android:layout_width="match_parent"

9android:layout_height="wrap_content"

10android:orientation="vertical">→线性布局方向为垂直

11<LinearLayout

12android:layout_width="match_parent"

13android:layout_height="130dp"

14android:orientation="horizontal">→线性布局方向为水平

15<TextView

16android:layout_width="wrap_content"

17android:layout_height="match_parent"

18android:gravity="center"→文本编辑框内部居中

19android:layout_weight="1"→权重比为1

20android:text="红色"

21android:textSize="25sp"

22android:background="#F00"/>→背景颜色为白色

23<TextView

24android:layout_width="wrap_content"

25android:layout_height="match_parent"

26android:layout_weight="2"→权重比为2

27android:gravity="center"→文本编辑框内部居中

28android:text="绿色"

29android:textSize="25sp"

30android:background="#0F0"/>→背景颜色为绿色

31<TextView

32android:layout_width="wrap_content"

33android:layout_height="match_parent"

34android:layout_weight="3"→权重比为3

35android:text="蓝色"

36android:gravity="center"→文本编辑框内部居中

37android:textSize="25sp"

38android:background="#00F"/>→背景颜色为蓝色

39</LinearLayout>

40<LinearLayout

41android:layout_width="match_parent"

42android:layout_height="wrap_content"

43android:gravity="center_horizontal" →线性布局内部水平居中

44android:orientation="vertical">→线性布局方向垂直


45<ImageView

46android:layout_width="150dp"

47android:layout_height="150dp"

48android:scaleType="fitCenter"→图片缩放格式保持纵横比，完全显示

49android:padding="3dp"→图片内边距3dp

50android:src="@drawable/a000"/>→引用图片地址




51<ImageView

52android:layout_width="150dp"

53android:layout_height="150dp"

54android:scaleType="fitCenter"→图片缩放格式保持纵横比，完全显示

55android:padding="3dp"→图片内边距3dp

56android:src="@drawable/a001"/>→引用图片地址

57<ImageView

58android:layout_width="150dp"

59android:layout_height="150dp"

60android:scaleType="fitCenter"→图片缩放格式保持纵横比，完全显示

61android:padding="3dp"→图片内边距3dp

62android:src="@drawable/a002"/>→引用图片地址

63<ImageView

64android:layout_width="150dp"

65android:layout_height="150dp"

66android:scaleType="fitCenter"→图片缩放格式保持纵横比，完全显示

67android:padding="3dp"→图片内边距3dp

68android:src="@drawable/a003"/>→引用图片地址

69<ImageView

70android:layout_width="150dp"

71android:layout_height="150dp"

72android:scaleType="fitCenter"→图片缩放格式保持纵横比，完全显示

73android:padding="3dp"→图片内边距3dp

74android:src="@drawable/a004"/>→引用图片地址

75</LinearLayout>

76</LinearLayout>

77</ScrollView>



视频详解


3．2．2表格布局
表格布局是指以行和列的形式来管理界面组件，由TableLayout类表示，不必明确声明包含几行几列，而通过添加TableRow来添加行，在TableRow中添加组件来添加列。
TableRow就是一个表格行，本身也是容器，可以不断地添加其他组件，每添加一个组件就是在该行中增加一列，如果直接向TableLayout中添加组件，而没有添加TableRow，那么该组件将会占用一行。
在表格布局中，每列的宽度都是一样的，列的宽度由该列中最宽的那个单元决定，整个表格布局的宽度则取决于父容器的宽度，默认总是占满父容器本身。
TableLayout继承了LinearLayout，因此它完全支持LinearLayout所支持的全部XML属性，另外，TableLayout还增加了自己所特有的属性。
(1) android:collapseColumns: 隐藏指定的列，其值为列所在的序号，从0开始，如果需要隐藏多列，可用逗号隔开这些序号。
(2) android:shrinkColumns: 收缩指定的列以适合屏幕，使整行能够完全显示，不会超出屏幕，用于当某一行的内容超过屏幕的宽度时，会使该列自动换行，其值为列所在的序号。如果没有该属性，则超出屏幕的部分会自动截取，不会显示。
(3) android:stretchColumns: 尽量把指定的列填充空白部分。该属性用于某一行的内容不足以填充整个屏幕，这样指定某一列的内容扩张以填满整个屏幕，其他列的宽度不变。如果某一列有多行，而每行的列数可能不相同，那么可扩展列的宽度是一致的，不会因为某一行有多余的空白而填充整行。也就是说，不管在哪一行，它的宽度都是相同的。
(4) android:layout_column: 控件在TableRow中所处的列。如果没有设置该属性，默认情况下，控件在一行中是一列挨着一列排列的。通过设置该属性，可以指定控件所在的列，这样就可以达到中间某一个列为空的效果。
(5) android:layout_span: 该控件所跨越的列数，即将多列合并为一列。
【例36】下面以“欢乐购商城”首页面商品分类图片按钮栏为例，介绍表格使用方法，界面布局代码如下，程序运行效果如图311所示。


图311表格布局管理器实现效果

程序清单310: char0307＼app＼src＼main＼res＼layout＼activity_main．xml


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

2xmlns:app="http://schemas.android.com/apk/res-auto"

3xmlns:tools="http://schemas.android.com/tools"

4android:layout_width="match_parent"

5android:layout_height="match_parent"

6android:orientation="vertical"→线性布局垂直方向

7tools:context=".MainActivity">

8<ImageView

9android:layout_width="match_parent"

10android:layout_height="150dp"

11android:scaleType="centerCrop"→图片缩放格式保持纵横比，覆盖控件

12android:src="@drawable/jhs" />→引用图片地址

13<TableLayout

14android:layout_gravity="center_horizontal"→表格布局对外水平居中摆放




15android:layout_width="wrap_content"

16android:layout_height="wrap_content"

17android:gravity="center">→组件内部居中显示

18<TableRow>→添加一行

19<ImageView

20android:layout_width="73dp"

21android:layout_height="73dp"

22android:clickable="true"→可单击

23android:src="@drawable/a" />→引用图片地址

24<ImageView

25android:layout_width="73dp"

26android:layout_height="73dp"

27android:src="@drawable/b" />→引用图片地址

28<ImageView

29android:layout_width="73dp"

30android:layout_height="73dp"

31android:src="@drawable/c" />→引用图片地址

32<ImageView

33android:layout_width="73dp"

34android:layout_height="73dp"

35android:src="@drawable/d" />→引用图片地址

36<ImageView

37android:layout_width="73dp"

38android:layout_height="73dp"

39android:src="@drawable/e" />→引用图片地址

40</TableRow>

41<TableRow>→添加一行

42<ImageView

43android:layout_width="73dp"

44android:layout_height="73dp"

45android:src="@drawable/f" />→引用图片地址

46<ImageView

47android:layout_width="73dp"

48android:layout_height="73dp"

49android:src="@drawable/g" />→引用图片地址

50<ImageView

51android:layout_width="73dp"

52android:layout_height="73dp"

53android:src="@drawable/h" />→引用图片地址

54<ImageView

55android:layout_width="73dp"

56android:layout_height="73dp"

57android:src="@drawable/i" />→引用图片地址

58<ImageView

59android:layout_width="73dp"

60android:layout_height="73dp"

61android:src="@drawable/k" />→引用图片地址

62</TableRow>

63</TableLayout>

64</LinearLayout>



视频详解


3．2．3相对布局
相对布局，顾名思义就是相对于某个组件的位置，由RelativeLayout类表示，这种布局的关键是找到一个合适的参照物，如果甲组件的位置需要根据乙组件的位置来确定，那么要求先定义乙组件，再定义甲组件。
在相对布局中，每个组件的位置可通过它相对于某个组件的方位以及对齐方式来确定，因此相对布局中常见的属性如表33所示。由于父容器是确定的，所以与父容器方位与对齐的关系取值为true或false。


表33相对布局中常用属性设置



属性说明

android: layout_centerHorizontal设置该组件是否位于父容器的水平居中位置

android: layout_centerVertical设置该组件是否位于父容器的垂直居中位置

android: layout_centerInParent设置该组件是否位于父容器的正中央位置

android: layout_alignParentTop设置该组件是否与父容器顶端对齐

android: layout_alignParentBottom设置该组件是否与父容器底端对齐

android: layout_ alignParentLeft设置该组件是否与父容器左边对齐

android: layout_ alignParentRight设置该组件是否与父容器右边对齐

android: layout_toRightOf指定该组件位于给定的ID组件的右侧

android: layout_toLeftOf指定该组件位于给定的ID组件的左侧

android: layout_above指定该组件位于给定的ID组件的上方

android: layout_below指定该组件位于给定的ID组件的下方

android: layout_alignTop指定该组件与给定的ID组件的上边界对齐

android: layout_ alignBottom指定该组件与给定的ID组件的下边界对齐

android: layout_ alignLeft指定该组件与给定的ID组件的左边界对齐

android: layout_ alignRight指定该组件与给定的ID组件的右边界对齐

【例37】在智能手机中，当系统中有软件更新时，经常会显示提示软件更新页面。本实例使用相对布局实现一个显示软件更新提示的界面，提示文字相对于父容器居中，“以后再说”按钮相对于提示文字右对齐、底部方向，“现在更新”按钮相对于“以后再说”按钮底部对齐、左部方向。界面布局代码如下，程序运行效果如图312所示。


图312相对布局管理器实现效果


程序清单311: char0308＼app＼src＼main＼res＼layout＼activity_main．xml


1<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

2xmlns:app="http://schemas.android.com/apk/res-auto"

3xmlns:tools="http://schemas.android.com/tools"

4android:layout_width="match_parent"

5android:layout_height="match_parent"

6tools:context=".MainActivity">→线性布局垂直方向

7<TextView

8android:id="@+id/text"

9android:layout_width="wrap_content"

10android:layout_height="wrap_content"

11android:textSize="20sp"→图片缩放格式保持纵横比，覆盖控件

12android:text="发现购物商城新的版本，您现在要更新吗？"→引用图片地址

13android:layout_centerInParent="true"/>

14<Button→表格布局对外水平居中摆放

15android:text="现在更新"

16android:id="@+id/button1"

17android:layout_width="wrap_content"→组件内部居中显示

18android:layout_height="wrap_content"→添加一行

19android:layout_below="@id/text"

20android:layout_toLeftOf="@id/button2"/>

21<Button

22android:text="以后再说"→可单击

23android:id="@+id/button2"→引用图片地址

24android:layout_width="wrap_content"

25android:layout_height="wrap_content"

26android:layout_alignRight="@id/text"

27android:layout_below="@id/text"/>→引用图片地址

28</RelativeLayout>



视频详解


3．2．4层布局
层布局也叫帧布局，由FrameLayout类表示。其每个组件占据一层，后面添加的层会覆盖前面的层，后面的组件会叠放在先前的组件之上。如果后面组件大于前面的组件，那么前面的组件将会完全被覆盖，不可见; 如果后面组件无法完全覆盖前面的组件，则未覆盖部分显示先前的组件。该布局在开发中设计地图时经常用到，因为是按层次方式布局，需要实现层面显示的样式时就可以采用这种布局方式，比如要实现一个类似百度地图的布局，我们移动的标志是在一个图层的上面。
【例38】通过实例讲解Android程序中使用层布局管理器，界面布局代码如下。
程序清单312: char0309＼app＼src＼main＼res＼layout＼activity_main．xml


1<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

2xmlns:app="http://schemas.android.com/apk/res-auto"

3xmlns:tools="http://schemas.android.com/tools"

4android:layout_width="match_parent"

5android:layout_height="match_parent"





6tools:context=".MainActivity">

7<TextView

8android:layout_width="300dp"→控件宽度为300dp

9android:layout_height="300dp"→控件高度为300dp

10android:background="#f00"→背景颜色为红色

11android:layout_gravity="center"→控件对外水平居中摆放

12/>

13<TextView

14android:layout_width="200dp"→控件宽度为200dp

15android:layout_height="200dp"→控件高度为200dp

16android:background="#0f0"→背景颜色为绿色

17android:layout_gravity="center"→控件对外水平居中摆放

18/>

19<TextView

20android:layout_width="100dp"→控件宽度为100dp

21android:layout_height="100dp"→控件高度为100dp

22android:background="#00f"→背景颜色为蓝色

23android:layout_gravity="center"→控件对外水平居中摆放

24/>

25<TextView

26android:layout_width="50dp"→控件宽度为50dp

27android:layout_height="50dp"→控件高度为50dp

28android:background="#fff"→背景颜色为白色

29android:layout_gravity="center"→控件对外水平居中摆放

30/>

31<TextView

32android:layout_width="20dp"→控件宽度为20dp

33android:layout_height="20dp"→控件高度为20dp

34android:background="#000"→背景颜色为黑色

35android:layout_gravity="center"→控件对外水平居中摆放

36/>

37</FrameLayout >



图313层布局管理器实现效果

程序运行效果如图313所示。


视频详解


3．2．5网格布局
网格布局由GridLayout代表，是Android 4．0新增的布局管理器，因此需要在Android 4．0之后的版本中才能使用该布局管理器。如果希望在更早的Android平台上使用该布局管理器，则需要导入相应的支撑库。GridLayout的作用类似于HTML中的table标签，它把整个容器划分成若干行和若干列个网格，每个网格可以放置一个组件。除此之外，也可以设置一个组件横跨多个列、一个组件纵跨多个行。网格布局和TableLayout(表格布局)有点儿类似，不过它功能更多，使用更加方便，具有以下优势: 
(1) 可以自己设置布局中组件的排列方式。
(2) 可以自定义网格布局有多少行,多少列。
(3) 可以直接设置组件位于某行某列。
(4) 可以设置组件横跨几行或者几列。


视频详解


3．2．6项目实战——首页布局
在讲解表格布局时，以“欢乐购商城”首页面商品分类图片按钮栏为例进行实现，现对表格布局实现案例使用网格布局进行优化，把表格布局替换成网格布局，界面布局代码如下，程序运行效果如图311所示。
程序清单313: char0310＼app＼src＼main＼res＼layout＼activity_main．xml


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

2xmlns:app="http://schemas.android.com/apk/res-auto"

3xmlns:tools="http://schemas.android.com/tools"

4android:layout_width="match_parent"

5android:layout_height="match_parent"

6android:orientation="vertical"→线性布局垂直方向

7tools:context=".MainActivity">

8<ImageView

9android:layout_width="match_parent"

10android:layout_height="150dp"

11android:scaleType="centerCrop"→图片缩放格式保持纵横比，覆盖控件

12android:src="@drawable/jhs" />→引用图片地址

13<GridLayout

14android:layout_gravity="center_horizontal"→网格布局对外水平居中摆放

15android:layout_width="wrap_content"

16android:layout_height="wrap_content"

17android:gravity="center"→组件内部居中显示

18android:columnCount="5"→网格布局设置5列

19android:orientation="horizontal"→控件水平摆放

20android:rowCount="2">→网格布局设置2行

21<ImageView

22android:layout_width="73dp"→可单击

23android:layout_height="73dp"→引用图片地址

24android:clickable="true"

25android:src="@drawable/a" />

26<ImageView

27android:layout_width="73dp"→引用图片地址

28android:layout_height="73dp"

29android:src="@drawable/b" />

30<ImageView





31android:layout_width="73dp"→引用图片地址

32android:layout_height="73dp"

33android:src="@drawable/c" />

34<ImageView

35android:layout_width="73dp"→引用图片地址

36android:layout_height="73dp"

37android:src="@drawable/d" />

38<ImageView

39android:layout_width="73dp"→引用图片地址

40android:layout_height="73dp"

41android:src="@drawable/e" />→添加一行

42<ImageView

43android:layout_width="73dp"

44android:layout_height="73dp"

45android:src="@drawable/f" />→引用图片地址

46<ImageView

47android:layout_width="73dp"

48android:layout_height="73dp"

49android:src="@drawable/g" />→引用图片地址

50<ImageView

51android:layout_width="73dp"

52android:layout_height="73dp"

53android:src="@drawable/h" />→引用图片地址

54<ImageView

55android:layout_width="73dp"

56android:layout_height="73dp"

57android:src="@drawable/i" />→引用图片地址

58<ImageView

59android:layout_width="73dp"

60android:layout_height="73dp"

61android:src="@drawable/k" />→引用图片地址

62</GridLayout>

63</LinearLayout>

本章小结
本章围绕“欢乐购商城”项目登录页面、注册页面和首页面商品分类栏引入Android基础界面控件和布局管理器讲解。详细介绍了几种最基本的界面组件的功能和常用属性，包括文本显示框、文本编辑框和按钮等，并通过实现登录页面案例演示了基本界面控件具体使用用法。为了使这些组件排列美观，继续学习了Android中几种常见的布局管理器，包括线性布局、表格布局、相对布局、层布局和网格布局，它们各有优缺点。线性布局方便，需使用的属性较少，但不够灵活; 表格布局中通过TableRow添加行，每列的宽度一致; 相对布局则通过提供一个参照物来准确定义各个控件的具体位置，通常在一个实例中会用到多种布局，把各种布局结合起来达到所要的界面效果。网格布局相对表格布局使用更加方便，只需要设置行、列、摆放方向就可以控制控件摆放。
自测习题
1． 下列（）可作EditText编辑框的提示信息。

A． android:inputType
B． android:text
C． android:digits
D． android:hint
2． 为下面控件添加android:text="Hello"属性，运行时无法显示文字的控件是()。
A． Button
B． EditText
C． ImageButton
D． TextView
3． 下列选项中，前后两个类不存在继承关系的是()。
A． TextView、EditText
B． TextView、Button
C． Button、ImageButton
D． ImageView、ImageButton
4． 假设手机屏幕宽度为400px，现采取水平线性布局放置5个按钮，设定每个按钮的宽度为100px，那么该程序运行时，界面显示效果为()。
A． 自动添加水平滚动条，拖动滚动条可查看5个按钮
B． 只可以看到4个按钮，超出屏幕宽度部分无法显示
C． 按钮宽度自动缩小，可看到5个按钮
D． 程序运行出错，无法显示
5． 表格布局中，设置某一列是可扩展的正确的做法是()。
A． 设置TableLayout的属性: android:stretchColumns="x"，x表示列的序号
B． 设置TableLayout的属性: android:shrinkColumns="x"，x表示列的序号
C． 设置具体列的属性: android:stretchable="true"; 
D． 设置具体列的属性: android:shrinkable="true"; 
6． 相对布局中，设置以下属性时，属性值只能为true或false的是()。
A． android:layout_below
B． android:layout_alignParentLeft
C． android:layout_alignBottom
D． android:layout_toRightOf
7． 布局文件中有一个按钮(Button)，如果要让该按钮在其父容器中居中显示，正确的设置是()。
A． 设置按钮的属性: android: layout_gravity="center"
B． 设置按钮的属性: android: gravity="center"
C． 设置按钮父容器的属性: android: layout_gravity="center"
D． 设置按钮父容器的属性: android: gravity="center"
8． 根据所学的相对布局的知识，设计出如图314所示界面，要求在文本编辑框内只能输入数字，并且输入的内容会以“密码隐藏”的形式显示。

9． 运用所学知识，实现“欢乐购商城”注册页面。



图314相对布局实现输入框