Android开发工程师教案3第三章用户界面基本组件.doc

智能手机开发教案周 次第 周， 第 次课授课时间20 年 月 日 / 星期授课时数10章 节名 称 第3章 用户界面基本组件授 课方 式课堂讲授（）；实验课（ ）；多媒体教学（ ）；网络教学（ ）；双语（ ）教学目的1理解Android系统中图形界面的MVC设计模式；2.掌握TextView、EditText、Button、ImageButton、RadioButton、CheckBox、DatePicker、TimePicker、ImageView、ListView、TabHost等基本控件的使用方法；3. 掌握基本控件的事件处理。 教学重点1. 各种控件的使用方法；2.控件事件处理的机制。教学难点控件的事件处理机制教学方法讲授+实验教学环境教学用具多媒体教学设备教学过 程 及 内容备 注3.1 用户界面基础MVC模式：Android图形用户界面框架基于MVC(Model-View-Controller，模型视图控制器)设计模式。模型(Model)是应用程序的核心，用于完成实际的工作。视图(View)是应用程序给手机用户的各种信息反馈的组成。控制器(Controller)是一个应用程序中用于处理外部输入的部分。3.2 友好登陆界面的设计与实现3.2.1 预备知识1.TextViewTextView类似于一般图形界面中的标签、文本区域等组件，只是为了单纯地显示一行或多行文本。如下代码：教学过 程 及 内容备 注其中android:id属性用于设置控件的唯一标识符，android:layout_width和android:layout_height用于设置控件的宽度和长度。TextView控件中的其余属性见教材表3-1。2.EditTextEditText是用来接受用户输入信息的最重要的组件。Button在界面上是生成一个按钮，按钮可以供用户进行单击操作。如下代码所示：其中android:hint属性用于设置EditText的输入提示文本。3.ButtonButton在界面上是生成一个按钮，按钮可以供用户进行单击操作。代码如下：在布局文件中定义的控件如果想在Java代码中使用，必须使用findViewById( )方法如，要引用第一个TextView，需要使用 firstView=(TextView)findViewById(R.id.firstView)语句来获取到TextView对象。给Button控件定义点击事件的事件处理方法：loginBtn.setOnClickListener(new OnClickListener()/ 对Button实现单击事件监听 Override public void onClick(View v) /事件处理代码 上机演示登陆界面的实际编写操作。3.3 图片浏览器的设计与实现3.3.1 预备知识1.ImageButtonImageButton直接继承于ImageView，可以在按钮上显示图片。ImageButton与Button的区别在于：Button按钮上显示文字，ImageButton上则显示图片。教学过 程 及 内容备 注ImageButton可以通过android:src属性设置按钮图片，图片放到res/drawable目录下，也可以在代码中通过ImageButton.setImageSource( )实现，参数是res/drawable目录下的Resource ID。如下代码所示： 2. ImageViewImageView(图片视图)组件，用于在手机界面上显示一副图片。如下代码所示上机演示图片浏览器的实际编写。3.4 注册界面的设计与实现3.4.1 预备知识1.RadioButtonRadioButton单选按钮是一种双状态的按钮，有checked和unchecked两种状态。当RadioButton的状态是unchecked时，用户可以通过press或click使其checked，但是不能通过再次press或click让RadioButton变为unchecked。RadioButton通常都是和RadioGroup结合使用，RadioGroup是用于创建一组选中状态相互排斥的单选按钮组，是可以容纳多个RadioButton的容器。在一个RadioGroup中最多只有一个RadioButton被选中，如果一个组中选中了一个RadioButton，会自动取消其他按钮的选中状态。代码如下所示： 教学过 程 及 内容备 注2.CheckBoxCheckBox可以让用户选择一个以上的选项，为了确定用户是否选择了某一项，就需要对每一个CheckBox设置事件监听。CheckBox需要实现的是android.widget.CompoundButton. OnCheckedChangeListener( )接口，通过其中的ChekBox.isChecked( )方法判断该选项是否被选中，true表示选中，false表示未选中。代码如下：3.ToastToast组件是一种给用户提示信息的视图，该视图以浮于应用程序之上的形式呈现给用户，而且显示的时间有限，过一段时间后自动消失。创建一个Toast涉及的常量有以下两种。(1) LENGTH_LONG：表示持续显示视图或文本较长时间。(2) LENGTH_SHORT：表示持续显示视图或文本较短时间。如下面代码显示一个Toast：Toast.makeText(MainActivity.this, 这是默认样式的toast,Toast. LENGTH_LONG).show();4.RadioGroup的监听器当RadioGroup中的RadioButton被选中的项发生改变时就会引发RadioGroup的OnCheckedChangeListener事件。事件处理代码如下:genderGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() Override public void onCheckedChanged(RadioGroup group, int checkedId) /添加代码上机演示图片浏览器的实际编写。3.5 设置日期和时间的设计与实现3.5.1 预备知识1. DatePickerDatePicker继承自FrameLayout类。DatePicker组件的主要功能是向用户提供包含年、月、日的日期数据并允许用户对其修改。如果需要捕获用户修改日期选择组件中的数据事件，需要为DatePicker添加OnDateChangedListener监听器。代码如下：可以调用调用init( )方法初始化DataPicker控件上显示的日期。2. TimePickerTimePicker也继承自FrameLayout类。TimePicker组件向用户显示一天中的时间(可教学过 程 及 内容备 注以为24小时制，也可以为AM/PM制)，并允许用户进行选择。如果要捕获用户修改时间数据的事件，需要为TimePicker添加OnTimeChangedListener监听器。代码如下：3.6 导航条的设计与实现3.6.1 预备知识1.ListViewListView组件在稍微复杂点的布局中都会用到，利用它可以让用户界面美观、有层次，该组件是android.widget.AbsListView的子类，既可以用来作为数据显示的容器，也可以作为界面的布局。在使用ListView显示内容时，包含3个关键元素。(1) 用来显示数据的ListView组件。ListView组件可以直接在布局文件中定义，也可以通过继承ListActivity类获得。(2) 用来显示的数据data。data是被映射的字符串、图片或基本组件。(3) 用来把数据映射到ListView上的适配器ListAdapter。根据列表的适配器类型，列表分为3种，ArrayAdapter、SimpleAdapter和SimpleCursorAdapter。(1) 在要显示列表的界面布局文件中添加ListView组件，代码如下： (2) 定义数据适配器，前面已经介绍过，数据适配器有ArrayAdapter、SimpleAdapter和SimpleCursorAdapter 3种类型。其中ArrayAdapter最简单，它只能展示一行文本信息；SimpleAdapter有最好的扩充性，可以自定义各种效果，在下面的自定义ListView组件中会详细介绍；SimpleCursorAdapter可以认为是SimpleAdapter对数据库的简单结合，可以方便地将数据库的内容以列表的形式展示出来，它的用法将在第7章中介绍，本节不再详述。实现代码如下： ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_ list_item_1, items);ArrayAdapter有3个参数，第一个参数为Context，第二个参数为Android系统提供的常用布局风格(表3-7)或自定义的布局文件(将在“自定义ListView组件”中详细介绍)，第三个参数为数组(即ListView列表中的内容，不能用int型数组)。2自定义ListView组件自定义ListView组件的使用步骤如下。(1) 在要显示列表的界面布局文件中添加ListView组件，代码与普通ListView组件一样。教学过 程 及 内容备 注(2) 自定义显示列表项的布局文件。例如下面代码： (3) 定义数据适配器。为了灵活使用自定义ListView组件，需要使用SimpleAdapter适配器。使用SimpleAdapter适配器需要分两步完成。第一步：定义数据结构，添加数据。从ListView组件显示信息的本身来分析，纵向看，ListView就是一个List，横向看，ListView是一个包含键值对的Map，所以数据结构就是ListMap，添加数据的关键代码如下：ListHashMap data = new ArrayListHashMap(); HashMap info = new HashMap(); /将头像和姓名分别放入Map键值对中info.put(img, R.drawale.icon1);info.put(name, 王庆林);data.add(info); 第二步：使用SimpleAdapter向ListView中填入数据。SimpleAdapter将一个List作为数据源，可以让ListView进行更加个性化的显示。它的构造方法格式如下：SimpleAdapter(Context context,List? Extends Map data,int resource,String from, int to);参数说明：Context表示当前上下文； Data表示数据源；Resource表示自定义的布局文件资源；From表示定义ListView中的每一项数据索引，也就是Map中的键集合；To表示自定义布局文件中的资源ID集合，与From的参数要一一对应。代码如下：SimpleAdapter adapter = new SimpleAdapter(ListViewActivity.this,data, R.layout.person, new Stringimg,name, new intR.id.icon,R.id.text);(4) 将适配器与ListView相关联，代码如下： lvwSimple .setAdapter(adapter );3.7 模拟文件下载进度条的设计与实现3.7.1 预备知识在Android系统中，ProgressBar(进度条)组件，可以向用户显示某个应用程序耗时操作完成的百分比，因此它需要动态地显示进度教学过 程 及 内容备 注进度条需要用线程实现进度条的递增。代码如下：unnable myRun = new Runnable() Override public void run() while (true) / 获取主线程Handler的Message Message msg = handler.obtainMessage(); / 将进度值作为消息的参数进行封装，进度自加1 msg.arg1 = progressValue+; / 将消息发送给主线程的Handler handler.sendMessage(msg); if (progressValue size)/ 当Value的值大于size时退出循环 break; try Thread.sleep(100);/ 为了看到进度滚动效果，可以设置较长的线程休眠时间 catch (InterruptedException e) / 线程休眠方法会出现异常，所以需要捕获异常 e.printStackTrace(); 3.8 考试系统界面的设计与实现3.8.1 预备知识TabHost是整个Tab的容器，包括两部分：TabWidget和FrameLayout。TabWidget就是每个Tab的标签，是可供用户选择的标签集合；FrameLayout是显示内容的帧布局， FrameLayout的内容将在第4章详细介绍，每个Tab都对应自己的布局。TabHost提供了如下两个方法来创建选项卡、添加选项卡。(1) newTabSpec(String tag)：创建一个以tag为标识的选项卡。(2) addTab(TabHost.TabSpec tabSpec)：向TabHost中添加一个tabSpec选项卡。TabHost的实现有两种方式。1Activity继承TabActivity实现步骤如下。(1) 因为TabActivity类默认包含了一个TabHost组件，所以直接调用getTabHost( )方法获取TabHost对象。(2) 调用LayoutInflater.from(this).inflate(R.layout.tabhost_layout, tabhost.getTabContentView( ), true)方法，将Tab页的布局转换为Tab标签页可以使用的View对象。inflate( )方法的第一个参数表示要使用的布局文件资源ID；第二个参数表示持有选项卡的内容，获取FrameLayout；第三个参数表示解析的XML文件为根视图View。(3) 调用addTab(tabHost.newTabSpec(String tag).setIndicator(CharSequence label, Drawable icon). setContent(int viewId)方法，添加Tab页。setIndicator( )方法的第一个参数表示Tab的标题；第二个参数表示Tab的图标；setContent( )方法用于设定Tab页所关联的布局文件资源ID。教学过 程 及 内容备 注2Activity不继承TabActivity实现步骤如下。(1) 在布局文件中定义TabHost组件，TabWidget的id必须是android:id/tabs，FrameLayout的id必须是android:id/tabcontent。(2) 使用TabHost tabHost=(TabHost)findViewById(R.id.tabhost)语句获得TabHost对象，并通过tabHost.setup( )方法加载启动tabHost。(3)