04 第四章 用户界面布局.pptx

第1页：第四章用户界面布局封面

Android开发工程师教程开发基础篇第四章用户界面布局

第2页：教学目标

教学目标

掌握Android系统中LinearLayout(线性布局)、RelativeLayout(相对布局)、TableLayout (表格布局)、FrameLayout(帧布局)等4种布局的特点和使用方法。

根据不同的需求选择不同的布局进行界面设计。

第3页：本章目录

本章目录

• 概述
• 简易计算器的设计与实现
• 找不同游戏的设计与实现
• 打老鼠游戏的设计与实现
• 霓虹灯效果的设计与实现
• 本章小结
• 项目实训

第4页：布局管理器

概述

布局管理器

• 由于不同的Android系统终端，它们的屏幕分辨率、尺寸并不完全相同，如果让应用程序手动控制每个组件的大小、位置等会给程序开发带来很大的困难。为了让各种组件在不同的终端屏幕上都能良好运行，开发者进行开发时，只要选择了合适的布局管理器，就可以由Android系统终端的运行平台使用布局管理器来调整组件的大小、位置等。

第5页：四种布局方式概述

概述

(1)LinearLayout(线性布局)：它是一种最常用的布局方式，可以使用垂直和水平两种方式放置组件，假如组件的宽度和高度超过了屏幕的宽度和高度，那么超出的组件不会显示在屏幕上。

(2)RelativeLayout(相对布局)：它是可以让应用程序在不同屏幕大小、不同分辨率的Android终端屏幕上友好显示的一种布局方式，放置在该布局管理器中的组件的位置都是相对位置。

(3)TableLayout(表格布局)：它是和TableRow配合使用的一种常用布局管理方式，类似于HTML里面的Table。

(4)AbsoluteLayout(绝对布局)：它是一种需要开发者通过设定组件坐标决定组件摆放位置的布局方式，由于布局内所有元素位置都是固定的，所以不能保证所有Android系统终端上显示同样的效果。

(5)FrameLayout(帧布局)：它是一种在Android终端屏幕上开辟一块空白区域的布局方式，放置在空白区域的组件必须对齐到屏幕的左上角。

第6页：View和ViewGroup类

概述

View和ViewGroup类

• Android应用程序的用户界面都是通过View和ViewGroup及其派生子类对象构建的，View类是所有可视化组件的基类。如第3章介绍的TextView、ImageView、ProgressBar等组件是它的直接子类，Button、EditText、CheckBox是它的间接子类。
• ViewGroup类也是View类的直接子类，但它可以作为其他组件的容器。Android系统中5种布局管理器和一些高级组件，如将要在第10章介绍的GridView、Spinner、Gallery、ImageSwitcher等都是它的直接或间接子类。

第7页：派生类构建界面

概述

一般来说，开发Android应用程序的用户界面都不会直接使用View和ViewGroup，而是使用它们的派生类。

第8页：计算器章节目录

本章目录

• 找不同游戏的设计与实现
• 打老鼠游戏的设计与实现
• 霓虹灯效果的设计与实现
• 本章小结
• 项目实训
• 简易计算器的设计与实现概述

第9页：简易计算器任务

简易计算器的设计与实现

任务：设计一个简易计算器界面，并能实现加、减、乘、除数学运算。

第10页：线性布局预备知识

简易计算器的设计与实现

预备知识

• 线性布局是Android应用程序开发时使用最多的布局类型，它可以将用户界面上的组件组织成垂直或水平的形式。在线性布局中，当布局方向设置为垂直时，它里面的所有子组件被组织在同一列中；当布局方向设置为水平时，所有子组件被组织在同一行中。Android系统中提供了android.widget.LinearLayout类实现线性布局，该类的常用属性与对应方法见表4-3。

第11页：垂直布局方式

简易计算器的设计与实现

垂直布局方式

• 在新建Android项目时，开发环境在项目文件夹中自动生成res/layout/main.xml文件，文件代码修改和说明如下：1

  <?xml version="1.0" encoding="utf-8"?>2 <!--LinearLayout布局方式为垂直布局，宽度和高度填满父容器-->3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"4 android:id="@+id/linerlay01"5 android:orientation="vertical"6 android:layout_width="fill_parent"7 android:layout_height="fill_parent">8 <!--在该布局容器中增加Button组件，该组件的宽度为按组件实际内容显示-->9 <Button10 android:id="@+id/mybtn"11 android:layout_width="wrap_content"12 android:layout_height="wrap_content"13 android:text="Button"/>14 <!--在该布局容器中增加两个TextView组件，该组件的宽度为填满父容器——linerlay01-->15 <TextView16 android:id="@+id/myTxt01"17 android:layout_width="fill_parent"18 android:layout_height="wrap_content"19 android:text="我是第一个文本框" />20 <TextView21 android:id="@+id/myTxt02"22 android:layout_width="fill_parent"23 android:layout_height="wrap_content"24 android:text="我是第二个文本框" />25 </LinearLayout>

第12页：水平布局方式

简易计算器的设计与实现

水平布局方式

• 如果要设计如图所示的用户界面，将mybtn、myTxt01、myTxt02这3个组件水平布局在一行上，那么就必须分别将垂直布局代码文件中的第5行代码和第17行代码修改为如下代码：android:orientation=" horizontal"android:layout_width="wrap_content"

第13页：混合嵌套布局

简易计算器的设计与实现

混合(嵌套)布局方式

• 在Android系统中的线性布局管理器中只提供了垂直布局和水平布局两种方式，而在实际开发中，单独使用这两种方式可能不能满足用户界面布局设计的需要，这样就需要在一个布局文件中既使用垂直布局又使用水平布局，这种方式称为混合布局方式。如图4.3所示的用户界面，布局文件直接使用一个垂直布局管理器就可以实现，但如果要设计如图4.4所示的用户界面，就必须使用混合布局方式才可以实现。

第14页：图4.4布局说明

简易计算器的设计与实现

图4.4所示用户界面布局文件的部分源代码备注所示。

图4.4所示的布局文件中，第4行代码设置了整个界面布局方式为“vertical”，该行代码让整体布局的组件垂直布置在用户界面上；而第43行内嵌的布局方式为“horizontal”，该内嵌布局里面包含button1和button2两个按钮组件，由于它的布局方式为水平布局，所以“设置”按钮、“取消”按钮水平放置在用户界面上。混合布局就是将水平布局和垂直方式作为一个用户界面，从代码中可以看出，它们的整体结构是一个嵌套结构，所以混合布局也称为嵌套布局。

第15页：计算器主界面设计

简易计算器的设计与实现

简易计算器的实现

• 1．主界面的设计
• 根据简易计算器实现加、减、乘、除的计算功能，设计如图4.5所示的用户界面。从用户界面的布局结构分析，主界面上用10个Button组件用于显示数字0～9，用4个Button组件用于显示加、减、乘、除运算符，用3个Button组件用于显示小数点、等于号和“清除”。
• 代码参照课本或源代码

第16页：计算器变量定义

简易计算器的设计与实现

• 2．功能实现
• (1)定义变量。代码如下：EditText editText;StringBuffer text;String number_1 = "", number_2 = "";boolean clicked = false;byte style = 0;Button btn_1, btn_2, btn_3, btn_4, btn_5, btn_6, btn_7,btn_8, btn_9,btn_0;Button btn_add, btn_sub, btn_mul, btn_div, btn_eq,btn_dot, btn_clear;

第17页：数字1监听事件

简易计算器的设计与实现

• (2)数字“1”的监听事件。代码如下：btn_1

  .setOnClickListener(new Button.OnClickListener(){public void onClick(View v){if (clicked){editText.setText("");//单击数字键后，把editText中的内容清空clicked = false;text.setLength(0);}text.append("1");//单击数字键后，把数字追加到StringBuffer中//将StringBuffer中的内容显示在editText中editText.setText(text.toString());}});

第18页：运算符加号监听

简易计算器的设计与实现

• (3)运算符“+”的监听事件。代码如下：btn_add

  .setOnClickListener(newButton.OnClickListener(){public void onClick(View v){number_1 = editText.getText().toString();style = 1;clicked = true;}});

第19页：小数点监听事件

简易计算器的设计与实现

• (4)小数点“.”的监听事件。代码如下：btn_dot

  .setOnClickListener(new Button.OnClickListener(){public void onClick(View v){if (clicked){editText.setText("");clicked = false;text.setLength(0);}if (editText.getText().toString().indexOf(".")==-1){if (text.length()== 0){text.append("0.");} else {text.append(".");}editText.setText(text.toString());}}});

第20页：等于号监听事件

简易计算器的设计与实现

• (5)等于号“=”的监听事件。代码如下：btn_eq

  .setOnClickListener(new Button.OnClickListener(){public void onClick(View v){number_2 = editText.getText().toString();if (number_1.equals("")&& number_2.equals("")){return;}Double d1 = Double.valueOf(number_1);Double d2 = Double.valueOf(number_2);Double r = 0.0;switch (style){case 1:r = d1 + d2;break;case 2:r = d1-d2;break;case 3:r = d1 * d2;break;case 4:r = d1 / d2;break;}editText.setText(r.toString());}});

第21页：找不同章节目录

本章目录

• 找不同游戏的设计与实现
• 简易计算器的设计与实现
• 概述
• 打老鼠游戏的设计与实现
• 霓虹灯效果的设计与实现
• 本章小结
• 项目实训

第22页：找不同游戏任务

找不同游戏的设计与实现

任务：本游戏会随机在用户界面上显示5张相似的图片，要求玩家在限定的时间里找出一张与众不同的图片，找出时间越短，积分越高。

第23页：相对布局预备知识

找不同游戏的设计与实现

预备知识

• 通过上节线性布局方式的使用方法介绍，读者可以设计出一些布局结构规范的用户界面，但是实际开发中，经常会出现如前页PPT图所示的用户界面，这类用户界面如果用线性布局方式进行设计，实现代码要么复杂、冗长，要么就实现不了。这时，可以通过Android系统中提供的相对布局(RelativeLayout)方式实现。
• 相对布局就是相对其他组件或父组件本身来组织组件在用户界面上的位置，它可以更细致地布局用户界面。例如，有ImageView、TextView和Button这3个组件，可以分别将ImageView、Button放在TextView的左下角、右下角；也可以将ImageView、Button放在TextView的右下角、左下角。

第24页：RelativeLayout属性表

找不同游戏的设计与实现

Android系统中提供了android.widget.RelativeLayout类实现相对布局，该类的常用属性见表4-5至表4-8。

第25页：找不同主界面设计

找不同游戏的设计与实现

找不同游戏的实现

• 1．主界面的设计
• 找不同游戏实现的功能是运行游戏程序后，倒计时开始，同时自动加载5幅图片，其中有一幅图片与其他图片不同，玩家只有一次机会单击不同的图片，需要在10秒内找出该图片，否则游戏失败，游戏成功后，可以进入下一组图片。根据游戏功能的分析，在用户界面上需要一个用于倒计时的TextView组件、一个重玩按钮Button组件和用于显示图片的5个ImageButton组件

第26页：倒计时与重玩布局

找不同游戏的设计与实现

• 倒计时(TextView)与重玩(Button)组件分别放置在整个布局的左上角和右上角，可用如下代码实现：1

  <TextView2 android:id="@+id/time"3 android:layout_width="wrap_content"4 android:layout_height="wrap_content"5 android:textSize="20sp"6 android:textColor="#f00002"7 android:text="倒计时：10"8 android:layout_alignParentLeft="true"/>9 <Button10 android:id="@+id/next"11 android:layout_width="wrap_content"12 android:layout_height="wrap_content"13 android:textColor="#f00002"14 android:textSize="20sp"15 android:layout_alignParentRight="true"16 android:text="重玩"/>

第27页：五图片按钮布局

找不同游戏的设计与实现

• 为了达到右图所示界面的五个ImageButton组件显示效果，就需要使用相对布局中多个属性设置组合实现。详细代码如下：1

  <ImageButton2 android:layout_width="wrap_content"3 android:layout_height="wrap_content"4 android:background="@drawable/girl01"5 android:layout_centerInParent="true"6 android:id="@+id/image0" />7 <ImageButton8 android:layout_width="wrap_content"9 android:layout_height="wrap_content"10android:background="@drawable/girl01"11 android:layout_above="@id/image0"12 android:layout_toLeftOf="@id/image0"13 android:id="@+id/image1" />

第28页：图片按钮布局续

找不同游戏的设计与实现

• 14 <ImageButton

• 15 android:layout_width="wrap_content"
• 16 android:layout_height="wrap_content"
• 17 android:background="@drawable/girl01"
• 18 android:layout_above="@id/image0"
• 19 android:layout_toRightOf="@id/image0"

• 20 android:id="@+id/image2" />

• 21 <ImageButton

• 22 android:layout_width="wrap_content"
• 23 android:layout_height="wrap_content"
• 24 android:background="@drawable/girl02"
• 25 android:layout_below="@id/image0"
• 26 android:layout_toLeftOf="@id/image0"

• 27 android:id="@+id/image3" />

• 28 <ImageButton

• 29 android:layout_width="wrap_content"
• 30 android:layout_height="wrap_content"
• 31 android:background="@drawable/girl01"
• 32 android:layout_below="@id/image0"
• 33 android:layout_toRightOf="@id/image0"

• 34 android:id="@+id/image4" />

第29页：找不同变量定义

找不同游戏的设计与实现

• 2．功能实现

• (1)定义变量。代码如下：

  private ImageButton img0, img1, img2, img3, img4;private TextView countTime;private Button againBtn;//标记玩家有没有单击过一幅图片，只要单击了错误的图片，游戏就失败private boolean flag = true;//要找的图片所在ImageButton的Idprivate int index = 0;//ImageButton对应的图片数组private int icon[]= new int[]{R.drawable.girl01,R.drawable.girl02,R.drawable.girl02,R.drawable.girl02,R.drawable.girl02};//倒计时private MyCount myTime;private ImageButton img0, img1, img2, img3, img4;//5个图片按钮private TextView countTime;//显示倒计时信息private Button againBtn;//“重玩”按钮//标记玩家有没有单击过一幅图片，只要单击了错误的图片，游戏就失败private boolean flag = true;

第30页：倒计时功能实现

找不同游戏的设计与实现

• (2)倒计时功能。Android系统提供了一个抽象类——android.os.CountDownTimer，该类包含的方法和功能说明见表4-9。本案例项目实现时，创建了一个继承CountDownTimer的内部类MyCount，具体代码见备注。

第31页：找不同图片监听

找不同游戏的设计与实现

• (3)找不同图片的实现。为了在5幅图片中找出与众不同的图片，本案例项目给5个ImageButton组件添加监听事件，实现代码如下：img0

  .setOnClickListener(new OnClickListener(){@Overridepublic void onClick(View v){myTime.cancel();if (index ==img0.getId()){Toast.makeText(MainActivity.this, "好样的，你猜对了！", 1).show();}else{flag = false;Toast.makeText(MainActivity.this, "对不起，你猜错了", 1).show();img0.setVisibility(View.INVISIBLE);img1.setVisibility(View.INVISIBLE);img2.setVisibility(View.INVISIBLE);img3.setVisibility(View.INVISIBLE);img4.setVisibility(View.INVISIBLE);}againBtn.setEnabled(true);}});

第32页：重玩功能实现

找不同游戏的设计与实现

• (4)重玩功能的实现。重玩游戏表示在游戏界面上重新倒计时和重新加载图片到ImageButton，实现代码如下：//单击“重玩”按钮，重新倒计时againBtn

  .setOnClickListener(new OnClickListener(){@Overridepublic void onClick(View v){img0.setVisibility(View.VISIBLE);img1.setVisibility(View.VISIBLE);img2.setVisibility(View.VISIBLE);img3.setVisibility(View.VISIBLE);img4.setVisibility(View.VISIBLE);myTime = new MyCount(10000, 1000);myTime.start();flag = true;againBtn.setEnabled(false);}});

第33页：打老鼠章节目录

本章目录

• 打老鼠游戏的设计与实现
• 简易计算器的设计与实现
• 找不同游戏的设计与实现
• 概述
• 霓虹灯效果的设计与实现
• 本章小结
• 项目实训

第34页：打老鼠游戏任务

打老鼠游戏的设计与实现

任务：“打老鼠”游戏就是在游戏机上投入一元硬币后，游戏柜上面有多个洞口，随时会有“老鼠”从洞口探出头来，这时，玩家只需要抡起锤子击打“老鼠”，击中了就会加分，在规定时间内，如果分值达到预期目标，那么游戏继续，否则游戏结束。本节将模拟“打老鼠”游戏，设计一款在Android平台终端上运行的打老鼠游戏。本游戏会在5×5方格中随时出现“老鼠”头像，要求玩家立即触摸，触摸到表示击中，如果玩家在限定的时间里击中5只“老鼠”，那么游戏继续，否则游戏结束。

第35页：表格布局预备知识

打老鼠游戏的设计与实现

预备知识

• 在实际应用开发中，经常会出现数据的显示以表格方式展现的情况，如图所示，要达到类似的界面显示效果，在Android系统中可以使用表格布局(TableLayout)方式。
• 表格布局就是一系列行和列组成的网络，并可以在这些网格的单元格中显示View组件。从用户界面设计的角度看，一个TableLayout由一系列TableRow控件组成，每个TableRow控件对应表格里的一行。TableRow的内容由单元格中的View组件组成。Android系统中使用android.widget.TableLayout类实现表格布局。

第36页：TableLayout与TableRow

打老鼠游戏的设计与实现

预备知识

• TableLayout类以行和列的形式对组件进行管理，每一行可以是一个TableRow对象，也可以是一个View组件。每一行为TableRow对象时，可以在TableRow下添加子组件，默认情况下，每个子组件占据一列；每一行为View组件时，该View组件独占一行。在应用开发时，TableLayout的行数由开发者直接指定，即有多少个TableRow(或View组件)就有多少行。TableLayout的列数由包含最多子组件的TableRow的列数决定。例如，有一个TableLayout布局管理器，它的第一个TableRow包含2个子组件，第二个TableRow包含3个子组件，第三个TableRow包含4个子组件，那么该TableLayout的列数就是4。
• android.widget.TableLayout类可设置的属性包括全局属性(即列属性)和单元格属性，详细说明见表4-10和表4-11。

第37页：TableLayout定义代码

打老鼠游戏的设计与实现

设计如右图所示界面代码如下：

• (1)TableLayout的定义。

  <TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/tableLayout1"android:layout_width="match_parent"android:layout_height="match_parent"android:shrinkColumns="*"android:stretchColumns="*"></TableLayout>

• (2)表格第一行TableRow的定义。

  <TableRowandroid:id="@+id/tableRow1"android:layout_height="wrap_content"android:layout_width="match_parent"android:gravity="center_horizontal"><TextViewandroid:id="@+id/textView9"android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="18dp"android:text="近日天气情况表(9月)"android:gravity="center"android:layout_span="6"/></TableRow>

第38页：表格第二行定义

打老鼠游戏的设计与实现

• (3)表格第二行TableRow的定义。

  <TableRowandroid:id="@+id/tableRow2"android:layout_height="wrap_content"android:layout_width="match_parent"><TextViewandroid:id="@+id/TextView05"android:text=""/><TextViewandroid:id="@+id/TextView04"android:text="7日"android:textStyle="bold" /><TextViewandroid:id="@+id/TextView03"android:text="8日"android:textStyle="bold" /><TextViewandroid:id="@+id/TextView02"android:text="9日"android:textStyle="bold" /><TextViewandroid:id="@+id/TextView01"android:text="10日"android:textStyle="bold"/><TextViewandroid:text="11日"android:id="@+id/textView00"android:textStyle="bold" /></TableRow>(4)表格第五行TableRow的定义。<TableRowandroid:id="@+id/tableRow5"android:layout_height="wrap_content"android:layout_width="match_parent"android:gravity="center"><TextViewandroid:id="@+id/textView8"android:text="天气情况"android:textStyle="bold"></TextView><ImageViewandroid:id="@+id/imageView1"android:src="@drawable/sun"/><ImageViewandroid:id="@+id/imageView2"android:src="@drawable/cloud"/><ImageViewandroid:id="@+id/imageView3"android:src="@drawable/rain"/><ImageViewandroid:id="@+id/imageView4"android:src="@drawable/shade"/><ImageViewandroid:id="@+id/imageView5"android:src="@drawable/sun"/></TableRow>

第39页：TableRow间隔线

打老鼠游戏的设计与实现

• 如果要在TableRow之间增加间隔线，可以在两个TableRow之间添加View，并设置该View的layout_height和background属性。代码如下：

  <Viewandroid:layout_height="2sp"android:background="#f00f00"/>

第40页：竖屏改横屏配置

打老鼠游戏的设计与实现

打老鼠游戏的实现

• 1．主界面的设计——竖屏改横屏的方法

• (1)修改AndroidManifest.xml配置文件。在默认设置下，Activity用户界面是竖屏显示的，如果要强制横屏显示，就必须为Activity界面配置该属性，具体配置代码如下述第6行所示。1

  <application2 android:icon="@drawable/icon"3 android:label="@string/app_name">4 <activity5 android:name=".MainActivity"6 android:screenOrientation="landscape"7 android:label="@string/app_name">8 <intent-filter>9 <action android:name="android.intent.action.MAIN" />10 <category android:name="android.intent.category.LAUNCHER" />11 </intent-filter>12 </activity>13 </application>

• (2)功能代码实现。在用功能代码实现时，需要在Activity类中的OnCreate()方法中增加如下代码：setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

第41页：界面组件说明

打老鼠游戏的设计与实现

• 界面效果如图所示，“击中数”和“倒计时”可以使用TextView组件，“重玩”和“开始”可以使用Button组件，而其他表示鼠洞的部分可以使用多个ImageButton组件实现，关键代码见备注：

第42页：打老鼠变量定义

打老鼠游戏的设计与实现

2．功能实现

• (1)定义变量。由于本案例项目涉及变量较多，限于篇幅，这里仅列出部分关键变量定义的代码和说明，其他部分请读者参阅Chap04_04_02文件夹中的内容。//将所有的ImageView组件的id保存在数组中，便于让“老鼠”随机出现在其中

  private int imgID[] = { R.id.im1, R.id.im2, R.id.im3, R.id.im4,R.id.im5,R.id.im6, R.id.im7, R.id.im8, R.id.im9, R.id.im10, R.id.im11,R.id.im12, R.id.im13, R.id.im14, R.id.im15, R.id.im16 };//用于保存ImageView组件private ImageView imgView[] = new ImageView[16];

第43页：修改UI的三种方法

打老鼠游戏的设计与实现

• (2)随机在洞中出现“老鼠”。在Android系统中，对UI的修改必须由UI的线程完成，否则会出现异常错误，这种处理方法与J2SE稍有区别，读者处理这类问题时，要多加注意。Android系统中动态改变UI中组件内容的方法有以下3种。

• 方法一：使用组件的post()方法，使用格式如下：

  public boolean post(Runnable action)，参数action里的run方法会在主线程中运行。例如，要动态改变TextView组件的text属性值，代码如下：myTextView.post(new Runnable(){@Overridepublic void run(){i++;myTextView.setText("计数："+i);}});

• 方法二：使用Handler的消息机制，使用格式如下：public final boolean sendMessage (Message msg)

• 线程内调用sendMessage方法。

  public void handleMessage (Message msg)

• 主线程里的Handler对象重写handleMessage方法。

• 例如，动态改变TextView组件的text属性值，代码如下：//线程内Message message = new Message();message.what =0;mHandler.sendMessage(message);//主线程mHandler =

  new Handler(){@Overridepublic void handleMessage(Message msg){if(msg.what==0){i++;myTextView.setText("计数："+i);}}};

• 方法三：使用AsyncTask，AsyncTask就是一个封装过的后台任务类，它直接继承于Object类，位于android.os.AsyncTask包中。AsyncTask的特点是任务在主线程之外运行，而回调方法是在主线程内执行。（请参阅课本详细使用方法）

第44页：MyHandler消息处理

打老鼠游戏的设计与实现本案例项目中采用的是第二种方法，部分详细代码如下：//接收消息并处理消息，此Handler会与当前主线程一起运行

class MyHandler extends Handler {@Overridepublic void handleMessage(Message msg){super.handleMessage(msg);switch (msg.what){case 1://更新UI，使“老鼠”动态出现在不同的洞中imgView[oldID].setBackgroundDrawable(dong);newID = (int)(0 + Math.random()* 15);imgView[newID].setBackgroundDrawable(mouse);oldID = newID;break;default:break;}}}//每隔1.5秒发送一次消息code给Handler，更新UIclass MyThread implements Runnable {@Overridepublic void run(){while (flag){try {Thread.sleep(2000);} catch (InterruptedException e){e.printStackTrace();}Message msg = new Message();msg.what = 1;//消息codemsg.obj = null;//消息内容MainActivity.this.handler.sendMessage(msg);}}}

第45页：开始与打老鼠代码

打老鼠游戏的设计与实现

• (3)开始游戏、重玩游戏、打“老鼠”功能代码的实现。由于本案例项目中的“老鼠”洞是由多个ImageView组件组成的，如果为每个ImageView组件单独编写监听事件，重复代码较多，为了避免这类问题，在创建主用户界面MainActivity时实现了OnClickListener接口，这样就需要重写onClick()方法，代码如右：

  @Overridepublic void onClick(View v){switch (v.getId()){case R.id.play:count = 0;flag = true;myCount.start();//开始倒计时thread.start();//线程开启，“老鼠”出洞Toast.makeText(MainActivity.this, "游戏开始！",1).show();break;case R.id.replay:myCount.cancel();myCount.start();//…break;default:if (imgView[oldID].getId()== v.getId()){count ++ ;txtCount.setText("击中数："+count);if(count == 20){Toast.makeText(MainActivity.this, "祝贺你顺利过关！", 1).show();flag = false;}} else {Toast.makeText(MainActivity.this,"对不起，你没击中！", 1).show();}break;}}

第46页：霓虹灯章节目录

本章目录

• 霓虹灯效果的设计与实现
• 简易计算器的设计与实现
• 找不同游戏的设计与实现
• 打老鼠游戏的设计与实现
• 概述
• 本章小结
• 项目实训

第47页：霓虹灯效果任务

霓虹灯效果的设计与实现

任务：设计如右图所示的霓虹灯效果。

第48页：FrameLayout预备知识

霓虹灯效果的设计与实现

预备知识

• 在FrameLayout布局中，整个界面被当成一块空白备用区域，所有的子元素都不能被指定放置的位置，它们全部放在这块区域的左上角，并且后面的子元素直接覆盖在前面的子元素之上，将前面的子元素部分或全部遮挡，即帧布局的大小由子元素中尺寸最大的那个子元素来决定。如果子元素一样大，同一时刻只能看到最上面的子元素。
• 如左图所示的代码见备注：
• 如要出现右图效果，则需要将19～20行的代码改为如下代码：
• android:layout_width="50dp"
• android:layout_height="50dp"

第49页：FrameLayout属性表

霓虹灯效果的设计与实现

FrameLayout继承自ViewGroup，除了继承父类的属性和方法，FrameLayout类中包含了自己特有的属性和对应方法。见表4-14

第50页：colors.xml配置

霓虹灯效果的设计与实现

霓虹灯效果的实现

• 1．颜色配置文件colors.xml霓虹灯需要有7种颜色的配置文件，其代码如下：

  <?xml version="1.0" encoding="utf-8"?><resources><color name="color1">#ffff00</color><color name="color2">#ff00ff</color><color name="color3">#00ffff</color><color name="color4">#0ffff0</color><color name="color5">#0000ff</color><color name="color6">#00ff00</color><color name="color7">#ff0000</color></resources>

第51页：霓虹灯主界面代码

霓虹灯效果的设计与实现

• 2．主界面的设计为了达到霓虹灯的效果，本案例项目中用7个TextView分别表示7个不同的霓虹灯管，7个TextView的宽度和高度依次递减20dp并设置为不同的背景色。关键代码如下：

  <?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><TextViewandroid:id="@+id/view0"android:layout_width="200dp"android:layout_height="200dp"android:layout_gravity="center"android:background="#ffff00" /><TextViewandroid:id="@+id/view1"android:layout_width="180dp"android:layout_height="180dp"android:layout_gravity="center"android:background="#ff00ff"/><!--其他TextView组件的设置与此处代码类似-->…<TextViewandroid:id="@+id/view6"android:layout_width="80dp"android:layout_height="80dp"android:layout_gravity="center"android:background="#ff0000"/></FrameLayout>

第52页：霓虹灯变量定义

霓虹灯效果的设计与实现

• 3．功能实现(1)变量定义。代码如下：//将7种不同颜色存入colors数组final int[] colors = new int[] { R.color.color7, R.color.color6,R.color.color5, R.color.color4, R.color.color3, R.color.color2,R.color.color1, };//将7个TextView的id存入names数组中final int[] names = new int[] { R.id.view0, R.id.view1, R.id.view2,R.id.view3, R.id.view4, R.id.view5, R.id.view6, };//定义7个TextView数组，用于存放TextView组件TextView view[] = new TextView[7];

第53页：Handler实现霓虹灯

霓虹灯效果的设计与实现

• (2)使用Handler实现霓虹灯效果。实现7色霓虹灯的动态显示采用了Handler类，每隔0.1秒改变一种颜色，详细实现代码如下：

  class MyHandler extends Handler {int i = 0;public void handleMessage(Message msg){i++;if (i >= 6){i = 1;}for (int m = 7-i, n = 0; m < 7; m++, n++){//依次改变7个TextView组件的背景色view[m].setBackgroundResource(colors[n]);}for (int m = 0; m < 7-i; m++){view[m].setBackgroundResource(colors[m + i]);}sleep(100);}public void sleep(int j){sendMessageDelayed(obtainMessage(0), j);}}

第54页：本章小结

本章小结

本章结合案例项目的开发过程介绍了Android系统中LinearLayout(线性布局)、TableLayout(表格布局)、RelativeLayout (相对布局)和FrameLayout(帧布局)的常用属性和使用方法，通过对本章常用布局管理器的理解和掌握，读者在将来的项目开发中可以设计出令用户满意的UI。

第55页：项目实训

项目实训

项目一项目名：高级计算器(运行效果如左图所示)。功能描述：在4.2节简易计算器的基础上完善其他功能。

项目二项目名：奔跑的野马。功能描述：利用FrameLayout布局实现，当项目运行时，界面的野马开始奔跑，运行效果如右图所示。图中标示的(1)、(2)、(3)表示奔跑时的3个状态图片。

第56页：第四章结束致谢页

The end,thank you!