第2章 Android UI开发教学设计.docx

上传人:b****4 文档编号:4344338 上传时间:2022-11-30 格式:DOCX 页数:14 大小:217.65KB
下载 相关 举报
第2章 Android UI开发教学设计.docx_第1页
第1页 / 共14页
第2章 Android UI开发教学设计.docx_第2页
第2页 / 共14页
第2章 Android UI开发教学设计.docx_第3页
第3页 / 共14页
第2章 Android UI开发教学设计.docx_第4页
第4页 / 共14页
第2章 Android UI开发教学设计.docx_第5页
第5页 / 共14页
点击查看更多>>
下载资源
资源描述

第2章 Android UI开发教学设计.docx

《第2章 Android UI开发教学设计.docx》由会员分享,可在线阅读,更多相关《第2章 Android UI开发教学设计.docx(14页珍藏版)》请在冰豆网上搜索。

第2章 Android UI开发教学设计.docx

第2章AndroidUI开发教学设计

《移动应用开发技术》

教学设计

 

课程名称:

移动应用开发技术

授课年级:

授课学期:

教师姓名:

 

课题名称

第2章AndroidUI开发

计划学时

6学时

内容分析

Android程序开发最重要的一个环节就是界面处理,界面的美观度直接影响用户的第一印象,因此,开发一个整齐、美观的界面是至关重要的,本章将针对Android中的UI开发进行详细地讲解。

教学目标

1、要求学生了解什么是UI,以及View和ViewGroup的继承关系;

2、要求学生掌握常见布局的使用,并能独立设计美观的界面布局;

3、要求学生掌握样式和主题的使用,能使用样式或者主题优化布局;

4、要求学生掌握JUnit、LogCat、Toast的使用,会对程序进行测试;

教学重点

六种常见布局、样式和主题、国际化、程序调试

教学难点

样式和主题

教学方式

教师采用课堂讲授为主,使用教学PPT辅助授课。

第一学时

(UI概述、布局的创建、相对布局、线性布局)

一、情景导入

1、AndroidUI介绍(PPT8-9)

大家有没有发现,Android应用或者游戏界面做的都非常美观,而且特别吸引人,让大家很有兴趣使用,例如QQ界面、微信界面、网易新闻等等。

这个就是界面的UI效果。

Android程序开发最重要的一个环节就是界面处理,界面的美观度直接影响用户的第一印象,因此,开发一个整齐、美观的界面是至关重要的,本章将针对Android中的UI开发进行详细地讲解。

2、引出UI的相关知识

在本章中,我们首先要了解UI这个概念,然后掌握常见的几种布局方式,以及如何使用样式和主题,最后会讲解国际化、程序调试等知识。

二、知识讲解

1、UI概述(PPT10)

老师引导,在学习AndroidUI开发之前,首先要了解UI这个概念。

所谓的UI(UserInterface),它是人与手机之间数据传递、交互信息的重要媒介和对话接口,是Android系统的重要组成部分。

一个应用程序,除了其功能强大之外,最重要的就是完美的UI设计。

然后引出,一个Android应用的界面是由View和ViewGroup对象构建的。

分析View与ViewGroup的继承关系。

2、布局的创建(PPT11)

老师引导,通过前面的学习,现在大家了解了什么是UI,接下来我们就演示一下Android中如何创建布局。

首先说明创建布局的步骤,然后进行动手实践,在实践的过程中针对每个步骤进行解释说明。

3、相对布局(PPT12-14)

老师通过问题引导,大家之前都做过预习,想一想Android中有多少种布局?

学生回答之后老师进行说明。

Android中的布局分为六种,分别是相对布局、线性布局、表格布局、网格布局、帧布局、绝对布局,本节课先为大家讲解相对布局。

讲解相对布局时,先要介绍一些常用属性,然后给出相对布局的图,进而给出相对布局的代码。

4、线性布局(PPT15)

老师引导,下面我们讲解第2种布局——线性布局,线性布局是Android中较为常用的布局方式,它使用标签表示。

介绍线性布局主要有两种形式,一种是水平线性布局,一种是垂直线性布局。

三、知识巩固

1、总结知识点,使用博学谷系统中的随堂练习题巩固本节课所学知识。

2、使用博学谷系统中的测试题给学生布置作业。

第二学时

(表格布局、网格布局、帧布局、绝对布局、用户注册案例)

一、知识回顾

1、对上节课留的作业进行答疑。

2、回顾总结上节课的内容,引出本节课主题

上节课讲解了UI概述、布局的创建、相对布局、线性布局等知识。

接下来本节将针对表格布局、网格布局、帧布局、绝对布局、用户注册案例进行讲解。

二、知识讲解

1、表格布局(PPT16)

老师引导,表格布局相对于前两种布局差异较大,表格布局是让控件以表格的形式来排列组件的,只要将组件或信息放在单元格中,组件就可以整齐的排列。

在TableLayout中,行数由TableRow对象控制的,即布局中有多少TableRow对象,就有多少行。

每个TableRow中可以放置多个组件。

给出表格布局的代码,然后针对代码进行详细的分析,并讲解其中的重要知识。

2、网格布局(PPT17-18)

老师引导,网格布局与表格布局有些类似,网格布局用一组无限细的直线将绘图区域分成行、列和单元,并指定控件的显示区域和控件在该区域的显示方式。

它实现了控件的交错显示,能够避免因布局嵌套对设备性能的影响,更利于自由布局的开发。

需要注意的是,网格布局是Android4.0新增的布局,如果在项目中使用,需要把SDK的最低版本指定为Android4.0(API14)以上。

AndroidManifest.xml中的配置SDK最大兼容版本和最小兼容版本的代码如下所示:

android:

minSdkVersion="14"

android:

targetSdkVersion="17"/>

3、帧布局(PPT19)

老师提问引导,大家有没有在手机上玩过刮刮卡,你们知道这种界面是怎么实现的吗?

同学猜测性的回答,老师说明,其实这种功能就是通过帧布局实现的,一个刮刮卡就是两个重叠在一起的两张图片,通过手指的移动将上一张图片变成透明,然后显示刮奖的效果。

帧布局是Android布局中最简单的一种,帧布局为每个加入其中的控件创建一个空白区域(称为一帧,每个控件占据一帧)。

采用帧布局方式设计界面时,只能在屏幕左上角显示一个控件,如果添加多个控件,这些控件会按照顺序在屏幕的左上角重叠显示。

4、绝对布局(PPT20-21)

老师引导,接下来为大家介绍最后一种布局——绝对布局,绝对布局通过指定x、y坐标来控制每一个组件的位置,放入该布局的组件需要通过android:

layout_x和android:

layout_y两个属性指定其准确的坐标值,并显示在屏幕上。

绝对布局通常用于游戏中,精确的控制人物的位置。

需要注意的是,理论上绝对布局可以完成任何的布局设计,但是实际的工程应用中不提倡使用这种布局。

因为使用这种布局不但需要精确计算每个组件的大小,而且当应用程序运行在不同屏幕的手机上产生的效果也不相同,因此,一般不推荐使用绝对布局。

5、用户注册案例(PPT22)

老师引导,现在大家将6种布局都学完了,接下来通过一个注册用户的综合案例来巩固大家对布局的掌握。

这个页面包含了相对布局(RelativeLayout)、线性布局(LinearLayout)、文本控件(TextView)、编辑框(EditText)、普通按钮(Button)、单选按钮(RadioButton)。

三、知识巩固

1、总结知识点,使用博学谷系统中的随堂练习题巩固本节课所学知识。

2、使用博学谷系统中的测试题给学生布置作业。

第三学时

(样式和主题、国际化)

一、知识回顾

1、对上节课留的作业进行答疑。

2、回顾总结上节课的内容,引出本节课主题

上节课讲解了Android中的常见布局,以及通过一个用户注册案例来对布局的知识进行巩固提升,接下来本节将针对样式和主题、国际化进行讲解。

二、知识讲解

1、样式和主题(PPT23-25)

老师引导,在Android中为了给用户带来更好的界面体验效果,提供了很多自带的样式和主题,这些样式和主题可以定义布局在界面上显示的风格。

•样式:

Android中的样式和CSS样式作用相似,都是用于为界面元素定义显示风格,它是一个包含一个或者多个View控件属性的集合。

样式只能作用于单个View,如EditText、TextView,使用样式可以指定多个控件具有的重复属性统一抽取出来进行编写,避免书写大量重复代码。

•主题:

主题也是包含一个或者多个View控件属性的集合,但它作用范围不同。

主题是通过AndroidManifest.xml中的节点用在整个应用或者某个Activity,它的影响是全局性的。

如果一个应用中使用了主题,同时应用下的View也使用了样式,那么当主题和样式中的属性发生冲突时,样式的优先级高于主题。

介绍完样式和主题概念,接着讲解如何使用系统自带的主题。

在Android系统中,自带的样式和主题都可以直接拿来用,例如设置主题可以通过android:

theme="android:

style/…"在弹出的对话框中选择。

然后再讲解,当自定义的样式或者主题不能满足需求时,还可以自定义,并说明自定义样式和主题的步骤。

1)在res/values目录下创建一个样式文件style.xml,添加一个根节点。

2)在节点中添加一个