Android移动应用开发（微课视频版）课件 第4章 Android GUI开发

第4章

AndroidGUI开发CONTENTS目录02

常用Widget组件01

布局03

Menu04

Toast和Notification05

综合实例-学生信息与成绩登记系统布局01Android系统提供了丰富的可视化界面组件，包括菜单、按钮、对话框等。Android系统采用Java程序设计中的UI设计思想，其中包括事件处理机制及布局管理方式。Android系统中的所有UI类都是建立在View这个类的基础之上的，所有View的子类称为Widget（小挂件），通常一个Widget就是一个能够在界面上显示的组件。但是View类有一个特殊的子类ViewGroup，ViewGroup是一个容器，用于装载其他的ViewGroup和View类。本章将详细介绍Activity的用户界面UI设计、用户界面UI组件及其事件处理的相关知识。在这里简单介绍一下Android系统常用的尺寸类型的单位。

像素：缩写为px。表示屏幕上的物理像素。

磅：points，缩写为pt。1pt等于1英寸的1/72，常用于印刷业。

放大像素：sp。主要用于字体的显示，Android默认使用sp作为字号单位。

密度独立像素dp：也缩写为dip。该尺寸使用160dp的屏幕作为参考，然后用该屏幕映射到实际屏幕，在不同分辨率的屏幕上会有相应的缩放效果以适用于不同分辨率的屏幕。若用px的话，320px占满HVGA的宽度，到WVGA上就只能占一半不到的屏幕了，那一定不是你想要的。

毫米：mm。布局AndroidSDK定义了多种布局方式以方便用户设计UI。各种布局方式均为ViewGroup类的子类，结构如图4.3所示。本节将对FrameLayout（单帧布局）、LinearLayout（线性布局）、AbsoluteLayout（绝对布局）、RelativeLayout（相对布局）和TableLayout（表格布局）进行简单的介绍。图4.3

AndroidSDK布局方式结构图AndroidStudio中创建布局文件的方法是，右击res文件夹，选择New→LayoutResourceFile选项，在弹出的NewResourceFile对话框，在Filename文本框中填写布局文件的名字，在Rootelement文本框中填写要设定的布局。4.1.1FrameLayout

FrameLayout又称单帧布局，是Android所提供的布局方式里最简单的布局方式，它指定屏幕上的一块空白区域，在该区域填充一个单一对象，如图片、文字、按钮等。应用程序开发人员不能为FrameLayout中填充的组件指定具体填充位置，默认情况下，这些组件都将被固定在屏幕的左上角，后放入的组件会放在前一个组件上进行覆盖填充，形成部分遮挡或全部遮挡。开发人员可以通过组件的

android:layout_gravity属性对组件位置进行适当的修改。实例FrameLayoutDemo演示了FrameLayout的布局效果。该布局中共有4个TextView组件，前3个组件以默认方式放置到布局中，第4个组件修改gravity属性后放置到布局中，运行效果如图4.4所示。图4.4

FrameLayout的布局效果实例FrameLayoutDemo中的布局文件main.xml的代码如下：<?xmlversion="1.0"encoding="utf-8"?><FrameLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#00ff00"android:textSize="100dip"android:text="@string/first"/>

<TextViewandroid:id="@+id/text2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#00ffff"android:textSize="70dip"android:text="@string/second"/><TextViewandroid:id="@+id/text3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ff0000"android:textSize="40dip"android:text="@string/third"/>

<TextViewandroid:id="@+id/text4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffff00"android:textSize="40dip"android:layout_gravity="bottom"android:text="@string/forth"/></FrameLayout>其中：android:layout_width="wrap_content"android:layout_height="wrap_content"表明FrameLayout布局覆盖了整个屏幕空间。实例FrameLayoutDemo中的string.xml文件内容如下：<?xmlversion="1.0"encoding="utf-8"?><resources> <stringname="app_name">FrameLayoutDemo</string><stringname="first">第一层</string><stringname="second">第二层</string><stringname="third">第三层</string><stringname="forth">第四层</string></resources>从运行后的结果可见，前3个被放置到FrameLayout的TextView组件都是以屏幕左上角为基点进行叠加的。第4个TextView因为设置了android:layout_gravity="bottom"属性而显示到了布局的下方。读者可自行将android:layout_gravity属性值修改为其他属性，查看运行效果。4.1.2LinearLayout

图4.5

LinearLayout的布局效果LinearLayout又称线性布局，该布局应该是Android视图设计中最经常使用的布局。该布局可以使放入其中的组件以水平方式或者垂直方式整齐排列，通过android:orientation属性指定具体的排列方式，通过weight属性设置每个组件在布局中所占的比重。实例LinearLayoutDemo演示了LinearLayout布局的使用方法，效果如图4.5所示。4.1.2LinearLayout

实例LinearLayoutDemo中的strings.xml文件代码如下：<?xmlversion="1.0"encoding="utf-8"?><resources><stringname="app_name">LinearLayoutDemo</string><stringname="red">red</string><stringname="yellow">yellow</string><stringname="green">green</string><stringname="blue">blue</string><stringname="row1">rowone</string><stringname="row2">rowtwo</string><stringname="row3">rowthree</string><stringname="row4">rowfour</string></resources>实例LinearLayoutDemo中的布局文件main.xml代码如下：<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><LinearLayoutandroid:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"><TextViewandroid:text="@string/red"android:gravity="center_horizontal"android:background="#aa0000"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/><TextViewandroid:text="@string/green"android:gravity="center_horizontal"android:background="#00aa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/><TextViewandroid:text="@string/blue"android:gravity="center_horizontal"android:background="#0000aa"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/><TextViewandroid:text="@string/yellow"android:gravity="center_horizontal"android:background="#aaaa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/></LinearLayout><LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"><TextViewandroid:text="@string/row1"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/><TextViewandroid:text="@string/row2"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/><TextViewandroid:text="@string/row3"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/><TextViewandroid:text="@string/row4"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/></LinearLayout></LinearLayout>4.1.2LinearLayout

该布局中放置了两个LinearLayout布局对象。第一个LinearLayout布局通过android:orientation="horizontal"属性将布局设置为横向线性排列，第二个LinearLayout布局通过android:orientation="vertical"属性将布局设置为纵向线性排列。每个LinearLayout布局中都放入了4个TextView，并通过android:layout_weight属性设置每个组件在布局中所占的比重相同，即各组件大小相同。layout_weight用于定义一个线性布局中某组件的重要程度。所有的组件都有一个layout_weight值，默认为0，意思是需要显示多大的视图就占据多大的屏幕空间。若赋值为大于0的值，则将可用的空间分割，分割的大小取决于当前的layout_weight数值与其他空间的layout_weight值的比率，例如水平方向上有两个按钮，每个按钮的layout_weight数值都设置为1，那么这两个按钮平分宽度；若第一个为1，第二个为2，则可将空间的三分之一分给第一个，三分之二分给第二个。将LinearLayoutDemo中水平LinearLayout的第4个TextView的android:layout_weight属性赋值为2，运行效果如图4.6所示。LinearLayout布局可使用嵌套。活用LinearLayout布局可以设计出各种各样漂亮的布局方式。4.1.3RelativeLayoutRelativeLayout又称相对布局。从名称上可以看出，这种布局方式是以一种让组件以相对于容器或者相对于容器中的另一个组件的相对位置进行放置的布局方式。RelativeLayout布局提供了一些常用的布局设置属性用于确定组件在视图中的相对位置。相关属性及其所代表的含义列举在表4.1中。

表4.1

RelativeLayout布局常用属性属性描述android:layout_above将该组件的底部置于给定ID的组件之上

android:layout_below将该组件的底部置于给定ID的组件之下

android:layout_toLeftOf将该组件的右边缘与给定ID的组件左边缘对齐

android:layout_toRightOf将该组件的左边缘与给定ID的组件右边缘对齐

android:layout_alignBottom将该组件的底边与给定ID的组件底边对齐android:layout_alignBaseline将该组件的baseline与给定ID的baseline对齐

android:layout_alignTop将该组件的顶部边缘与给定ID的顶部边缘对齐

android:layout_alignBottom将该组件的底部边缘与给定ID的底部边缘对齐

android:layout_alignLeft将该组件的左边缘与给定ID的左边缘对齐

android:layout_alignRight将该组件的右边缘与给定ID的右边缘对齐android:layout_alignParentTop为true，将该组件的顶部与其父组件的顶部对齐

android:layout_alignParentBottom为true，将该组件的底部与其父组件的底部对齐

android:layout_alignParentLeft为true，将该组件的左侧与其父组件的左侧对齐

android:layout_alignParentRight为true，将该组件的右侧与其父组件的右侧对齐

android:layout_centerHorizontal为true，将该组件置于水平居中

android:layout_centerVertical为true，将该组件置于垂直居中

android:layout_centerInParent为true，将该组件置于父组件的中央

实例RelativeLayoutDemo演示了相对布局的使用方法，其运行效果如图4.7所示。实例RelativeLayoutDemo中的布局文件main.xml代码如下：图4.7

RelativeLayout布局效果<?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android="/apk/res/android"><TextViewandroid:id="@+id/label"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="@string/hello"/><EditTextandroid:id="@+id/enter"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_below="@+id/label"/><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_below="@+id/enter"android:text="@string/but1text"/><Buttonandroid:id="@+id/ok"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignBottom="@+id/button1"android:layout_alignParentLeft="true"android:text="@string/but2text"/></RelativeLayout>该RelativeLayout布局的过程如下：

放置一个ID为label的TextView组件。

通过android:layout_below="@+id/label"属性将ID为enter的组件EditText放置到TextView的下面。

在布局中加入一个ID为button1的Button，通过android:layout_below="@+id/enter"属性将该Button放置到enter的下面，通过android:layout_alignParentRight="true"属性将Button放置到相对布局的右侧。

在相对布局中加入一个名为ok的Button，通过android:layout_alignBottom="@+id/button1"属性将该Button底边与button1对齐，通过android:layout_alignParentLeft="true"属性将该Button放置到布局的左边。

4.1.4TableLayoutTableLayout又称为表格布局，以行列的方式管理组件。TableLayout布局没有边框，可以由多个TableRow对象或者其他组件组成，每个TableRow可以由多个单元格组成，每个单元格是一个View。TableRow不需要设置宽度layout_width和高度layout_height

，其宽度一定是match_parent，即自动填满父容器，高度一定为wrap_content，即根据内容改变高度。但对于TableRow中的其他组件来说，是可以设置宽度和高度的，只是必须是wrap_content或者fill_parent。实例TableLayoutDemo演示了使用TableLayout制作UI的方法，效果如图4.8所示。实例TableLayoutDemo中strings.xml的代码如下：<?xmlversion="1.0"encoding="utf-8"?><resources><stringname="hello">HelloWorld,TableLayout!</string><stringname="app_name">TableLayoutDemo</string> <stringname="column1">第一行第一列</string> <stringname="column2">第一行第二列</string> <stringname="column3">第一行第三列</string> <stringname="empty">最左面的可伸缩TextView</string> <stringname="row2column2">第二行第三列</string> <stringname="row2column3">End</string> <stringname="merger">合并三个单元格</string></resources>实例TableLayoutDemo中的布局文件main.xml的代码如下：<?xmlversion="1.0"encoding="utf-8"?><TableLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><TableRow><TextViewandroid:text="@string/column1"/><TextViewandroid:text="@string/column2"/><TextViewandroid:text="@string/column3"/></TableRow><TextViewandroid:layout_height="wrap_content"android:background="#fff000"android:text="单独的一个TextView"android:gravity="center"/> <TableRow><Buttonandroid:text="@string/merger"android:layout_span="3"android:gravity="center_horizontal"android:textColor="#f00"/></TableRow>

<TextViewandroid:layout_height="wrap_content"android:background="#fa05"android:text="单独的一个TextView"/> <TableRowandroid:layout_height="wrap_content"> <TextView android:text="@string/empty"/> <Button android:text="@string/row2column2"/> <Button android:text="@string/row2column3"/> </TableRow></TableLayout>布局文件main.xml在TableLayout布局内添加了两个TableRow和两个TextView，形成了如图4.8所示的效果。从运行效果看，第一行和第五行都没能完全显示。TableLayout布局提供了几个特殊属性，可以实现以下特殊效果。

android:shrinkColumns属性：该属性用于设置可收缩的列。当可收缩的列太宽以至于布局内的其他列不能完全显示时，可收缩列会纵向延伸，压缩自己所占的空间，以便于其他列可以完全显示出来。android:shrinkColumns=“1”表示将第2列设置为可收缩列，列数从0开始。

android:stretchColumns属性：该属性用于设置可伸展的列。可伸展的列会自动扩展长度以填满所有可用空间。android:stretchColumns=“1”表示将第2列设置为可伸展的列。

android:collapseColumns属性：该属性用于设置隐藏列。android:collapseColumns=“1”表示将第2列隐藏不显示。在<TableLayout>标签添加属性android:shrinkColumns="0"，再次运行，效果如图4.9所示，可以看出第一行和第五行都完全显示出来了。图4.9

完全显示的效果4.1.5ConstraintLayoutConstraintLayout又称约束布局，是Android中一个强大的布局容器，属于AndroidX库的一部分。如果开发者想要更改布局，则可通过约束（Constraints）来定义视图之间的相对位置关系，从而实现灵活且高效的布局设计。该布局支持从AndroidAPI9（Gingerbread）开始的所有版本。通过New|LayoutResourceFile，如图4.10所示，新建一个Rootelement为ConstraintLayout的布局文件constraintlayout.xml。ConstraintLayout布局要求为其中的每个View组件都至少设置一个垂直约束和一个水平约束。ConstraintLayout和RelativeLayout功能相似，但是更灵活，并且具有更丰富的功能，例如链式布局、权重分配、比例布局等。图4.10新建constraintlayout.xml

要使用ConstraintLayout完成如图4.11所示的布局效果，需要在constraintlayout.xml拖入两个TextView，两个EditText，放置到如图4.11所示的基本位置上，然后通过组件的约束点为每个组件至少添加水平和垂直两个约束，如图4.12所示，才能在该布局下确定组件的具体位置。需要说明的是，约束除通过可以通图4.12所示的菜单方式添加，还可以在AndroidStudio的可视化界面上直接拖曳，或者在属性面板的“ConstraintWidget”属性上直接修改。图4.11ConstraintLayout布局效果图图4.12添加约束点实例ConstraintLayoutDemo的布局文件main.xml代码如下：<?xmlversion="1.0"encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:id="@+id/constraintLayout"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/textView"android:layout_width="71dp"android:layout_height="40dp"android:layout_marginStart="56dp"android:layout_marginTop="116dp"android:text="user:"android:textSize="24sp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/><TextViewandroid:id="@+id/textView2"android:layout_width="66dp"android:layout_height="33dp"android:layout_marginStart="56dp"android:layout_marginTop="48dp"android:text="psw:"android:textSize="24sp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/textView"/><EditTextandroid:id="@+id/editTextText"android:layout_width="208dp"android:layout_height="55dp"android:layout_marginStart="56dp"android:layout_marginTop="116dp"android:ems="10"android:inputType="text"android:text="Name"app:layout_constraintStart_toEndOf="@+id/textView"app:layout_constraintTop_toTopOf="parent"/><EditTextandroid:id="@+id/editTextText2"android:layout_width="199dp"android:layout_height="61dp"android:layout_marginStart="57dp"android:layout_marginTop="26dp"android:ems="10"android:inputType="text"android:text="password"app:layout_constraintStart_toEndOf="@+id/textView2"app:layout_constraintTop_toBottomOf="@+id/editTextText"/></androidx.constraintlayout.widget.ConstraintLayout>其中：android:layout_marginStart="56dp"android:layout_marginTop="116dp"表示组件放置到距离屏幕左侧56dp、距离屏幕上沿为116dp的位置。4.1.6WebViewWebView组件是AbsoluteLayout的子类，用于显示Web页面。借助于WebView，可以方便地开发自己的网络浏览器。此处仅对WebView的基本用法进行介绍，在后面进行WebApp的学习时会有更进一步的讲解。运行该实例时请确保AVD处于能访问网络的状态。创建工程WebViewDemo，为其在AndroidManifest.xml文件中添加Internet访问权限：<uses-permissionandroid:name="android.permission.INTERNET"/>在布局文件main.xml中添加一个WebView组件。Main.xml内容如下：<?xmlversion="1.0"encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".WebViewDemoActivity"><WebViewandroid:id="@+id/webView1"android:layout_width="397dp"android:layout_height="605dp"android:layout_marginStart="8dp"android:layout_marginTop="8dp"android:layout_marginEnd="1dp"android:background="#E42020"android:visibility="visible"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/editTextText"app:layout_constraintVertical_bias="0.0"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="16dp"android:layout_marginTop="40dp"android:text="打开页面"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/><EditTextandroid:id="@+id/editTextText"android:layout_width="238dp"android:layout_height="58dp"android:layout_marginStart="136dp"android:layout_marginTop="41dp"android:ems="10"android:inputType="text"android:text=""app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/></androidx.constraintlayout.widget.ConstraintLayout>其中app:layout_constraintTop_toBottomOf="@+id/editTextText"android:layout_marginTop="8dp"表示webView组件的top约束是基于editTextText组件，距离为8dp。app:layout_constraintHorizontal_bias="0.0"用于控制子视图在水平方向上的偏移量，取值范围：[0.0,1.0]，其中0.0表示完全靠近左侧约束，1.0表示完全靠近右侧约束，0.5表示水平居中。同理，app:layout_constraintVertical_bias="0.0"表示视图完全靠近顶部约束。实例WebViewDemo中的Activity文件WebViewDemoActivity.java代码如下：实例WebViewDemo中的Activity文件WebViewDemoActivity.java代码如下：packageroduction.webviewdemo;importandroid.os.Bundle;importandroid.view.View;importandroid.webkit.WebView;importandroid.webkit.WebViewClient;importandroid.widget.Button;importandroid.widget.EditText;importandroidx.activity.EdgeToEdge;importandroidx.appcompat.app.AppCompatActivity;importandroidx.core.graphics.Insets;importandroidx.core.view.ViewCompat;importandroidx.core.view.WindowInsetsCompat;publicclassWebViewDemoActivityextendsAppCompatActivity{@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);EdgeToEdge.enable(this);setContentView(R.layout.main);Buttonbtn=findViewById(R.id.button2);WebViewwebView=findViewById(R.id.webView1);btn.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewv){webView.getSettings().setJavaScriptEnabled(true);webView.setWebViewClient(newWebViewClient());EditTextet=findViewById(R.id.editTextText);webView.loadUrl(et.getText().toString());}});}}其中EdgeToEdge.enable(this);用于启用边缘到边缘显示，可以实现内容扩展到屏幕边缘的效果，提供更沉浸式的用户体验。运行效果如图4.11所示。图4.11

WebViewDemo运行界面常用Widget组件02常用Widget组件

在前面的章节讲解了用户界面UI设计中布局方面的知识，其中涉及少数几个常用的组件，例如按钮、文本框等。在这一节中着重讲解Android用户UI设计中常用的各种组件的用法

。

AndroidSDK提供了名为android.widget的包，其中提供了在应用程序界面设计中大部分常用的UI可视组件。之前章节中涉及的各种布局以及文本框、按钮等组件都包含在这个包中。Android提供了强大的用户UI功能，要设计自己独特的应用程序界面，需要对各个组件有一个详细的了解。4.2.1碎片FragmentFragment是Android中的一个组件，它可以被理解为一个模块化的用户界面部分，可以嵌入Activity中使用。Fragment有自己的生命周期、输入事件和定义自己的布局。它允许将复杂的用户界面分解成更小的、可重用的组件，更便于管理和维护。Fragment可以以静态方式添加到Activity中，也可以在运行时动态添加、移除或替换，能够提供更灵活的用户界面交互。与Activity类似，Fragment有自己的生命周期。Fragment主要生命周期方法包括：

onAttach(Contextcontext)：Fragment与Activity关联时调用。

onCreate(BundlesavedInstanceState)：创建Fragment时调用。

onCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState)：创建Fragment的视图时调用。

onActivityCreated(BundlesavedInstanceState)：Activity创建完成后调用。

onStart()：Fragment变为可见时调用。

onResume()：Fragment可以与用户交互时调用。

onPause()：Fragment即将失去焦点时调用。

onStop()：Fragment不再可见时调用。

onDestroyView()：Fragment的视图被销毁时调用。

onDestroy()：Fragment被销毁时调用。

onDetach()：Fragment与Activity解除关联时调用。此外，Fragment常用的方法有：

getActivity()：获取Fragment所关联的Activity。

getFragmentManager()：获取Fragment的FragmentManager，用于管理Fragment的事务。

getChildFragmentManager()：获取Fragment的子FragmentManager，用于管理嵌套Fragment。

setArguments(Bundleargs)：设置传递给Fragment的参数。

getArguments()：获取传递给Fragment的参数。FragmentDemo演示了以静态方式在Activity中重复显示同一个Fragment的过程。首先，新建一个名为FragmentActivity的Activity，并指定其布局文件为activity_fragment.xml，设定其布局为垂直的LinearLayout。其次，右击包名，通过New|Fragment|Fragment(Blank)菜单新建一个空白的Fragment，名为BlankFragment，并且指定其对应的布局文件名字fragment_blank.xml。设定其布局为FrameLayout，并且设置界面如图4.12所示。图4.12Fragment布局fragment_blank.xml对应代码如下：<?xmlversion="1.0"encoding="utf-8"?><FrameLayoutxmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".BlankFragment"><!--TODO:Updateblankfragmentlayout--><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|left"android:text="top|left"/><Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|right"android:text="top|right"/><Buttonandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="center"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|left"android:text="bottom|left"/><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:text="bottom|right"/></FrameLayout>然后在activity_fragment.xml中以静态方式声明两个Fragment，并为每个Fragment指定唯一id，代码如下：<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".FragmentActivity"><fragmentandroid:id="@+id/my_fragment1"android:name="roduction.fragmentdemo.BlankFragment"android:layout_width="match_parent"android:layout_height="300dp"/><fragmentandroid:id="@+id/my_fragment2"android:name="roduction.fragmentdemo.BlankFragment"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>FragmentDemo运行后，效果如图所示。可见，Fragment很方便地在Activity中被复用。Fragment的动态使用会在4.2.15章节底部导航视图中展示。4.2.2按钮Button按钮（Button）应该是用户交互中使用最多的组件，在很多应用程序中都很常见。当用户单击按钮的时候，会有相对应的响应动作。下面在WidgetDemo工程的主界面main.xml中放置一个名为Button的按钮。文件代码如下：<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="@string/hello"/><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"/></LinearLayout>其中：<Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"/>表明在用户界面上放置了一个ID为“button1”的按钮，按钮的高度（layout_height）和宽度（layout_width）都会根据实际内容调整（wrap_content），按钮上显示文字为Button，其运行效果如图4.14所示。图4.14

Button的应用界面按钮最重要的用户交互事件是“单击”事件。下面为Button1添加事件监听器和相应的单击事件。该过程在WidgetDemoActivity.java文件中完成，代码如下：packageintroduction.android.widgetDemo;importandroid.app.Activity;importandroid.os.Bundle;importandroid.util.Log;importandroid.view.View;importandroid.view.View.OnClickListener;importandroid.widget.Button;publicclassWidgetDemoActivityextendsActivity{/**Calledwhentheactivityisfirstcreated.*/@OverridepublicvoidonCreate（BundlesavedInstanceState）{super.onCreate（savedInstanceState）;setContentView（R.layout.main）;Buttonbtn=（Button）this.findViewById（R.id.button1）;btn.setOnClickListener（newOnClickListener(){ @Override publicvoidonClick（Viewv）{ //TODOAuto-generatedmethodstubsetTitle（"button1被用户点击了"）; Log.i（"widgetDemo","button1被用户点击了。"）; } }）;}}4.2.3文本框TextView

TextView是Android中用于显示文本信息的一个基础控件。它可以显示单行或多行文本，并支持各种文本格式化选项，如字体、颜色、大小等。TextView是构建用户界面时最常用的控件之一，适用于显示标题、说明、标签等文本内容,其显示的文本不可被用户直接编辑。TextView重要属性：text：设置TextView显示的文本内容。textSize：设置文本的大小，通常单位使用sp（缩放像素）。textColor：设置文本的颜色使用#号跟随6位16进制数表示RGB三个通道数值。例如"#FF0000"表示红色，"#00FF00"表示绿色，"#0000FF"表示蓝色，"#000000"表示黑色，"#FFFFFF"表示白色。在工程WidgetDemo的main.xml中添加一个TextView，代码如下：<TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView"/>运行效果如图4.16所示。图4.16

TextView的应用界面修改Button1的单击事件为：publicvoidonClick（Viewview）{ //TODOAuto-generatedmethodstub //setTitle（"button1被用户单击了"）; Log.i（"widgetDemo","button1被用户单击了。"）;TextViewtextview=（TextView）findViewById（R.id.textView1）; textview.setText（"设置TextView的字体"）; textview.setTextColor（Color.RED）; textview.setTextSize（TypedValue.COMPLEX_UNIT_SP,20）; textview.setTypeface（Typeface.defaultFromStyle（Typeface.BOLD））; }当Button1被单击时，通过setText()方法更改textView的显示内容为“设置TextView的字体”，通过setTextColor()方法修改textView显示字体的颜色为红色，通过setTextSize()方法修改textView显示字体的大小为20sp，通过setTypeface()方法修改textView显示字体的风格为加粗，如图4.17所示。当然，该过程也可以通过修改main.xml文件来实现。将TextView标签按照如下代码修改也可以得到同样的效果