第Android用戶界面

1、Page 24.1用戶界面編程與視圖(View)組件4.2布局管理器4.3基本界面組件4.4高級(jí)界面組件4.5對(duì)話框4.6消息提示4.7菜單4.8事件處理4.9手機(jī)交互設(shè)計(jì)Page 3豐富的可視化用戶界面組件。包括菜單、對(duì)話框、按鈕、下拉列表框等等，應(yīng)有盡有所有UI類的祖宗是View 其中又能夠放其他View的是ViewGroup，稱為布局容器-Layout。如LinearLayout等等 不能夠再放其他View的稱為組件Widget。如Button 這種設(shè)計(jì)是“23種設(shè)計(jì)模式中的組合模式” 類似于文件和文件夾的關(guān)系。 文件夾和普通文件都是文件。 普通文件中不能再放文件. 文件夾中可以放普通文

2、件，也可以再放文件夾Page 4Android.widgetAndroid.viewPage 5組合模式（又叫部分與整體模式）-類圖Page 6View和ViewGroup樹(shù)Page 7UI組件概覽-非類圖Page 8D:androidsdkdocsreferencepackages.htmlPage 9控制組件行為的兩種方式： 在XML布局文件中通過(guò)XML屬性進(jìn)行控制 在Java程序代碼中通過(guò)調(diào)用方式進(jìn)行控制Page 10View類的XML屬性、相關(guān)方法及說(shuō)明（見(jiàn)文檔）： view類的XML屬性相關(guān)方法.docPage 11項(xiàng)目例子（CodeView）：Page 12項(xiàng)目例子（MixView

3、）：Page 13onFinishInflate() 當(dāng)View中所有的子控件均被映射成xml后觸發(fā) onMeasure(int, int) 確定所有子元素的大小 onLayout(boolean, int, int, int, int) 當(dāng)View分配所有的子元素的大小和位置時(shí)觸發(fā) onSizeChanged(int, int, int, int) 當(dāng)view的大小發(fā)生變化時(shí)觸發(fā) onDraw(Canvas) 當(dāng)該組件將要繪制它的內(nèi)容時(shí)回調(diào)該方法進(jìn)行繪制onKeyDown(int, KeyEvent) 有按鍵按下后觸發(fā) onKeyUp(int, KeyEvent) 有按鍵按下后彈起時(shí)觸發(fā) o

4、nTrackballEvent(MotionEvent) 軌跡球事件 onTouchEvent(MotionEvent) 觸屏事件 onFocusChanged(boolean, int, Rect) 當(dāng)View獲取或失去焦點(diǎn)時(shí)觸發(fā) onWindowFocusChanged(boolean) 當(dāng)窗口包含的view獲取或失去焦點(diǎn)時(shí)觸發(fā) onAttachedToWindow() 當(dāng)view被附著到一個(gè)窗口時(shí)觸發(fā) onDetachedFromWindow() 當(dāng)view離開(kāi)附著的窗口時(shí)觸發(fā)onWindowVisibilityChanged(int) 當(dāng)窗口中包含的可見(jiàn)的view發(fā)生變化時(shí)觸發(fā)Page

5、 14項(xiàng)目例子（CustomView）Page 154.1用戶界面編程與視圖(View)組件4.2布局管理器4.3基本界面組件4.4高級(jí)界面組件4.5對(duì)話框4.6消息提示4.7菜單4.8事件處理4.9手機(jī)交互設(shè)計(jì)Page 16RegisterPage 17HTML中控件如何布局？ *Page 18Java程序中(swing)控件如何布局？ *Page 19Page 20常見(jiàn)布局方式: 線性布局LinearLayout 按照垂直或水平方向布局組件 幀布局FrameLayout 從屏幕的左上角坐標(biāo)布局組件 表格布局TableLayout 類似于 相對(duì)布局RelativeLayout 可以指定組件之

6、間的相對(duì)位置關(guān)系 絕對(duì)布局AbsoluteLayout 按照絕對(duì)坐標(biāo)來(lái)布局組件 不推薦使用Page 21線性布局LinearLayout 實(shí)例（LinearLayout4）Page 22線性布局LinearLayout 常用XML屬性及相關(guān)方法XML屬性相關(guān)方法說(shuō)明Android:gravitysetGravity(int)設(shè)置布局管理器內(nèi)組件的對(duì)齊方式。該屬性支持top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical、clip

7、_horizontal幾個(gè)屬性值。也可以同時(shí)指定多種對(duì)齊方式的組合，例如left|center_vertical表示出現(xiàn)在屏幕左邊，且垂直居中。Android:orientationsetOrientation(int)設(shè)置布局管理內(nèi)組件的排列方式，可以設(shè)置為horizontal（水平排列）、vertical（垂直排列）Page 23線性布局LinearLayout 實(shí)例-知識(shí) 屬性orientation用來(lái)設(shè)置線性布局的方向vertical -豎直方向horizontal水平方向 可結(jié)合html標(biāo)簽記憶 屬性gravity 用于設(shè)置內(nèi)容的對(duì)齊方式 居中center 水平居中center_ h

8、orizontal靠下bottom 屬性layout_width和layout_height 布局寬度和高度 match_parent(在android2.2 sdk8中用來(lái)取代fill_parent) wrap_content 也可以是具體的數(shù)值,如30px, 30pt等Page 24幀布局FrameLayout實(shí)例（FrameLayout）Page 25幀布局FrameLayout常用屬性及相關(guān)方法XML屬性相關(guān)方法說(shuō)明Android:foregroundsetForeground(Drawable)設(shè)置該幀布局容器的前景圖像Android:froegroundGravitysetFore

9、groundGravity(int) 定義繪制前景圖像的gravity屬性Page 26幀布局FrameLayout實(shí)例關(guān)鍵代碼Page 27表格布局TableLayout實(shí)例（TableLayoutTest）Page 28相對(duì)布局RelativeLayout實(shí)例（RelativeLayoutTest）Page 29RelativeLayout.LayoutParams只能設(shè)為boolean值的屬性屬性說(shuō)明android:layout_centerhorizontal控制該子組件是否位于布局容器的水平居中位置android:layout_centerVertical控制該子組件是否位于布局容器

10、的垂直居中位置android:layout_centerInParent控制該子組件是否位于布局容器的中央位置android:layout_alignParentBottom控制該子組件是否位于布局容器底端對(duì)齊android:layout_alignParentLeft控制該子組件是否位于布局容器左邊對(duì)齊android:layout_alignParentRight控制該子組件是否位于布局容器右邊對(duì)齊android:layout_alignParentTop控制該子組件是否位于布局容器頂端對(duì)齊Page 30RelativeLayout.LayoutParams只能設(shè)為其他UI組件的ID屬性說(shuō)明

11、android:layout_toRightOf控制該子組件位于給出ID組件的右側(cè)android:layout_toLeftOf控制該子組件位于給出ID組件的左側(cè)android:layout_above控制該子組件位于給出ID組件的上方android:layout_below控制該子組件位于給出ID組件的下方android:layout_alignTop控制該子組件位于給出ID組件的上邊界對(duì)齊android:layout_alignBottom控制該子組件位于給出ID組件的下邊界對(duì)齊android:layout_alignLeft控制該子組件位于給出ID組件的左邊界對(duì)齊android:layo

12、ut_alignRight控制該子組件位于給出ID組件的右邊界對(duì)齊Page 31絕對(duì)布局AbsoluteLayout實(shí)例（AbsoluteLayout）Page 32課堂編程實(shí)現(xiàn)游戲：猜紅心 testgamePage 33綜合運(yùn)用 項(xiàng)目實(shí)例： RegisterPage 34綜合運(yùn)用 項(xiàng)目實(shí)例： RegisterLinearLayoutTableLayout各種控件FrameLayoutToggleButtonLinearLayout注冊(cè)取消Page 354.1用戶界面編程與視圖(View)組件4.2布局管理器4.3基本界面組件4.4高級(jí)界面組件4.5對(duì)話框4.6消息提示4.7菜單4.8事件處理

13、4.9手機(jī)交互設(shè)計(jì)Page 36文本框(TextView)和編輯框(TextEdit)按鈕(Button)與圖片按鈕(ImageButton)單選按鈕(RadioButton)與復(fù)選框(CheckBox)狀態(tài)開(kāi)關(guān)按鈕(ToggleButton)時(shí)鐘(AnalogClock和DigitalClock)圖像視圖(ImageView)Page 37Page 38TextView的XML屬性說(shuō)明（大部分適用于EditText） TextView XML屬性.docPage 39TextView的項(xiàng)目實(shí)例 不同字體、不同顏色的文本、URL(TextView1)Page 40TextView的項(xiàng)目實(shí)例 帶

14、邊框、圖片的TextView(TextView2)Page 41TextView的項(xiàng)目實(shí)例 用戶友好的輸入界面(TextView3)Page 42項(xiàng)目實(shí)例 按鈕、圓形按鈕、帶文字的圖片按鈕（ButtonTest）Page 43項(xiàng)目實(shí)例 CheckButtonTestPage 44項(xiàng)目實(shí)例 ToggleButtonTestPage 45項(xiàng)目實(shí)例 ClockTestPage 46計(jì)數(shù)器組件：Chronometer ChronometerTestPage 47項(xiàng)目實(shí)例 ImageViewTestPage 484.1用戶界面編程與視圖(View)組件4.2布局管理器4.3基本界面組件4.4高級(jí)界面組件

15、4.5對(duì)話框4.6消息提示4.7菜單4.8事件處理4.9手機(jī)交互設(shè)計(jì)Page 49自動(dòng)完成文本框類似于Google網(wǎng)頁(yè)搜索效果 項(xiàng)目實(shí)例演示：AutoCompleteTextViewTestPage 50常見(jiàn)XML屬性XML屬性相關(guān)方法說(shuō)明android:completionHintsetcompletionHint(charSequence)設(shè)置出現(xiàn)在下拉菜單中的提示標(biāo)題android:compeltionThresholdsetThreshold(int)設(shè)置用戶至少輸入幾個(gè)字符才會(huì)顯示提示Android:dropDownHeightsetdropDownHeight(int)設(shè)置下拉菜單

16、的高度Android:dropDownHorizontalOffset設(shè)置下列菜單與文本框之間的水平偏移Android:dropDownVerticalOffset設(shè)置下列菜單與文本框之間的垂直偏移Android:dropDownWidthsetdropDownWidth(int)設(shè)置下拉菜單的寬度Android:popupBackgroundsetpopupBackgroundResource(int)設(shè)置下拉菜單的高度Page 51適配器(Adapter)(數(shù)據(jù)和視圖之間的橋梁)介紹Page 52適配器(Adapter)(數(shù)據(jù)和視圖之間的橋梁)介紹Page 53適配器(Adapter)(數(shù)

17、據(jù)和視圖之間的橋梁)介紹 ArrayAdapter ListAdapter BaseAdapter SimpleAdapter ExpandableListAdapter .Page 54自動(dòng)完成文本框類似于Google網(wǎng)頁(yè)搜索效果 項(xiàng)目代碼分析：AutoCompleteTextViewTestPage 55項(xiàng)目實(shí)例:簡(jiǎn)單例子 SpinnerTestPage 56項(xiàng)目實(shí)例：自定義 SpinnerTest2Page 57項(xiàng)目實(shí)例演示 DatePicker_TimePickerPage 58項(xiàng)目實(shí)例代碼分析 DatePicker_TimePickerPage 59項(xiàng)目實(shí)例 ProgressBarT

18、estPage 60項(xiàng)目實(shí)例演示 TabHostTestPage 61項(xiàng)目實(shí)例代碼分析 TabHostTest(繼承TabActivity) 在界面布局中定義TabHost組件，并為該組件定義該選項(xiàng)卡的內(nèi)容。 Activity繼承 TabActivity 調(diào)用TabActivity的 getTabHost() 方法獲取TabHost對(duì)象 通過(guò)TabHost對(duì)象來(lái)創(chuàng)建當(dāng)前選項(xiàng)卡、添加選項(xiàng)卡Page 62項(xiàng)目實(shí)例演示及代碼分析 ScrollViewTestPage 63列表視圖以垂直列表的方式顯示列表項(xiàng)。如：聯(lián)系人名單等。 實(shí)現(xiàn)方式1：使用ListView組建 實(shí)現(xiàn)方式2：繼承ListActivi

19、ty關(guān)鍵在于適配器Adapter 數(shù)據(jù)和顯示數(shù)據(jù)的視圖之間的橋梁 也指定了視圖的單個(gè)項(xiàng)的顯示樣式 如：new ArrayAdapter(context,單項(xiàng)的樣式,數(shù)據(jù)); 如果系統(tǒng)提供的Adapter不夠好，可以寫(xiě)個(gè)類繼承BaseAdapterPage 64實(shí)例:改變分割條、基于數(shù)組的ListView ArrayAdapterListPage 65實(shí)例:基于ListActivity實(shí)現(xiàn)列表（如果一個(gè)窗口僅需要一個(gè)列表） ListActivityTestPage 66如果要顯示復(fù)雜的列表項(xiàng)，可以重寫(xiě)B(tài)aseAdapter時(shí)提供的getView方法，但很麻煩！使用SimpleAdapter自定義

20、ListView的列表項(xiàng)。w 項(xiàng)目實(shí)例:SimpleAdapterTest SimpleAdapter對(duì)象Page 67項(xiàng)目實(shí)例 ExpandableListViewTestPage 68項(xiàng)目實(shí)例演示 GridViewTestPage 69GridView常用XML屬性XML屬性相關(guān)方法說(shuō)明android:columnWidthsetcolumnWidth(int)設(shè)置列的寬度android:gravitysetGravity設(shè)置對(duì)齊方式android:horizontalSpacingsethorizontalSpacing(int)設(shè)置各元素之間的水平間距android:numColumn

21、ssetNumColumns(int)設(shè)置列數(shù)android:stretchModesetStretchMode(int)設(shè)置拉伸模式android:verticalSpacingsetVerticalSpacing(int)設(shè)置各元素之間的垂直間距Page 70圖片切換器ImageSwitcher 顯示哪張圖片 switcher.setImageResource( )。該方法源碼中將調(diào)用imageView.setImageResource( )。因此，需要提供ImageView給它. 如何提供？-給它一個(gè)視圖工廠!讓工廠來(lái)提供 switcher.setFactory(viewFacotry

22、); ViewFactory是一個(gè)接口。 實(shí)現(xiàn)接口，覆蓋makeView( )方法,在該方法中產(chǎn)生ImageViewPage 71項(xiàng)目實(shí)例代碼分析 GridViewTest（GridView和ImageSwitcher）Page 72項(xiàng)目例子演示 Chapter04_UI_gallaryPage 73水平顯示圖片圖片切換器ImageSwitcherPage 74Gallery常用的XML屬性及相關(guān)方法XML屬性相關(guān)方法說(shuō)明Android:animationDurationsetAnimationDuration(int)設(shè)置列表項(xiàng)切換時(shí)的動(dòng)畫(huà)持續(xù)時(shí)間Android:gravitysetGrav

23、ity(int)設(shè)置對(duì)齊方式Android:spacingsetSpacing(int)設(shè)置Gallery內(nèi)列表項(xiàng)的間距Android:unselectedAlphasetUnselectedAlpha(int)設(shè)置沒(méi)有選中的列表項(xiàng)的透明度Page 75畫(huà)廊Gallery 如何在畫(huà)廊中顯示一些圖片?關(guān)鍵在于提供恰當(dāng)?shù)倪m配器給它。 class MyImageAdapter extends BaseAdapter getView()方法-設(shè)置單個(gè)項(xiàng)如何顯示 選擇了畫(huà)廊中的某項(xiàng)，如何做處理？-監(jiān)聽(tīng)器 gallery.setOnItemSelectedListener( )Page 764.1用戶界面

24、編程與視圖(View)組件4.2布局管理器4.3基本界面組件4.4高級(jí)界面組件4.5對(duì)話框4.6消息提示4.7菜單4.8事件處理4.9手機(jī)交互設(shè)計(jì)Page 77對(duì)話框程序運(yùn)行過(guò)程中的彈出窗口。分為四種: 警告對(duì)話框AlertDialog 進(jìn)度對(duì)話框ProgressDialog 日期選擇對(duì)話框DatePickerDialog 時(shí)間選擇對(duì)話框TimePickerDialogPage 78支持四種AlertDialog對(duì)話框及自定義對(duì)話框 帶消息、帶N個(gè)按鈕的提示對(duì)話框 帶列表、帶N個(gè)按鈕的提示對(duì)話框 帶多個(gè)單選列表項(xiàng)， N個(gè)按鈕的提示對(duì)話框 帶多個(gè)多選列表項(xiàng)， N個(gè)按鈕的提示對(duì)話框Page 79A

25、lertDialog實(shí)現(xiàn)方法(建造者模式) 實(shí)例化建造者AlertDialog.Builder 利用builder設(shè)置對(duì)話框的各種屬性setTitle(標(biāo)題)setMessage(消息)setCancelable(boolean b)設(shè)置是否可以取消setPositiveButton( )-設(shè)置”正面”按鈕，及點(diǎn)擊該按鈕的事件處理setNegativeButton( )-設(shè)置“反面”按鈕，及點(diǎn)擊該按鈕的事件處理多項(xiàng)-setItems(CharSequence items, DialogInterface.OnClickListener listener) 多項(xiàng)單選-setSingleChoic

26、eItems (CharSequence items, int checkedItem, DialogInterface.OnClickListener listener) AlertDialog dialog = builder.create( ); 創(chuàng)建(實(shí)例化)對(duì)話框 dialog.show( ); 顯示對(duì)話框Page 80創(chuàng)建簡(jiǎn)單對(duì)話框 項(xiàng)目實(shí)例：DialogTestPage 81創(chuàng)建普通列表項(xiàng)對(duì)話框 項(xiàng)目實(shí)例：ListDialogPage 82創(chuàng)建單選列表對(duì)話框 項(xiàng)目實(shí)例：SingleChoiceDialogPage 83創(chuàng)建多選列表對(duì)話框 項(xiàng)目實(shí)例： MultiChoiceDial

27、ogPage 84創(chuàng)建自定義對(duì)話框項(xiàng)目實(shí)例： LoginDialog（自學(xué)）Page 85項(xiàng)目實(shí)例演示： PopupWindowTestPage 86PopupWindowPopupWindow創(chuàng)建步驟創(chuàng)建步驟： 調(diào)用PopupWindow的構(gòu)造器構(gòu)建PopupWindow對(duì)象； 調(diào)用PopupWindow的showAsDropDown(View v)將PopupWindow作為V組件的下拉組件顯示出來(lái)；或調(diào)用PopupWindow的showAtLocation方法將PopupWindow在指定位置顯示出來(lái)。Page 87項(xiàng)目實(shí)例代碼分析： PopupWindowTestPage 88項(xiàng)目實(shí)例

28、演示和代碼分析： ProgressDialogPage 894.1用戶界面編程與視圖(View)組件4.2布局管理器4.3基本界面組件4.4高級(jí)界面組件4.5對(duì)話框4.6消息提示4.7菜單4.8事件處理4.9手機(jī)交互設(shè)計(jì)Page 90提示信息當(dāng)用戶執(zhí)行某個(gè)操作后，自動(dòng)顯示，過(guò)一會(huì)兒自動(dòng)消失。實(shí)現(xiàn)方法: Toast.makeText(context,顯示的內(nèi)容,時(shí)間的長(zhǎng)短).show(); context可以是Activity的實(shí)例或者用getApplicationContext( )得到 時(shí)間的長(zhǎng)短為兩個(gè)常量Toast.LENGTH_LONG或者Toast.LENGTH_SHORTPage 9

29、1項(xiàng)目實(shí)例演示及代碼分析 ToastTestPage 924.1用戶界面編程與視圖(View)組件4.2布局管理器4.3基本界面組件4.4高級(jí)界面組件4.5對(duì)話框4.6消息提示4.7菜單4.8事件處理4.9手機(jī)交互設(shè)計(jì)Page 93選項(xiàng)菜單Options Memu 單擊手機(jī)上的菜單鍵出現(xiàn)上下文菜單ContextMenu 顧名思義，與上下文（環(huán)境）有關(guān)。思想類似于Windows中的右鍵單擊彈出的快捷菜單。 操作時(shí)需要長(zhǎng)時(shí)間按住某個(gè)東東不放。菜單的兒子-子菜單SubMenuPage 94項(xiàng)目實(shí)例演示及代碼分析 Menu01Page 95選項(xiàng)菜單實(shí)現(xiàn)方法 因?yàn)槭窃谀硞€(gè)屏幕(Activity)處，點(diǎn)擊

30、menu按鈕，出現(xiàn)的。 因此實(shí)現(xiàn)方式為覆蓋Activity的onCreateOptionsMenu(Menu menu)方法。 如果需要響應(yīng)菜單項(xiàng)被點(diǎn)擊（選擇），則還需要覆蓋onOptionsItemSelected(MenuItem item)方法。 在onCreateOptionsMenu(）方法中產(chǎn)生Menu menu.add(int菜單組編號(hào), int菜單項(xiàng)編號(hào), int菜單項(xiàng)顯示次序, 菜單項(xiàng)標(biāo)題); SubMenu subMenu = menu.addSubMenu(標(biāo)題); subMenu.add(.) 使用XML菜單資源。菜單充氣者M(jìn)enuInflater將xml菜單資源充入m

31、enu。 inflater.inflate(resId,menu); Page 96項(xiàng)目實(shí)例演示及代碼分析 Menu02Page 97上下文菜單實(shí)現(xiàn)方法 因?yàn)槭窃谀硞€(gè)屏幕(Activity)處，長(zhǎng)時(shí)間點(diǎn)擊某個(gè)View,而出現(xiàn)的。 因此實(shí)現(xiàn)方式為覆蓋Activity的onCreateContextMenu(.)方法。 將”某個(gè)View”和菜單綁定。在onCreate()方法中，registerForContextMenu(view); 如果需要響應(yīng)菜單項(xiàng)被點(diǎn)擊（選擇），則還需要覆蓋onContextItemSelected(MenuItem item)方法。 在onCreateContextMe

32、nu(）方法中產(chǎn)生Menu和選項(xiàng)菜單一樣 menu.add(int菜單組編號(hào), int菜單項(xiàng)編號(hào), int菜單項(xiàng)顯示次序, 菜單標(biāo)題); SubMenu subMenu = menu.addSubMenu(標(biāo)題); subMenu.add(.) 使用XML菜單資源。菜單充氣者M(jìn)enuInflater將xml菜單資源沖入menu。 inflater.inflate(resId,menu); Page 98項(xiàng)目實(shí)例演示及代碼分析 Menu03Page 994.1用戶界面編程與視圖(View)組件4.2布局管理器4.3基本界面組件4.4高級(jí)界面組件4.5對(duì)話框4.6消息提示4.7菜單4.8事件處理4

33、.9手機(jī)交互設(shè)計(jì)Page 100Android的事件處理基于監(jiān)聽(tīng)的事件處理基于回調(diào)的事件處理Handler消息傳遞機(jī)制Page 101基于監(jiān)聽(tīng)的事件處理機(jī)制基于回調(diào)的事件處理機(jī)制Page 102事件處理機(jī)制(觀察者模式) 事件三要素 事件源（事件發(fā)生場(chǎng)所，如各個(gè)組件） 事件（通常是用戶的一次操作，點(diǎn)擊某個(gè)按鈕） 監(jiān)聽(tīng)器(事件處理程序) 事件例子 生活中的實(shí)例: 張三上課打瞌睡，被陳老師發(fā)現(xiàn)，命令他站起來(lái)聽(tīng)課。 鼠標(biāo)點(diǎn)擊登錄按鈕，檢測(cè)用戶名文本框中填寫(xiě)的用戶名是否合法。Page 103事件處理流程Page 104簡(jiǎn)單事件處理例子：EventQs基于監(jiān)聽(tīng)的事件處理模型的編程步驟（xml文件） xm

34、l中使用android:onClick或者類似的 屬性，指定函數(shù)名 android:onClick=onClick_Event“ 在activity中加入以下代碼：public void onClick_Event(View view) TextView textview = (TextView)findViewById(R.id.textView1);textview.setText(Button);基于監(jiān)聽(tīng)的事件處理模型的編程步驟（代碼） 獲取普通界面組件（事件源），也就是被監(jiān)聽(tīng)的對(duì)象 實(shí)現(xiàn)事件監(jiān)聽(tīng)器類，該監(jiān)聽(tīng)器類是一個(gè)特殊的Java類，必須實(shí)現(xiàn)一個(gè)XxxListener接口 調(diào)用事件源的

35、setXxxListener方法將事件監(jiān)聽(tīng)器對(duì)象注冊(cè)給普通組件。Page 105事件和事件監(jiān)聽(tīng)器 鍵盤(pán)事件需要獲取是哪個(gè)鍵觸發(fā)的事件 觸摸屏事件需要獲取事件發(fā)生的位置 Android會(huì)將事件信息封裝成XxxEvent對(duì)象，并把該對(duì)象作為參數(shù)傳給事件處理器 項(xiàng)目實(shí)例：planePage 106事件監(jiān)聽(tīng)器接口類型 View.OnclickListener:單擊按鈕 View.OnCreateContextMenuListener:產(chǎn)生上下文菜單事件接口 View.onFocusChangeListener:焦點(diǎn)改變事件的監(jiān)聽(tīng)器接口 View.OnkeyListener：按鍵事件的事件監(jiān)聽(tīng)器接口 V

36、iew.OnLongClickListener:長(zhǎng)單擊事件的事件監(jiān)聽(tīng)器接口 View.OnTouchListener:觸摸屏事件的事件監(jiān)聽(tīng)器接口Page 107事件監(jiān)聽(tīng)器接口實(shí)現(xiàn) 內(nèi)部類形式：將事件監(jiān)聽(tīng)器類定義成當(dāng)前類的內(nèi)部類 外部類形式：當(dāng)事件監(jiān)聽(tīng)器類定義成一個(gè)外部類 Activity本身作為事件監(jiān)聽(tīng)器：讓Activity本身實(shí)現(xiàn)監(jiān)聽(tīng)器接口，并實(shí)現(xiàn)事件處理方法 匿名內(nèi)部類形式：使用匿名內(nèi)部類創(chuàng)建事件監(jiān)聽(tīng)器對(duì)象 直接綁定到標(biāo)簽（bingingTag）Page 108事件監(jiān)聽(tīng)器接口實(shí)現(xiàn):內(nèi)部類形式 大部分采用，主要優(yōu)點(diǎn)是可以自由訪問(wèn)當(dāng)前外部類內(nèi)的所有組件。 項(xiàng)目實(shí)例：EventQsPage 10

37、9事件監(jiān)聽(tīng)器接口實(shí)現(xiàn)：外部類形式，比較少見(jiàn) 事件監(jiān)聽(tīng)器通常屬于特定的GUI界面，定義成外部類不利于提供程序的內(nèi)聚性 外部類形式的事件的監(jiān)聽(tīng)器不能自由訪問(wèn)創(chuàng)建 GUI 界面的類中的組件，編程不夠簡(jiǎn)潔Page 110事件監(jiān)聽(tīng)器接口實(shí)現(xiàn)： Activity本身作為事件監(jiān)聽(tīng)器 造成程序結(jié)構(gòu)混亂，很少采用public class ActivityListener extends Activity implements OnClickListener EditText show;Button bn;public void onCreate(Bundle savedInstanceState) super.

38、onCreate(savedInstanceState);setContentView(R.layout.main);show = (EditText)findViewById(R.id.show);bn = (Button)findViewById(R.id.bn);/直接使用Activity作為事件監(jiān)聽(tīng)器bn.setOnClickListener(this);/實(shí)現(xiàn)事件處理方法public void onClick(View v) show.setText(bn按鈕被單擊了！);Page 111事件監(jiān)聽(tīng)器接口實(shí)現(xiàn)：匿名內(nèi)部類形式 廣泛采用public class AnonymousList

39、ener extends Activity EditText show;Button bn;public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState);setContentView(R.layout.main);show = (EditText)findViewById(R.id.show);bn = (Button)findViewById(R.id.bn);/直接使用Activity作為事件監(jiān)聽(tīng)器bn.setOnClickListener(new OnClickListener() /

40、實(shí)現(xiàn)事件處理方法public void onClick(View v) show.setText(bn按鈕被單擊了！); );匿名類是不能有名稱的類，所以沒(méi)辦法引用它們。必須在創(chuàng)建時(shí)，作為new語(yǔ)句的一部分來(lái)聲明它們。Page 112回調(diào)機(jī)制與監(jiān)聽(tīng)機(jī)制 監(jiān)聽(tīng)機(jī)制一種委托方式（系統(tǒng)監(jiān)聽(tīng)事件的觸發(fā)） 回調(diào)機(jī)制中事件源與事件監(jiān)聽(tīng)器是一致的，UI組件提供事件處理的回調(diào)方法，開(kāi)發(fā)人員重寫(xiě)該方法即可。Page 113View的回調(diào)方法 Boolean onKeyDown(int keyCode,KeyEvent e) Boolean onKeyLongPress(int keyCode,KeyEvent

41、e) Boolean onKeyShortcut(int keyCode,keyEvent e) Boolean onKeyUp(int keyEvent event) Boolean onTouchEvent(MotionEvent e) Boolean onTrackballEvent(MotionEvent e)Page 114項(xiàng)目實(shí)例演示及代碼分析 CallbackHandlerPage 115主要解決多線程問(wèn)題： Android平臺(tái)不允許Activity新啟動(dòng)的線程訪問(wèn)該Activity里的界面組件，導(dǎo)致新啟動(dòng)的線程無(wú)法改變界面組件的屬性。 游戲中經(jīng)常需要新啟動(dòng)的線程周期性改變界面組

42、件屬性 借助Handler的消息機(jī)制來(lái)實(shí)現(xiàn)Page 116多線程基礎(chǔ)Thread mThread = new Thread()Overridepublic void run()timeConsumingProcess();mThread.start()Page 117Handler類簡(jiǎn)介： 主要作用： 在新啟動(dòng)線程中發(fā)送消息 在主線程中獲取、處理消息 項(xiàng)目實(shí)例：HandlerTest1 void handleMessage(Message msg) final boolean hasMessages(int what) final boolean hasMessages(int w,Objec

43、t o) sendEmptyMessage(int w) Final boolean sendEmptyMessageDelayed(int w,long l) Final boolean sendMessageDelayed(Message msg,long l)Page 1184.1用戶界面編程與視圖(View)組件4.2布局管理器4.3基本界面組件4.4高級(jí)界面組件4.5對(duì)話框4.6消息提示4.7菜單4.8事件處理4.9手機(jī)交互設(shè)計(jì)Page 119手機(jī)交互設(shè)計(jì)概述手機(jī)交互設(shè)計(jì)出現(xiàn)的問(wèn)題手機(jī)軟件導(dǎo)航的交互特點(diǎn)手機(jī)軟件平臺(tái)與硬件的關(guān)系手機(jī)交互規(guī)范android手機(jī)交互規(guī)范設(shè)計(jì)例子iPhone

44、 App的特點(diǎn)及基本設(shè)計(jì)方法手機(jī)UI設(shè)計(jì)檢測(cè)要素手機(jī)產(chǎn)品框架層設(shè)計(jì)優(yōu)秀手機(jī)設(shè)計(jì)界面欣賞Page 120手機(jī)交互設(shè)計(jì)三部曲： 第一：手機(jī)軟件導(dǎo)航的交互特點(diǎn) 第二：手機(jī)軟件平臺(tái)與硬件的關(guān)系 第三：交互規(guī)范Page 121手機(jī)與web界面交互設(shè)計(jì)的區(qū)別：WebWeb手機(jī)手機(jī) 輸出取決于顯示器相對(duì)明顯更小的屏幕輸入鼠標(biāo)/鍵盤(pán)操作拇指/食指/觸摸操作風(fēng)格受到瀏覽器和網(wǎng)絡(luò)性能限制受到硬件和操作平臺(tái)限制使用場(chǎng)景家中、辦公室、咖啡店等室內(nèi)場(chǎng)所室內(nèi)、戶外、車中、單手、橫豎屏Page 122由輸出性能牽扯到的問(wèn)題： 每屏無(wú)法顯示足夠多的內(nèi)容 沒(méi)有足夠空間放置全局導(dǎo)航條 沒(méi)有足夠空間利用空隙和各種輔助線來(lái)表達(dá)區(qū)塊之

45、間的關(guān)系Page 123由輸入性能牽扯到的問(wèn)題： 按鍵機(jī)型需要焦點(diǎn)和方向鍵、OK鍵以及左右軟鍵、刪除鍵等硬件之間的配合 觸摸機(jī)型尤其需要注意區(qū)分可否點(diǎn)擊，并且可點(diǎn)擊的部分需要能準(zhǔn)確的釋義因?yàn)槿鄙賥eb界面中的懸停提示Page 124由使用場(chǎng)景和狀態(tài)牽扯到的問(wèn)題： 界面需要能適應(yīng)比web更多的典型場(chǎng)景，例如光線的強(qiáng)弱與使用者走動(dòng)等情況，所以設(shè)計(jì)者需要一定程度脫離自己的角度去嘗試包括對(duì)比度和字號(hào)等能否滿足使用需求Page 125總結(jié)： 手機(jī)的操作比web頁(yè)面復(fù)雜，需了解其所基于的機(jī)型的硬鍵情況才能確定如何控制； 手機(jī)軟件需要與web不同的導(dǎo)航形式，空間所限； 手機(jī)軟件在操作步驟的縮減方面需要傾注更

46、多的精力，每屏空間所限； 手機(jī)軟件需要在控件/組件釋義方面傾注更多的精力，硬鍵和邏輯所限。Page 126Page 127觀者可以對(duì)比下面幾幅圖，試圖辨別在不同的視覺(jué)保真度上，哪個(gè)界面屬于哪個(gè)手機(jī)： Page 128Page 129Page 130以硬件區(qū)分手機(jī)類型： 僅以物理硬鍵控制操作的機(jī)型（后文簡(jiǎn)稱按鍵機(jī)） 主要以觸摸方式操作的機(jī)型（通常包含主頁(yè)、掛機(jī)等物理鍵） 物理硬鍵齊全，但支持觸摸操作的機(jī)型（外形和按鍵機(jī)型一樣）Page 131主流的可安裝第3方應(yīng)用的軟件平臺(tái)： 塞班s60（第3和第5版） Windows Mobile for PPC Android Iphone OS Java（

47、目前有非常巨大的智能和非智能機(jī)型群是包含java平臺(tái)的） 其他還有很多，諸如plam os、UIQ等Page 132從設(shè)計(jì)第三方應(yīng)用的角度看，大致可以濃縮成以下幾個(gè)版本的設(shè)計(jì)規(guī)范： S60第3版有一套比較經(jīng)典和嚴(yán)謹(jǐn)?shù)囊?guī)范 。另外S60第5版雖然是觸摸屏機(jī)型，但是對(duì)于交互設(shè)計(jì)師的工作來(lái)說(shuō)兩者區(qū)別并不巨大，只是把OK鍵替換換成了點(diǎn)擊，以及零碎的一些變化。 Java版事實(shí)上由于左右物理控制鍵和方向鍵、OK鍵是按鍵機(jī)型的普遍配置，S60第3版規(guī)范的適用 范圍是非常廣泛的，稍微修改一點(diǎn)就可以適 用于Java平臺(tái)。區(qū)別在于手機(jī)的“刪除”和“返回”兩個(gè)物理硬鍵的配置不太一致，所以需要統(tǒng)一將右下角的命令默認(rèn)為

48、“返回”，在編輯文本時(shí)，臨時(shí)變?yōu)椤?刪除”。這樣犧牲了某些機(jī)型的某些操作的效率，保證了這個(gè)整體的機(jī)型都可使用。 Page 133從設(shè)計(jì)第三方應(yīng)用的角度看，大致可以濃縮成以下幾個(gè)版本的設(shè)計(jì)規(guī)范： Iphone OSIphone的出現(xiàn)一舉打破了之前若干平臺(tái)固有的設(shè)計(jì)定勢(shì)，硬鍵和操作模式都精簡(jiǎn)了許多。 不過(guò)其缺少固定的menu模式，這對(duì)第三方軟件的設(shè)計(jì)來(lái)說(shuō)是個(gè)巨大的挑戰(zhàn)，要么需要很大程度上脫離iphone自身的設(shè)計(jì)規(guī)范體系，要么就極端精簡(jiǎn)功能。 Android跟從了一些iphone中的經(jīng)典手勢(shì)，操作和頁(yè)面布局風(fēng)格上相對(duì)保守一點(diǎn)，保留了menu和back兩個(gè)硬鍵，雖然不夠獨(dú)樹(shù)一幟，但是在功能和設(shè)計(jì)之間

49、做的了一個(gè)不錯(cuò)的平衡，對(duì)于第三方應(yīng)用來(lái)說(shuō)，這是一個(gè)可以有寬廣發(fā)揮空間的平臺(tái)。Page 134 Page 1351 .硬鍵和手勢(shì)控制2.菜單3.焦點(diǎn)4.彈出框5.列表6.其它Page 1361 .硬鍵和手勢(shì)控制： S60第3版Page 1371 .硬鍵和手勢(shì)控制： AndroidPage 1381 .硬鍵和手勢(shì)控制： phonePage 1391 .硬鍵和手勢(shì)控制： 以上硬鍵和手勢(shì)對(duì)于操作的控制，需要我們?cè)谠O(shè)計(jì)前有個(gè)十分清晰的認(rèn)識(shí)，并且整個(gè)團(tuán)隊(duì)達(dá)成一致，如有精力則需要專門(mén)寫(xiě)到設(shè)計(jì)規(guī)范文檔中。硬鍵控制是沒(méi)有什么改動(dòng)余地的，兩款觸摸機(jī)型可以對(duì)手勢(shì)適當(dāng)進(jìn)行取舍，畢竟有些應(yīng)用用不到所有的手勢(shì)，能精簡(jiǎn)操作

50、最好。Page 1402.菜單 S60第3版Page 1412.菜單 S60第3版的菜單是由左軟鍵或OK鍵調(diào)出，需要定義以下幾點(diǎn)： 如何收回 背景是否霧化 每屏最多顯示多少條 有無(wú)二級(jí)菜單，如果有，怎樣調(diào)出和收回，和一級(jí)菜單的位置關(guān)系，焦點(diǎn)條的區(qū)別 菜單項(xiàng)文字靠左 數(shù)字標(biāo)號(hào)，如果整個(gè)軟件能保證菜單項(xiàng)目均在10位以內(nèi)，建議加上，這樣可以與數(shù)字鍵盤(pán)對(duì)應(yīng) 對(duì)聚焦項(xiàng)或當(dāng)前頁(yè)面不適用的菜單項(xiàng)，是不顯示還是文字變灰處理。 OK鍵菜單只包含針對(duì)聚焦內(nèi)容的操作項(xiàng)，需控制在一屏之內(nèi)，避免二級(jí)項(xiàng) 菜單項(xiàng)的排序規(guī)則：針對(duì)聚焦項(xiàng)的在上，其他的在下，這兩部分中分別按照使用頻率從上至下排列Page 1422.菜單 And

51、roid：Page 1432.菜單 Iphone：Page 1442.菜單 三者導(dǎo)航系統(tǒng)進(jìn)行說(shuō)明：Page 1452.菜單 各平臺(tái)對(duì)導(dǎo)航系統(tǒng)的規(guī)劃： 標(biāo)題顯示當(dāng)前位置，可以是文字、圖標(biāo)+文字、也可以是一系列tab 菜單顯示可以做些什么，通常包含兩種類型的選項(xiàng)：a只針對(duì)選中項(xiàng)/只針對(duì)當(dāng)前頁(yè)，b全局功能如設(shè)置和幫助，也就是說(shuō)菜單大多數(shù)作用是發(fā)起針對(duì)當(dāng)前頁(yè)的操作，或者轉(zhuǎn)到和當(dāng)前頁(yè)面沒(méi)直接關(guān)系的頁(yè)面 返回這個(gè)比較復(fù)雜一些，也是最需要設(shè)計(jì)師注意的。鑒于第2條對(duì)于菜單形式的描述，如果再加入關(guān)聯(lián)頁(yè)面的選項(xiàng)，項(xiàng)目數(shù)量和類型會(huì)使菜單不堪重負(fù)。 并且頁(yè)面標(biāo)題通常無(wú)法準(zhǔn)確表達(dá)出相應(yīng)頁(yè)面的內(nèi)容，即使放入菜單，也需要用

52、戶花時(shí)間去理解和回憶。所以“返回”很重要：一個(gè)固定的位置，簡(jiǎn)單機(jī)械的一個(gè)動(dòng) 作，一按一看一按一看，不需要刻意尋找和思考。在一個(gè)沒(méi)有全局導(dǎo)航的環(huán)境里，一步步后退到自己瀏覽過(guò)的頁(yè)面，從而了解當(dāng)前的頁(yè)面體系，或者重新發(fā)起 一系列操作，是個(gè)能保證用戶找到位置的簡(jiǎn)單高效的模式。Page 1463.焦點(diǎn) 焦點(diǎn)更大的意義是在按鍵機(jī)型上，用一個(gè)帶底色的條框襯托出當(dāng)前選中的項(xiàng)。對(duì)焦點(diǎn)的設(shè)定和控制應(yīng)當(dāng)盡可能的簡(jiǎn)單，需要定義默認(rèn)聚焦的位置、是否允許上下左右循環(huán)。Page 1473.焦點(diǎn)Page 1483.焦點(diǎn)Page 1494.彈出框 除了菜單功能的以外，彈出框一般出現(xiàn)在屏幕底端，同時(shí)其他屏幕其他部分背景霧化，這有

53、利于用戶的視線從密密麻麻的小屏幕中快速找到關(guān)鍵： Page 1504.彈出框 彈出框有很多種類型，除了“確定”“取消”等元件的基本布局以外，幾個(gè)平臺(tái)區(qū)別不是很大，大致可以分成幾個(gè)類型和對(duì)應(yīng)的處理方式，以下是歸納和建議的一些處理方式，只列最適用于S60第3版的：Page 1514.彈出框Page 1525.列表 列表項(xiàng)的呈現(xiàn)可以集中定義幾種模式：常態(tài)、編輯/被調(diào)用Page 1535.列表 常態(tài)Page 1545.列表 編輯/被調(diào)用Page 1556.其它 搜索邏輯 事件處理：無(wú)信號(hào)、低電量提示的形式和時(shí)機(jī)、來(lái)電、來(lái)短信、鬧鐘時(shí)間到、緩存已滿、發(fā)現(xiàn)新版本等。 文本輸入：光標(biāo)的移動(dòng)、刪除和復(fù)制粘貼、

54、選中地址/人名等。 復(fù)雜邏輯的返回路徑Page 1566.其它 復(fù)雜邏輯的返回路徑Page 157Android_UI設(shè)計(jì)指南.pdfAndroid手機(jī)交互特性.pdf基于Android的DogBook寵物社區(qū)交互手機(jī)應(yīng)用Page 1581、iPhone App的特點(diǎn)2、iPhone的使用習(xí)慣3、iPhone App的基本設(shè)計(jì)方法Page 159iPhone App的特點(diǎn) 虛擬鍵盤(pán)：iPhone雖然與Android同為觸屏，但沒(méi)有物理鍵盤(pán)(而Android有可能有物理鍵盤(pán))，所有的輸入操作都需要屏幕中的虛擬鍵盤(pán)來(lái)實(shí)現(xiàn)，同時(shí)需要考慮虛擬鍵盤(pán)的遮擋問(wèn)題。 目錄導(dǎo)航：沒(méi)有物理按鍵做為目錄菜單的呼出功

55、能，完全不同于Symbian和Android系統(tǒng)，包括導(dǎo)航也需要屏幕中的虛擬按鈕來(lái)實(shí)現(xiàn)。 功能操作：需要把所有的功能集成在App中，比如我們可以用Tab bar來(lái)做功能的分類，工具欄來(lái)做具體視圖的功能操作集合。Page 160iPhone的使用習(xí)慣Page 161iPhone的使用習(xí)慣 自上而下的操作 減少輸入 足夠大的按鈕面積 多點(diǎn)觸控手勢(shì)Page 162iPhone App的基本設(shè)計(jì)方法:iPhone應(yīng)用的分類 1) 高效型 這類應(yīng)用可以幫助用戶快速完成一個(gè)任務(wù)，注重內(nèi)容的組織邏輯功能和信息架構(gòu)的展現(xiàn)，以方便用戶快速高效的使用，最終完成任務(wù)。此類應(yīng)用一般包含大量的列表及每個(gè)列表中的任務(wù)功能

56、。最典型的就是系統(tǒng)自帶的“Mail”應(yīng)用，這是一個(gè)非常典型的高效型應(yīng)用。 此類應(yīng)用給用戶的感覺(jué)是層層進(jìn)入，內(nèi)容逐步具體化，直到可以完成用戶的任務(wù)。 另外一個(gè)非系統(tǒng)應(yīng)用且典型的就是QQ，可以看一下是不是也遵循這個(gè)特點(diǎn)。 Page 163Page 164iPhone App的基本設(shè)計(jì)方法:iPhone應(yīng)用的分類 2)實(shí)用工具型應(yīng)用 此類應(yīng)用一般交互操作非常少，也沒(méi)有很深的層次結(jié)構(gòu)，往往都是直接了當(dāng)?shù)恼故拘畔ⅲ话銜?huì)在“背面”(通常會(huì)有一個(gè)翻轉(zhuǎn)的效果)展示設(shè)置功能。最常見(jiàn)的就是“天氣”和“股票”兩個(gè)系統(tǒng)自帶的應(yīng)用。Page 165iPhone App的基本設(shè)計(jì)方法 :iPhone應(yīng)用的分類 3)浸入

57、式應(yīng)用 大多指游戲類應(yīng)用，但也有一些實(shí)用工具，比如電子羅盤(pán)，所謂浸入式應(yīng)用一般是全屏模式，專注一個(gè)任務(wù)或是娛樂(lè)的深入體驗(yàn)，沒(méi)有過(guò)多的文字，而將用戶的注意力放在如何使用它。Page 166iPhone App的基本設(shè)計(jì)方法 :設(shè)計(jì)iPhone應(yīng)用 1) iPhone應(yīng)用的基本結(jié)構(gòu) 狀態(tài)欄：這是ios系統(tǒng)的一部分，除了浸入式應(yīng)用外，其他應(yīng)用一般都會(huì)保留這個(gè)bar。 導(dǎo)航欄：這里包括當(dāng)前的title，當(dāng)前的主要操作的控件和返回的導(dǎo)航功能 工具欄：對(duì)當(dāng)前內(nèi)容區(qū)可執(zhí)行的功能動(dòng)作。 標(biāo)簽欄：可以理解為全局導(dǎo)航，方便快速切換功能或是導(dǎo)航。工具欄和標(biāo)簽欄在一個(gè)視圖中只能存在一個(gè)。Page 167iPhone

58、App的基本設(shè)計(jì)方法 :設(shè)計(jì)iPhone應(yīng)用 1) iPhone應(yīng)用的基本結(jié)構(gòu)Page 168iPhone App的基本設(shè)計(jì)方法 :設(shè)計(jì)iPhone應(yīng)用 2)移植應(yīng)用 考慮這個(gè)web端的產(chǎn)品，核心功能是什么，任何一個(gè)產(chǎn)品都會(huì)有核心功能，以及附加功能，比如QQ，核心功能就是IM，即時(shí)通信，可能截屏是一個(gè)附加功能，盡管用的人非常多。確定核心功能后，以及圍繞核心功能盡可能少的擴(kuò)展功能和邏輯。如果你的web網(wǎng)站或是你的業(yè)務(wù)包括很多，可以把他們按不同業(yè)務(wù)類型拆分成不同的多個(gè)應(yīng)用。Page 169iPhone App的基本設(shè)計(jì)方法 :設(shè)計(jì)iPhone應(yīng)用 2)移植應(yīng)用 對(duì)確認(rèn)的功能結(jié)構(gòu)考慮在iPhone上的信息架構(gòu)模型，上文說(shuō)過(guò)，iPhone應(yīng)用是線性的連貫操作，一層一層進(jìn)入直到完成最后的任務(wù)，所以你要按這個(gè)思路去整理信息架構(gòu)，一般來(lái)說(shuō)，操作的深度不要超過(guò)3層，如果超過(guò)3層就要對(duì)產(chǎn)品形態(tài)進(jìn)行扁平化處理，即由深度改為廣度，因?yàn)殡S著深度的增加，每一級(jí)別都會(huì)有不同的功能，甚至有承載上一級(jí)的功能或邏輯，深度