Android移动应用开发教程（微课版） 课件 单元二 仿微信框架App

单元二

仿微信框架App学习导读

在手机应用中今日头条、QQ、微信等App的主体结构十分相似，都含有头部区域、内容区域、底部导航区域，这种三段式结构是App设计的一种通用结构。本单元通过介绍仿微信框架App的设计过程，帮助读者了解如何设计底部导航，学会使用选择器，掌握组件的实例化和事件处理方法，实现交互动作。学习目标知识目标：1．了解View、ViewGroup、样式、选择器等概念；2．掌握LinearLayout、RelativeLayout等布局；3．掌握组件实例化方法；4．理解事件、事件模型。技能目标：1．能够利用LinearLayout、RelativeLayout等进行页面布局；2．能够利用单选按钮制作底部导航；3．能够实例化视图组件；4．能够实现事件绑定及其动作处理。素养目标：1．了解计算机软件从业人员应当具备的职业道德；2．树立正确的技能观，努力提高自己的职业技能，为社会和人民造福。思维导图2.1UI设计的相关概念用户界面，英文为UserInterface，简称UI，进行用户界面的设计称为UI设计。Android系统所有的UI都是通过View（视图）和ViewGroup（视图组）这两个类实现的，在进行UI设计时经常会用到View类和ViewGroup类。2.1UI设计的相关概念2.1.1View在Android当中View类是最基本的一个UI类，几乎所有的高级UI组件类都继承自View类。常用的UI组件类有TextView、Button、EditText、RadioButton、Checkbox、ListView等，这些类都位于android.widget包中。2.1UI设计的相关概念2.1.2ViewGroupViewGroup是放置View或ViewGroup的容器，它负责对添加的View或ViewGroup进行管理，告知View或ViewGroup在容器中如何排列。一个ViewGroup也可以加入另外一个ViewGroup。ViewGroupViewGroupViewViewViewView2.1UI设计的相关概念2.1.3布局中的相关概念2.1UI设计的相关概念2.1.4布局的常用属性游戏设置新游戏开始游戏layout_marginToplayout_marginLeftlayout_widthlayout_marginRightlayout_heightlayout_marginBottom

在布局文件中常用一些属性控制View和View之间、View和ViewGroup之间的位置关系，确定显示位置、大小、边距等。2.2布局管理

Android系统中的每一个View或ViewGroup都具有自己的位置和尺寸，在界面中摆放各种View或ViewGroup时，位置、尺寸及排列方式很难进行判断和控制。Android系统提供了多种布局来控制各种View或ViewGroup的位置、尺寸和排列方式。LinearLayout（线性布局）RelativeLayout（相对布局）FrameLayout（帧布局）GridLayout（网格布局）AbsoluteLayout（绝对布局）2.2布局管理2.2.1线性布局LinearLayout表示线性布局。LinearLayout是一个ViewGroup容器，用于设置其内部View或者ViewGroup等组件按照垂直方式排列或水平方式排列。LinearLayout主要通过android:orientation属性控制排列方式，其值为horizontal表示LinearLayout中的子元素在水平方向上从左到右排列，值为vertical时则表示LinearLayout中的子元素在垂直方向上从上到下排列。2.2布局管理2.2.1线性布局1．水平排列2．按照垂直方式排列2.2布局管理2.2.1线性布局3．设置权重

android:layout_weight属性用于设置组件空间占比大小，其值可以是整数，也可以是小数。如果要在水平方向上设置视图宽度如何占比，则android:layout_width的值可以设置为match_parent或0dp，同时设置android:layout_weight属性值；垂直方向同理。2.2布局管理2.2.2相对布局RelativeLayout表示相对布局，它允许子元素指定它们相对于父元素或兄弟元素的位置。在使用过程中主要通过设置4类属性，控制子元素相对于父元素或兄弟元素的位置。1．控制子元素的位置关系属性控制子元素的位置关系属性是指一个子元素相对于另一个子元素位置的上、下、左、右排列方式，其值是子元素的id。

2.2布局管理2.2.2相对布局2．控制子元素的对齐属性控制子元素的对齐属性是指一个子元素相对于另一个子元素位置的上、下、左、右对齐方式，其值是子元素的id。

2.2布局管理2.2.2相对布局3．子元素与父容器RelativeLayout对齐属性子元素与父容器RelativeLayout对齐属性是指一个子元素相对于父容器（RelativeLayout）如何对齐方式，其值为true或false。

2.2布局管理2.2.2相对布局4．子元素相对父容器RelativeLayout居中属性子元素与父容器RelativeLayout居中属性是指一个子元素相对于父容器RelativeLayout居中的方式，其值为true或false。

2.2布局管理2.2.2相对布局5．子元素与父容器定位子元素与父容器RelativeLayout定位示意如图。从图中可以清晰地看见子元素相对于父容器的定位关系。

左部Left右部Right顶部Top底部Bottom中央居中centerInParent水平居中centerHorizontal垂直居中centerVertical2.2布局管理2.2.2相对布局6．梅花布局通过梅花布局案例，把相对布局中涉及的4类属性进行应用，如图。

2.2布局管理2.2.3帧布局FrameLayout表示帧布局，是最简单的一个布局容器。在帧布局中，整个布局被当成一个空白备用区域，所有的子元素都无法指定其位置，默认情况下将它们绘制在该布局的左上角，并且后面的子元素直接覆盖在前面的子元素上，将前面的子元素部分或全部遮挡。

2.2布局管理2.2.4网格布局GridLayout表示网格布局，是Android4.0新增的布局管理。此布局只有在Android4.0及之后的版本才能使用。其主要功能是可以自行设置子元素的排列方式，可以自定义网格布局的行数和列数，可以直接设置子元素位于某行、某列，可以设置子元素横跨几行或者几列等。1．GridLayout属性GridLayout属性可以设置最大列数、行数和方向。

2.2布局管理2.2.4网格布局2．子元素属性子元素属性是指包含在GridLayout中子组件的属性，通过设置子组件的属性控制其在GridLayout中第几行、第几列显示，或者跨几行、跨几列等

。

2.2布局管理2.2.4网格布局3．计算器布局

2.3常用视图和事件处理2.3.1常用视图1．TextView组件——文本框视图组件2．EditText组件——输入框组件

3．Button组件——命令按钮组件4．ImageView组件——图像框视图组件5．RadioButton组件——单选按钮组件6.RadioGroup组件——单选按钮组组件7．CheckBox组件——复选框组件

2.3常用视图和事件处理2.3.2事件处理1．事件处理概念事件：一个事件类型的对象，用来描述发生了什么事，当用户在组件上进行操作时会触发相应的事件。例如单击按钮、打开菜单等，会产生单击事件。各个组件在不同情况下触发的事件不尽相同，产生的事件对象也可能不同。事件源：事件发生的场所，通常指各个组件，例如TextView、Button、菜单等。事件监听器：监听事件源所发生的事件，并对各种事件做出相应的响应。

2.3常用视图和事件处理2.3.2事件处理2．事件监听处理模型

事件事件处理器A事件处理器B事件处理器C事件监听器事件源外部动作2.触发事件源1.事件源注册事件监听器5.根据事件的类型，调用事件处理器做出响应4.触发事件监听器，事件对象被作为参数传入事件监听器3.生成事件2.3常用视图和事件处理常用事件对应的事件监听器及其对应的处理方法2.3常用视图和事件处理View类的事件注册方法2.3常用视图和事件处理2.3.2事件处理

3．事件应用方式下面通过MainActivity对象、匿名类对象、内部类对象作为事件监听器3种方式来说明Android中事件的应用方式。具体实例是通过单击3个按钮改变背景颜色，第一个按钮通过注册MainActivity对象作为事件监听器的方式实现单击事件处理；第二个按钮通过注册匿名类对象作为事件监听器的方式实现单击事件处理；第三个按钮通过注册内部类对象作为事件监听器的方式实现事件处理。

2.4仿微信框架App实现知识目标：

通过仿微信框架App实例，把布局管理、常用组件、事件等基本知识进行串联，使学者能够掌握基本LinearLayout、RadioButton、TextView等组件的使用。技能目标：

掌握框架结构中底部导航的设计，并实现切换。

2.4仿微信框架App实现主要制作一个仿微信框架App，主要由头部区域、内容区域、底部导航区域组成，所示。运行此App时显示图1所示页面，单击【通讯录】显示图2所示页面，其中头部区域和内容区域文字发生变化，底部导航区域中【通讯录】高亮显示，其他显示为灰色。

2.4仿微信框架App实现2.4.1头部区域制作

res/layout目录下创建一个布局文件，名为title.xml，用于显示标题。

<?xmlversion="1.0"encoding="utf-8"?><TextViewxmlns:android="/apk/res/android"android:id="@+id/title_txt"android:layout_width="match_parent"android:layout_height="60dp"android:text="微信"android:background="#ff33b5e5"android:textSize="25sp"android:textColor="#FFFFFF"android:textStyle="bold"android:gravity="center"/>2.4仿微信框架App实现2.4.2主页面布局文件设计

<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><!—头部区域--><includelayout="@layout/title"/><!--内容区域--><!--画一条灰色水平直线--><Viewandroid:layout_width="match_parent"android:layout_height="2dp"android:background="#c9c9c9"/><!--底部导航区域-->

</LinearLayout>2.4仿微信框架App实现2.4.3内容区域制作

<LinearLayoutandroid:layout_width="@+id/linearLayout"android:layout_height="0dp"android:layout_weight="1"android:orientation="vertical"><TextViewandroid:id="@+id/content_txt"android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="45sp"android:textStyle="bold"android:gravity="center"/></LinearLayout>2.4仿微信框架App实现2.4.4底部导航区域制作

<RadioGroup

android:id="@+id/radio_group"android:layout_width="match_parent"android:layout_height="70dp"android:orientation="horizontal"android:padding="2dp">

<!--单选按钮-->

<RadioButtonandroid:id="@+id/r1_btn"android:layout_width="match_parent"android:layout_height="60dp"android:layout_weight="1"android:text="微信"android:gravity="center"android:drawableTop="@drawable/wxdrawable_selector"android:button="@null"android:textColor="@color/color_selector"/>...</RadioGroup>2.4仿微信框架App实现2.4.5图片选择器制作

选择器是指视图的某个属性发生变化而影响另一个属性的变化。如单选按钮被选中，背景设置为一张图片，没有被选中，背景设置为另一张图片，或者按钮被选中时背景设置为一种颜色，没有被选中时背景设置为另一种颜色。<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="/apk/res/android"><itemandroid:state_checked="true"android:drawable="@drawable/t1_1"/> <itemandroid:state_checked="false"android:drawable="@drawable/t1"/></selector>2.4仿微信框架App实现2.4.6颜色选择器制作

颜色选择器与图片选择器原理一样，制作方式大致相同。颜色选择器创建在res/color目录下，color目录一般不存在，需要自己创建。给单选按钮制作一个颜色选择器，选中时颜色设置为蓝色，没有选中时设置为灰色。color_selector.xml的具体实现代码如下：<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="/apk/res/android"><itemandroid:state_checked="true"android:color="#00ff00"/><itemandroid:state_checked="false"android:color="#c9c9c9"/></selector>引用颜色选择器，设置字体颜色<RiadoButton

android:textColor="@color/color_seletor"/>2.4仿微信框架App实现2.4.7底部导航区域优化

在底部导航区域中RadioButton组件含有较多重复的属性，可以通过Android主题样式进行优化，把重复的属性用样式编写，之后通过style属性引用。在res/values目录下打开themes.xml文件，在其中定义一个样式，样式名为navigate_style。把RadioButton中的重复代码用<item>来表示即可。具体实现代码如下：<stylename="navigate_style"><itemname="android:layout_width">match_parent</item><itemname="android:layout_height">match_parent</item><itemname="android:layout_weight">1</item><itemname="android:gravity">center</item><