智能手機(jī)開發(fā)教案周次第周，第次課授課時間20年月日/星期授課時數(shù)10章節(jié)名稱第3章用戶界面基本組件授課方式課堂講授（J）；實(shí)驗(yàn)課（）；多媒體教學(xué)（）；網(wǎng)絡(luò)教學(xué)（）；雙語（）教學(xué)目的1.理解Android系統(tǒng)中圖形界面的MVC設(shè)計模式；2.掌握TextView、EditText、Button、ImageButton、RadioButton、CheckBox、DatePicker、TimePicker、ImageView、ListView、TabHost等基本控件的使用方法；3.掌握基本控件的事件處理。教學(xué)重點(diǎn)1.各種控件的使用方法；2.控件事件處理的機(jī)制。教學(xué)難點(diǎn)控件的事件處理機(jī)制教學(xué)方法講授+實(shí)驗(yàn)教學(xué)環(huán)境教學(xué)用具多媒體教學(xué)設(shè)備教學(xué)過程及內(nèi)容備注用戶界面基礎(chǔ)MVC模式：Android圖形用戶界面框架基于乂丫1乂0401-丫10090加01蚓，模型一視圖一控制器）設(shè)計模式。模型（Model）是應(yīng)用程序的核心，用于完成實(shí)際的工作。視圖（View）是應(yīng)用程序給手機(jī)用戶的各種信息反饋的組成?？刂破鳎–ontroller）是一個應(yīng)用程序中用于處理外部輸入的部分。/ ,, 、按健、觸摸屏等操作/\ （控制器）/視圖\1 7顯示失於、 ,狀態(tài)更新友好登陸界面的設(shè)計與實(shí)現(xiàn)預(yù)備知識l.TextViewTextView類似于一般圖形界面中的標(biāo)簽、文本區(qū)域等組件，只是為了單純地顯示一行或多行文本。如下代碼：教學(xué)過程及內(nèi)容<TextViewandroid:id="@+id/firstView”android:layout_width="fill_parent”android:layout_height="wrap_content"android:text=￡迎您登錄成N查詢系統(tǒng)，祝你好運(yù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屬性用于設(shè)置控件的唯一標(biāo)識符，android:layout_width和android:layout_height用于設(shè)置控件的寬度和長度。TextView控件中的其余屬性見教材表3-1。2.EditTextEditText是用來接受用戶輸入信息的最重要的組件。Button在界面上是生成一個按鈕，按鈕可以供用戶進(jìn)行單擊操作。如下代碼所示：<EditTextandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:hint請輸入姓名"/>其中android:hint屬性用于設(shè)置EditText的輸入提示文本。3.ButtonButton在界面上是生成一個按鈕，按鈕可以供用戶進(jìn)行單擊操作。代碼如下：<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控件定義點(diǎn)擊事件的事件處理方法：loginBtn.setOnClickListener(newOnClickListener(){//對Button實(shí)現(xiàn)單擊事件監(jiān)聽@OverridepublicvoidonClick(Viewv){〃事件處理代碼))上機(jī)演示登陸界面的實(shí)際編寫操作。3.3圖片瀏覽器的設(shè)計與實(shí)現(xiàn)預(yù)備知識1.ImageButtonImageButton直接繼承于ImageView，可以在按鈕上顯示圖片。ImageButton與Button的區(qū)別在于：Button按鈕上顯示文字，ImageButton上則顯示圖片。教學(xué)過程及內(nèi)容ImageButton可以通過android:src屬性設(shè)置按鈕圖片，圖片放到res/drawable目錄下，也可以在代碼中通過ImageButton.setImageSource()實(shí)現(xiàn)，參數(shù)是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(圖片視圖)組件，用于在手機(jī)界面上顯示一副圖片。如下代碼所示<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"/>上機(jī)演示圖片瀏覽器的實(shí)際編寫。3.4注冊界面的設(shè)計與實(shí)現(xiàn)預(yù)備知識l.RadioButtonRadioButton單選按鈕是一種雙狀態(tài)的按鈕，有checked和unchecked兩種狀態(tài)。當(dāng)RadioButton的狀態(tài)是unchecked時，用戶可以通過press或click使其checked，但是不能通過再次press或click讓RadioButton變?yōu)閡nchecked。RadioButton通常都是和RadioGroup結(jié)合使用，RadioGroup是用于創(chuàng)建一組選中狀態(tài)相互排斥的單選按鈕組，是可以容納多個RadioButton的容器。在一個RadioGroup中最多只有一個RadioButton被選中，如果一個組中選中了一個RadioButton,會自動取消其他按鈕的選中狀態(tài)。代碼如下所示：<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>教學(xué)過程及內(nèi)容2.CheckBoxCheckBox可以讓用戶選擇一個以上的選項(xiàng)，為了確定用戶是否選擇了某一項(xiàng)，就需要對每一個CheckBox設(shè)置事件監(jiān)聽。CheckBox需要實(shí)現(xiàn)的是android.widget.CompoundButtoiOnCheckedChangeListener()接口，通過其中的ChekBox.isChecked()方法判斷該選項(xiàng)是否被選中，true表示選中，false表示未選中。代碼如下：<CheckBoxandroid:id="@+id/singBox”android:layout_width="wrap_content”android:layout_height="wrap_content"android:text="唱歌"/>3.ToastToast組件是一種給用戶提示信息的視圖，該視圖以浮于應(yīng)用程序之上的形式呈現(xiàn)給用戶，而且顯示的時間有限，過一段時間后自動消失。創(chuàng)建一個Toast涉及的常量有以下兩種。LENGTH_LONG：表示持續(xù)顯示視圖或文本較長時間。LENGTH_SHORT：表示持續(xù)顯示視圖或文本較短時間。如下面代碼顯示一個Toast：Toast.makeText(MainActivity.this,"這是默認(rèn)樣式的toast",Toast.LENGTH_LONG).show();4.RadioGroup的監(jiān)聽器當(dāng)RadioGroup中的RadioButton被選中的項(xiàng)發(fā)生改變時就會引發(fā)RadioGroup的OnCheckedChangeListene事件。事件處理代碼如下genderGroup.setOnCheckedChangeListener(newOnCheckedChangeListener(){@OverridepublivoidonCheckedChanged(RadioGroupgroup,intcheckedId){添加代碼))上機(jī)演示圖片瀏覽器的實(shí)際編寫。設(shè)置日期和時間的設(shè)計與實(shí)現(xiàn)預(yù)備知識DatePickerDatePicker繼承自FrameLayout類。DatePicker組件的主要功能是向用戶提供包含年、月、日的日期數(shù)據(jù)并允許用戶對其修改。如果需要捕獲用戶修改日期選擇組件中的數(shù)據(jù)事件，需要為DatePicker添加OnDateChangedListener監(jiān)聽器。代碼如下：<DatePickerandroid:id="@+id/datePicker"android:layout_width="wrap_content"android:layout_height="wrap_content”/>可以調(diào)用調(diào)用init()方法初始化DataPicker控件上顯示的日期。TimePickerTimePicker也繼承自FrameLayout類。TimePicker組件向用戶顯示一天中的時間(可教學(xué)過程及內(nèi)容以為24小時制，也可以為AM/PM制)，并允許用戶進(jìn)行選擇。如果要捕獲用戶修改時間數(shù)據(jù)的事件，需要為TimePicker添加OnTimeChangedListener監(jiān)聽器。代碼如下:<TimePickerandroid:id="@+id/timePicker”android:layout_width="wrap_content”android:layout_height="wrap_content”/>導(dǎo)航條的設(shè)計與實(shí)現(xiàn)預(yù)備知識l.ListViewListView組件在稍微復(fù)雜點(diǎn)的布局中都會用到，利用它可以讓用戶界面美觀、有層次，該組件是android.widget.AbsListView的子類，既可以用來作為數(shù)據(jù)顯示的容器，也可以作為界面的布局。在使用ListView顯示內(nèi)容時，包含3個關(guān)鍵元素。(1)用來顯示數(shù)據(jù)的ListView組件。ListView組件可以直接在布局文件中定義，也可以通過繼承ListActivity類獲得。(2)用來顯示的數(shù)據(jù)data。data是被映射的字符串、圖片或基本組件。(3)用來把數(shù)據(jù)映射到ListView上的適配器ListAdapter。根據(jù)列表的適配器類型，列表分為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)定義數(shù)據(jù)適配器，前面已經(jīng)介紹過，數(shù)據(jù)適配器有ArrayAdapter、SimpleAdapter和SimpleCursorAdapter3種類型。其中ArrayAdapter最簡單，它只能展示一行文本信息；SimpleAdapter有最好的擴(kuò)充性，可以自定義各種效果，在下面的自定義ListView組件中會詳細(xì)介紹；SimpleCursorAdapter可以認(rèn)為是SimpleAdapter對數(shù)據(jù)庫的簡單結(jié)合，可以方便地將數(shù)據(jù)庫的內(nèi)容以列表的形式展示出來，它的用法將在第7章中介紹，本節(jié)不再詳述。實(shí)現(xiàn)代碼如下：ArrayAdapteradapter=newArrayAdapter(this,android.R.layout.simple_list_item_1,items);ArrayAdapter有3個參數(shù)，第一個參數(shù)為Context，第二個參數(shù)為Android系統(tǒng)提供的常用布局風(fēng)格(表3-7)或自定義的布局文件(將在“自定義ListView組件”中詳細(xì)介紹)，第三個參數(shù)為數(shù)組(即ListView列表中的內(nèi)容，不能用int型數(shù)組)。2.自定義ListView組件自定義ListView組件的使用步驟如下。(1)在要顯示列表的界面布局文件中添力ListView組件，代碼與普ListView組件一樣。教學(xué)過程及內(nèi)容(2)自定義顯示列表項(xiàng)的布局文件。例如下面代碼：<?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)定義數(shù)據(jù)適配器。為了靈活使用自定義ListView組件，需要使用SimpleAdapter適配器。使用SimpleAdapter適配器需要分兩步完成。第一步：定義數(shù)據(jù)結(jié)構(gòu)，添加數(shù)據(jù)。從ListView組件顯示信息的本身來分析，縱向看，ListView就是一個List，橫向看，ListView是一個包含鍵值對的Map，所以數(shù)據(jù)結(jié)構(gòu)就是List<Map<String,Object>>，添加數(shù)據(jù)的關(guān)鍵代碼如下：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中填入數(shù)據(jù)。SimpleAdapter將一個List作為數(shù)據(jù)源，可以讓ListView進(jìn)行更加個性化的顯示。它的構(gòu)造方法格式如下：SimpleAdapter(Contextcontext,List<?ExtendsMap<String,?>>data,intresource,String[]from,int[]to);參數(shù)說明：Context表示當(dāng)前上下文；Data表示數(shù)據(jù)源；Resource表示自定義的布局文件資源；From表示定義ListView中的每一項(xiàng)數(shù)據(jù)索引，也就是Map中的鍵集合；To表示自定義布局文件中的資源ID集合，與From的參數(shù)要一一對應(yīng)。代碼如下：SimpleAdapteradapter=newSimpleAdapter(ListViewActivity.this,data,R.layout.person,newString[]{'img","name"},newint[]{R.idicon,R.id.text});(4)將適配器與ListView相關(guān)聯(lián)，代碼如下：lvwSimple.setAdapter(adapter);模擬文件下載進(jìn)度條的設(shè)計與實(shí)現(xiàn)預(yù)備知識在Android系統(tǒng)中，ProgressBar（進(jìn)度條）組件，可以向用戶顯示某個應(yīng)用程序耗時操作完成的百分比，因此它需要動態(tài)地顯示進(jìn)度教學(xué)過程及內(nèi)容備注<ProgressBarandroid:id="@+id/progressBar1”style="?android:attr/progressBarStyleHorizontal”android:layout_width="255dp"android:layout_height="wrap_content"android:visibility="visible"/>進(jìn)度條需要用線程實(shí)現(xiàn)進(jìn)度條的遞增。代碼如下：unnablemyRun=newRunnable(){@Overridepublicvoidrun(){while(true){//獲取主線程Handler的MessageMessagemsg=handler.obtainMessage();//將進(jìn)度值作為消息的參數(shù)進(jìn)行封裝，進(jìn)度自加1msg.arg1=progressValue++;//將消息發(fā)送給主線程的Handlerhandler.sendMessage(msg);if(progressValue>size)//當(dāng)Value的值大于size時退出循環(huán)break;try{Thread.sleep(100);/為了看!U進(jìn)度袞動效果，可以設(shè)置長的線程休民時間}catch(InterruptedExceptione){//線程休眠方法會出現(xiàn)異常，所以需要捕獲異常e.printStackTrace();)))考試系統(tǒng)界面的設(shè)計與實(shí)現(xiàn)預(yù)備知識TabHost是整個Tab的容器，包括兩部分：TabWidget和FrameLayout。TabWidget就是每個Tab的標(biāo)簽，是可供用戶選擇的標(biāo)簽集合；FrameLayout是顯示內(nèi)容的幀布局，F(xiàn)rameLayout的內(nèi)容將在第4章詳細(xì)介紹，每個Tab都對應(yīng)自己的布局。TabHost提供了如下兩個方法來創(chuàng)建選項(xiàng)卡、添加選項(xiàng)卡。newTabSpec(Stringtag)：創(chuàng)建一個以tag為標(biāo)識的選項(xiàng)卡。addTab(TabHost.TabSpectabSpec)：向TabHost中添加一個tabSpec選項(xiàng)卡。TabHost的實(shí)現(xiàn)有兩種方式。Activity繼承TabActivity實(shí)現(xiàn)步驟如下。(1)因?yàn)門abActivity類默認(rèn)包含了一個TabHost組件，所以直接調(diào)用getTabHost()方法獲取TabHost對象。調(diào)用 LayoutInflater.from(this).inflate(R.layout.tabhost_layout,tabhost.getTabContentView(),tru§)法，將Tab頁的布局轉(zhuǎn)換為Tab標(biāo)簽頁可以使用的View對象。inflate()方法的第一個參數(shù)表示要使用的布局文件資源ID；第二個參數(shù)表示持有選項(xiàng)卡的內(nèi)容，獲取FrameLayout；第三個參數(shù)表示解析的XML文件為根視圖View。(3)調(diào)用addTab(tabHost.newTabSpec(Stringag).setIndicator(CharSequencdabel,Drawableicon).setContent(intviewId))方法，添加Tab頁。setIndicator()方法的第一個參數(shù)表示Tab的標(biāo)題；第二個參數(shù)表示Tab的圖標(biāo)；setContent()方法用于設(shè)定Tab頁所關(guān)聯(lián)的布局文件資源ID。教學(xué)過程及內(nèi)容Activity不繼承TabActivity實(shí)現(xiàn)步驟如下。(1)在布局文件中定義TabHost組件，TabWidget的id必須是@android:id/tabs