Android开发工程师教案3用户界面基本组件

智能手机开发教案周次第周，第次课授课时间20年月日/星期授课时数10章节名称第3章用户界面基本组件授课方式课堂讲授（J）；实验课（）；多媒体教学（）；网络教学（）；双语（）教学目的1.理解Android系统中图形界面的MVC设计模式；2.掌握TextView、EditText、Button、ImageButton、RadioButton、CheckBox、DatePicker、TimePicker、ImageView、ListView、TabHost等基本控件的使用方法；3.掌握基本控件的事件处理。教学重点1.各种控件的使用方法；2.控件事件处理的机制。教学难点控件的事件处理机制教学方法讲授+实验教学环境教学用具多媒体教学设备教学过程及内容备注用户界面基础MVC模式：Android图形用户界面框架基于乂丫1乂0401-丫10090加01蚓，模型一视图一控制器）设计模式。模型（Model）是应用程序的核心，用于完成实际的工作。视图（View）是应用程序给手机用户的各种信息反馈的组成。控制器（Controller）是一个应用程序中用于处理外部输入的部分。/ ,, 、按健、触摸屏等操作/\ （控制器）/视图\1 7显示失於、 ,状态更新友好登陆界面的设计与实现预备知识l.TextViewTextView类似于一般图形界面中的标签、文本区域等组件，只是为了单纯地显示一行或多行文本。如下代码：教学过程及内容<TextViewandroid:id="@+id/firstView”android:layout_width="fill_parent”android:layout_height="wrap_content"android:text=£迎您登录成N查询系统，祝你好运哦！！！！！"android:textSize="20sp"android:singleLine="true"android:ellipsize="marquee"android:marqueeRepeatLimit="marquee_forever"android:focusable="true"android:focusableInTouchMode="true"android:scrollHorizontally="true"/>其中android:id属性用于设置控件的唯一标识符，android:layout_width和android:layout_height用于设置控件的宽度和长度。TextView控件中的其余属性见教材表3-1。2.EditTextEditText是用来接受用户输入信息的最重要的组件。Button在界面上是生成一个按钮，按钮可以供用户进行单击操作。如下代码所示：<EditTextandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:hint请输入姓名"/>其中android:hint属性用于设置EditText的输入提示文本。3.ButtonButton在界面上是生成一个按钮，按钮可以供用户进行单击操作。代码如下：<Buttonandroid:id="@+id/loginBtn"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="录"/>在布局文件中定义的控件如果想在Java代码中使用，必须使用findViewById()方法如，要引用第一个TextView，需要使用firstView=(TextView)findViewById(R.id.firstView语句来获取到TextView对象。给Button控件定义点击事件的事件处理方法：loginBtn.setOnClickListener(newOnClickListener(){//对Button实现单击事件监听@OverridepublicvoidonClick(Viewv){〃事件处理代码))上机演示登陆界面的实际编写操作。3.3图片浏览器的设计与实现预备知识1.ImageButtonImageButton直接继承于ImageView，可以在按钮上显示图片。ImageButton与Button的区别在于：Button按钮上显示文字，ImageButton上则显示图片。教学过程及内容ImageButton可以通过android:src属性设置按钮图片，图片放到res/drawable目录下，也可以在代码中通过ImageButton.setImageSource()实现，参数是res/drawable目录下的ResourceID。如下代码所示：<ImageButtonandroid:id="@+id/preBut”android:layout_width="wrap_content”android:layout_height="wrap_content"android:layout_marginLeft="30dip"android:src="@drawable/selectora"/>ImageViewImageView(图片视图)组件，用于在手机界面上显示一副图片。如下代码所示<ImageViewandroid:id="@+id/imageView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:scaleType="centerCrop"android:src="@drawable/pic1"/>上机演示图片浏览器的实际编写。3.4注册界面的设计与实现预备知识l.RadioButtonRadioButton单选按钮是一种双状态的按钮，有checked和unchecked两种状态。当RadioButton的状态是unchecked时，用户可以通过press或click使其checked，但是不能通过再次press或click让RadioButton变为unchecked。RadioButton通常都是和RadioGroup结合使用，RadioGroup是用于创建一组选中状态相互排斥的单选按钮组，是可以容纳多个RadioButton的容器。在一个RadioGroup中最多只有一个RadioButton被选中，如果一个组中选中了一个RadioButton,会自动取消其他按钮的选中状态。代码如下所示：<RadioGroupandroid:id="@+id/radioGroup1"android:orientation="horizontal"android:layout_width="wrap_content"android:layout_height="wrap_content"><RadioButtonandroid:id="@+id/maleButton"android:text="男"android:layout_width="wrap_content"android:layout_height="wrap_content"/><RadioButtonandroid:id="@+id/femaleButton"android:text="女"android:layout_width="wrap_content"android:layout_height="wrap_content"/></RadioGroup>教学过程及内容2.CheckBoxCheckBox可以让用户选择一个以上的选项，为了确定用户是否选择了某一项，就需要对每一个CheckBox设置事件监听。CheckBox需要实现的是android.widget.CompoundButtoiOnCheckedChangeListener()接口，通过其中的ChekBox.isChecked()方法判断该选项是否被选中，true表示选中，false表示未选中。代码如下：<CheckBoxandroid:id="@+id/singBox”android:layout_width="wrap_content”android:layout_height="wrap_content"android:text="唱歌"/>3.ToastToast组件是一种给用户提示信息的视图，该视图以浮于应用程序之上的形式呈现给用户，而且显示的时间有限，过一段时间后自动消失。创建一个Toast涉及的常量有以下两种。LENGTH_LONG：表示持续显示视图或文本较长时间。LENGTH_SHORT：表示持续显示视图或文本较短时间。如下面代码显示一个Toast：Toast.makeText(MainActivity.this,"这是默认样式的toast",Toast.LENGTH_LONG).show();4.RadioGroup的监听器当RadioGroup中的RadioButton被选中的项发生改变时就会引发RadioGroup的OnCheckedChangeListene事件。事件处理代码如下genderGroup.setOnCheckedChangeListener(newOnCheckedChangeListener(){@OverridepublivoidonCheckedChanged(RadioGroupgroup,intcheckedId){添加代码))上机演示图片浏览器的实际编写。设置日期和时间的设计与实现预备知识DatePickerDatePicker继承自FrameLayout类。DatePicker组件的主要功能是向用户提供包含年、月、日的日期数据并允许用户对其修改。如果需要捕获用户修改日期选择组件中的数据事件，需要为DatePicker添加OnDateChangedListener监听器。代码如下：<DatePickerandroid:id="@+id/datePicker"android:layout_width="wrap_content"android:layout_height="wrap_content”/>可以调用调用init()方法初始化DataPicker控件上显示的日期。TimePickerTimePicker也继承自FrameLayout类。TimePicker组件向用户显示一天中的时间(可教学过程及内容以为24小时制，也可以为AM/PM制)，并允许用户进行选择。如果要捕获用户修改时间数据的事件，需要为TimePicker添加OnTimeChangedListener监听器。代码如下:<TimePickerandroid:id="@+id/timePicker”android:layout_width="wrap_content”android:layout_height="wrap_content”/>导航条的设计与实现预备知识l.ListViewListView组件在稍微复杂点的布局中都会用到，利用它可以让用户界面美观、有层次，该组件是android.widget.AbsListView的子类，既可以用来作为数据显示的容器，也可以作为界面的布局。在使用ListView显示内容时，包含3个关键元素。(1)用来显示数据的ListView组件。ListView组件可以直接在布局文件中定义，也可以通过继承ListActivity类获得。(2)用来显示的数据data。data是被映射的字符串、图片或基本组件。(3)用来把数据映射到ListView上的适配器ListAdapter。根据列表的适配器类型，列表分为3种，ArrayAdapter、SimpleAdapter和SimpleCursorAdapter。|Da出.0匚一八叫Mr―।囿*沁,CurstirArniyl.isl⑴在要显示列表的界面布局文件中添加ListView组件，代码如下：<ListViewandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:id="@+id/listview"/>(2)定义数据适配器，前面已经介绍过，数据适配器有ArrayAdapter、SimpleAdapter和SimpleCursorAdapter3种类型。其中ArrayAdapter最简单，它只能展示一行文本信息；SimpleAdapter有最好的扩充性，可以自定义各种效果，在下面的自定义ListView组件中会详细介绍；SimpleCursorAdapter可以认为是SimpleAdapter对数据库的简单结合，可以方便地将数据库的内容以列表的形式展示出来，它的用法将在第7章中介绍，本节不再详述。实现代码如下：ArrayAdapteradapter=newArrayAdapter(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)自定义显示列表项的布局文件。例如下面代码：<?xmlversion="1.0"encoding="utf-8”?><LinearLayoutxmlns:android=/apk/res/androidandroid:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="fill_parent"><ImageViewandroid:id="@+id/icon"android:layout_width="48dip”android:layout_height="48dip"/><TextViewandroid:id="@+id/text"android:layout_gravity="center_vertical"android:layout_width="0dip"android:layout_weight="1"android:layout_height="wrap_content"/></LinearLayout>(3)定义数据适配器。为了灵活使用自定义ListView组件，需要使用SimpleAdapter适配器。使用SimpleAdapter适配器需要分两步完成。第一步：定义数据结构，添加数据。从ListView组件显示信息的本身来分析，纵向看，ListView就是一个List，横向看，ListView是一个包含键值对的Map，所以数据结构就是List<Map<String,Object>>，添加数据的关键代码如下：List<HashMap<Strin@bjecb>data=newArrayList<HashMap<Stri]O(bject>>();HashMap<String,Object>info=newHashMap<String,Object>();〃将头像和姓名分别放入Map键值对中info.put("img",R.drawale.iconl);info.put("name","王庆林")；data.add(info);第二步：使用SimpleAdapter向ListView中填入数据。SimpleAdapter将一个List作为数据源，可以让ListView进行更加个性化的显示。它的构造方法格式如下：SimpleAdapter(Contextcontext,List<?ExtendsMap<String,?>>data,intresource,String[]from,int[]to);参数说明：Context表示当前上下文；Data表示数据源；Resource表示自定义的布局文件资源；From表示定义ListView中的每一项数据索引，也就是Map中的键集合；To表示自定义布局文件中的资源ID集合，与From的参数要一一对应。代码如下：SimpleAdapteradapter=newSimpleAdapter(ListViewActivity.this,data,R.layout.person,newString[]{'img","name"},newint[]{R.idicon,R.id.text});(4)将适配器与ListView相关联，代码如下：lvwSimple.setAdapter(adapter);模拟文件下载进度条的设计与实现预备知识在Android系统中，ProgressBar（进度条）组件，可以向用户显示某个应用程序耗时操作完成的百分比，因此它需要动态地显示进度教学过程及内容备注<ProgressBarandroid:id="@+id/progressBar1”style="?android:attr/progressBarStyleHorizontal”android:layout_width="255dp"android:layout_height="wrap_content"android:visibility="visible"/>进度条需要用线程实现进度条的递增。代码如下：unnablemyRun=newRunnable(){@Overridepublicvoidrun(){while(true){//获取主线程Handler的MessageMessagemsg=handler.obtainMessage();//将进度值作为消息的参数进行封装，进度自加1msg.arg1=progressValue++;//将消息发送给主线程的Handlerhandler.sendMessage(msg);if(progressValue>size)//当Value的值大于size时退出循环break;try{Thread.sleep(100);/为了看!U进度衮动效果，可以设置长的线程休民时间}catch(InterruptedExceptione){//线程休眠方法会出现异常，所以需要捕获异常e.printStackTrace();)))考试系统界面的设计与实现预备知识TabHost是整个Tab的容器，包括两部分：TabWidget和FrameLayout。TabWidget就是每个Tab的标签，是可供用户选择的标签集合；FrameLayout是显示内容的帧布局，FrameLayout的内容将在第4章详细介绍，每个Tab都对应自己的布局。TabHost提供了如下两个方法来创建选项卡、添加选项卡。newTabSpec(Stringtag)：创建一个以tag为标识的选项卡。addTab(TabHost.TabSpectabSpec)：向TabHost中添加一个tabSpec选项卡。TabHost的实现有两种方式。Activity继承TabActivity实现步骤如下。(1)因为TabActivity类默认包含了一个TabHost组件，所以直接调用getTabHost()方法获取TabHost对象。调用 LayoutInflater.from(this).inflate(R.layout.tabhost_layout,tabhost.getTabContentView(),tru§)法，将Tab页的布局转换为Tab标签页可以使用的View对象。inflate()方法的第一个参数表示要使用的布局文件资源ID；第二个参数表示持有选项卡的内容，获取FrameLayout；第三个参数表示解析的XML文件为根视图View。(3)调用addTab(tabHost.newTabSpec(Stringag).setIndicator(CharSequencdabel,Drawableicon).setContent(intviewId))方法，添加Tab页。setIndicator()方法的第一个参数表示Tab的标题；第二个参数表示Tab的图标；setContent()方法用于设定Tab页所关联的布局文件资源ID。教学过程及内容Activity不继承TabActivity实现步骤如下。(1)在布局文件中定义TabHost组件，TabWidget的id必须是@android:id/tabs