1、主講：游學軍第二講第二講 AndroidAndroid應用的界面編程應用的界面編程學習內容n了解手機界面設計規律n熟悉Android組件的繼承結構n掌握Android控制程序界面的三種方式n掌握Android的常用布局管理器n掌握Android的TextView、ImageView及其子類n掌握AdapterView及其子類（難點）n掌握ProgressBar及其子類n掌握TabHost的使用（難點）n掌握對話框、菜單的使用2.1 用戶界面基礎2.1 用戶界面基礎n設計手機用戶界面應解決的問題n根據不同型號手機的屏幕解析度、尺寸和縱橫比各不相同，自動調整界面上部分控件的位置和尺寸，避免因為屏幕

2、信息的變化而出現顯示錯誤n需要界面設計與程序邏輯完全分離，這樣不僅有利于并行開發，而且在后期修改界面時，也不用再次修改程序的邏輯代碼n已經解決了前兩個問題，使用XML文件描述用戶界面；資源文件獨立保存在資源文件夾中；對用戶界面描述非常靈活，允許不明確定義界面元素的位置和尺寸，僅聲明界面元素的相對位置和粗略尺寸2.1 用戶界面基礎nAndroid界面設計基本規律n盡量使用match_parent等相對值，用Theme來定制風格，抽取所有的字符串等信息進行本地化設計。n界面布局時一個布局文件對應一個界面。n提供不同大小的圖片解決圖片適配問題，提供多種布局文件解決布局適配問題2.1 用戶界面基礎nA

3、ndroid界面組件框架2.1 用戶界面基礎2.1 用戶界面基礎n使用XML布局文件控制UI界面(重點)n示例演示講解：單擊按鈕在文本視圖中顯示當前系統的時間n在代碼中控制UI界面n示例演示講解(CodeView):單擊按鈕顯示當前系統的時間。nViewGroup.LayoutParamsn使用XML布局文件和Java代碼混合控制UI界面n演示示例講解：簡單圖片瀏覽器(MixView):單擊圖片則顯示下一張圖片2.2 界面布局n界面布局n使用XML文件聲明界面布局的特點n將程序的表現層和控制層分離n在后期修改用戶界面時，無需更改程序的源代碼n用戶還能夠通過可視化工具直接看到所設計的用戶界面，有

4、利于加快界面設計的過程，并且為界面設計與開發帶來極大的便利性 2.2 界面布局nAndroid中的顯示單位n px (pixels)像素 n一般HVGA代表320 x480像素，這個用的比較多。n dip或dp (device independent pixels)設備獨立像素n這個和設備硬件有關，一般為了支持WVGA、HVGA和QVGA 推薦使用這個，不依賴像素。n sp (scaled pixels best for text size)比例像素n主要處理字體的大小，可以根據系統的字體自適應。n除了上面三個顯示單位，下面還有幾個不太常用：n in (inches)英寸n mm (milli

5、meters)毫米 n pt (points)點，1/72英寸n為了適應不同分辨率，不同的像素密度，推薦使用dip ，文字使用sp。2.2 界面布局n2.2.1 線性布局（掌握）n線性布局（LinearLayout）是一種重要的界面布局，也是經常使用到的一種界面布局n在線性布局中，所有的子元素都按照垂直或水平的順序在界面上排列n如果垂直排列，則每行僅包含一個界面元素n如果水平排列，則每列僅包含一個界面元素，2.2 界面布局n2.2.1 線性布局n常用屬性：nandroid:orientationnandroid:gravity、android:layout_gravitynandroid:la

6、yout_weight:相應的layout_width或layout_height的值設置為0dp練習作業2.2 界面布局n2.2.3 表格布局(了解)n表格布局（TableLayout），采用行列的形式來布局UI組件，但不需要明確聲明行數、列數，而是通過TableRow、其他組件來控制行數和列數。n直接插入一個組件表示插入了一行nTableRow表示表格中的一行，列由行中插入的組件的個數決定。特別注意屬性的含義: 指定該單元格在第幾列顯示layout_span=2 該控件占據2列nTableRow之間的View用來繪制一條水平線; nandroid:stretchColumns=“1” /設

7、置 TableLayout所有行的第二列為擴展列,也就是說如果每行都有三列的話，剩余的空間由第二列拉伸。可以設置為“*”。nandroid:collapseColumns=0,2/隱藏第0,2列nandroid:shrinkColumns=2/自動收縮第2列練習作業提示：n表格中的行都使用TableRow，layout_weight和layout_height配合使用，使得行等寬分布n第一行和最后一行需要使用layout_weight和layout_width配置使用時2.2 界面布局n2.2.4 框架布局n框架布局（FrameLayout）是最簡單的界面布局，是用來存放一個元素的空白空間n如

8、果有多個子元素，后放置的子元素將遮擋先放置的子元素，該布局類似于CardLayout，但是不能更換幀的次序n示例演示講解：騰訊新聞列表項的布局2.2 界面布局n2.2.5 網格布局nAndroid4.0新增的網格布局（GridLayout），使用虛細線將布局劃分為行、列和單元格，支持一個控件在行、列上都有交錯排列。n與LinearLayout布局一樣，分為水平和垂直兩種方式，默認是水平布局，一個控件挨著一個控件從左到右依次排列，但是通過指定android:columnCount設置列數的屬性后，控件會自動換行進行排列。另一方面，對于GridLayout布局中的子控件，默認按照wrap_cont

9、ent的方式設置其顯示，這只需要在GridLayout布局中顯式聲明即可。2.2 界面布局n2.2.5 網格布局nandroid:layout_row和android:layout_columnnandroid:layout_rowSpan、layout_columnSpan、layout_gravity=fill練習作業2.2 界面布局n2.2.6 相對布局n相對布局（RelativeLayout）是一種非常靈活的布局方式，能夠通過指定界面元素與其他元素的相對位置關系，確定界面中所有元素的布局位置n特點：能夠最大程度保證在各種屏幕類型的手機上正確顯示界面布局2.2 界面布局nRelative

10、Layout用到的一些重要的屬性：n第一類:屬性值為true或falsenandroid:layout_centerHrizontal 水平居中nandroid:layout_centerVertical 垂直居中nandroid:layout_centerInparent 相對于父元素完全居中nandroid:layout_alignParentBottom 貼緊父元素的下邊緣nandroid:layout_alignParentLeft 貼緊父元素的左邊緣nandroid:layout_alignParentRight 貼緊父元素的右邊緣nandroid:layout_alignParen

11、tTop 貼緊父元素的上邊緣nandroid:layout_alignWithParentIfMissing 如果對應的兄弟元素找不到的話就以父元素做參照物2.2 界面布局n第二類：屬性值必須為id的引用名“id/id-name”nandroid:layout_below 在某元素的下方nandroid:layout_above 在某元素的的上方nandroid:layout_toLeftOf 在某元素的左邊nandroid:layout_toRightOf 在某元素的右邊nandroid:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對齊nandroid:layout_al

12、ignLeft 本元素的左邊緣和某元素的的左邊緣對齊nandroid:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊nandroid:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對齊練習作業2.2 界面布局n2.2.7 絕對布局n絕對布局（AbsoluteLayout）能通過指定界面元素的坐標位置，來確定用戶界面的整體布局n絕對布局是一種不推薦使用的界面布局，因為通過X軸和Y軸確定界面元素位置后，Android系統不能夠根據不同屏幕對界面元素的位置進行調整，降低了界面布局對不同類型和尺寸屏幕的適應能力2.2 界面布局n2.2.7 絕對布局n每

13、一個界面控件都必須指定坐標（X，Y），例如“確認”按鈕的坐標是（40，120），“取消”按鈕的坐標是（120，120）。坐標原點（0，0）在屏幕的左上角2.3 基本界面控件nAndroid系統的界面控件分為定制控件和系統控件n定制控件是用戶獨立開發的控件，或通過繼承并修改系統控件后所產生的新控件。能夠為用戶提供特殊的功能或與眾不同的顯示需求方式n系統控件是Android系統提供給用戶已經封裝的界面控件。提供在應用程序開發過程中常見功能控件。系統控件更有利于幫助用戶進行快速開發，同時能夠使Android系統中應用程序的界面保持一致性n常見的系統控件包括TextView、EditText、Butt

14、on、ImageButton、Checkbox、RadioButton、Spinner、ListView和TabHost2.3基本界面控件n2.3.1 TextView和EditTextnTextView用于顯示字符串顯示字符串的控件,也可以顯示圖片n常用屬性：autoLink、capitalize、drawableXxx、drawablePaddingellipsize、shadowDX、shadowDY、shadowRadius、lineSpacingExtrat、lineSpacingMultiplier等n演示示例講解：不同顏色、字體、帶鏈接的文本TextViewTestn演示示例講解

15、：圓角邊框、漸變背景的TextView TextViewTest22.3基本界面控件n2.3.1 TextView和EditTextnEditText則是用來輸入和編輯字符串輸入和編輯字符串的控件n常用屬性與TextView相同selectAllOnFocus、singleLine、inputType、imeOptions（singleLine、inputType）n常用事件：addTextChangeListener:監聽文本變化事件setOnEditorActionListener:監聽回車鍵事件n示例演示講解：用戶友好的輸入界面 InputUI2.3基本界面控件n2.3.2 Button

16、和ImageButtonnButton是一種按鈕控件，用戶能夠在該控件上點擊，并引發相應的事件處理函數nImageButton用以實現能夠顯示圖像功能的控件按鈕nButton能夠借助background屬性實現文字圖片按鈕，比ImageButton功能相對要好n常用事件：nOnClickListenern演示示例講解：按鈕、圖形按鈕、帶文字的圖片按鈕ButtonTest2.3基本界面控件n2.3.3 CheckBox和RadioButtonnCheckBox是一個同時可以選擇多個選擇多個選項的控件n方法 toggle()nRadioButton則是僅可以選擇一個選擇一個選項的控件nRadioG

17、roup是RadioButton的承載體，程序運行時不可見，應用程序中可能包含一個或多個RadioGroupn事件：onCheckedChangeListenern示例演示講解：利用單選按鈕、復選框獲取用戶信息CheckButtonTest2.3基本界面控件n2.3.4 ToggleButton狀態開關按鈕nandroid.widget.ToggleButton開關形式的按鈕，繼承自android.widget.CompoundButton，在android.widget包中。n常用屬性設置：checked、textOn、textOff、background=android:color/tra

18、nsparentbutton=drawable/toggle_btnn事件：onCheckedChangeListenern示例演示講解 ToggleButtonTest 動態控制布局2.3 基本界面控件n2.3.5 時鐘控件nAnalogClock模擬時鐘，繼承ViewnDigitalClock數字時鐘，繼承TextViewn這兩個控件都負責顯示時鐘，只能顯示當前系統的時間，其中AnalogClock用來顯示模擬時鐘，而DigitalClock顯示數字時鐘，精確到秒。n示例演示講解 ClockTest2.3 基本界面控件n計時器（Chronometer）n顯示從某個起始時間開始，一共過去了多長時間。nsetBase(SystemClock. elapsedRealtime()nstart() 、stop()nOnChronometerTickListenern示例演示講解 ChronometerTest2.3 基本界面控件n2.3.6圖片控件nImageView控件負責顯示圖片，其圖片的來源可以是在資源文件中的id，也可以是Drawable對象或者位圖對象或網絡上圖片。n常用屬性：android：adjustViewBounds設置是否需要ImageView調整