Android開(kāi)發(fā)工程師教案3用戶(hù)界面基本組件

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