課件及范例代碼04android初級開發(fā)

1、Android UI初級開發(fā)物聯(lián)網(wǎng)師資培訓1大綱Ø Android UI 概要Ø UI設計基礎Ø Android UI 布局Ø 常用UI 部件Ø Android樣式和主題2Android UI概要Ø Android UI介紹Ø UI是User Interface 的簡稱，也叫做用戶界面Ø 它是人不設備之間傳逑、交換信息的媒介接口也是Android系統(tǒng)的重要組成部分ØØ 它的交互性及美觀性會決定一個運Ø Android已經(jīng)提供了一些常用的漂亮的組件Ø 對操作行為，Android

2、通過來響應3Android UI概要Ø Android UI組成Ø Android應用的用戶界面是由View不View Group 對象構建的Ø View類是Android系統(tǒng)平臺上UI表示的基本單元Ø ViewGroup是View的擴展，可以容納多個子View， 也可擴展用做Layout管理器Ø 多個視圖組件(View)可以存放在一個視圖容器(ViewGroup)中Ø 界面文件中有且只有一個容器作為根節(jié)點4Android UI概要Ø View：視圖Ø 一個視圖在屏幕上占據(jù)一塊矩形區(qū)域，負責該區(qū)域的渲染，響應等&#

3、216; 是TextView、Button、List、EditText、RadioButton、Checkbox等類的父類Ø ViewGroup：視圖容器Ø 是View的容器，負責對它內部的View元素進行布局5Android UI概要Ø 類名是android.view.Viewgroup，抽象類, 其功能有其子類實現(xiàn)Ø Layout就是它的一個子類Ø Viewgroup內部可以包含其他Viewgroup，以便復雜布局Ø Layout:布局組件Ø 是View的容器，負責對它內部的View元素迚行布局6Android UI概要

4、Ø 是Viewgroup的子類Ø Layout里面可以放置其他Layout 類型：Ø LinearLayout：線性布局Ø RelativeLayout：相對布局Ø TableLayout：表格布局Ø AbsoluteLayout：絕對布局Ø FrameLayout：幀布局Ø LayoutParams:布局參數(shù)7Android UI概要Ø 設置一個View在Viewgroup里如何展示， 包括位置和大小Ø 在把一個View加到Viewgroup時傳入Ø 如果加入時沒有這個參數(shù)，系統(tǒng)將采

5、用默認值Ø 如一個TextView放到一個RelativeLayout 里，開始顯示在上邊？下邊？左邊？右邊？大小是多少？8大綱Ø Android UI 概要Ø UI設計基礎Ø Android UI 布局Ø 常用UI 部件Ø Android樣式和主題9UI設計基礎Ø View類介紹Ø View是所有顯示部件（widget）的基類Ø 所以View的屬性及方法對它的子類也同樣適用Ø View的組成：每一個view實際形狀都是用矩形邊框描述邊框內容10UI設計基礎Ø View的常見屬性

6、16; android:idfindViewByID實際上是在一個ViewGroup內找Ø android:background如果是圖片會影響view的默認的大小Ø android:visibilityØ android:padding 內容不邊框的距離Ø android:minHeightØ android:minWidth指內容的最小值11UI設計基礎有Ø android 中支持的12表示名稱說明px像素1px=屏幕上的一個像素點In英尺基于屏幕的物理mm毫米基于屏幕的物理pt點英尺的1/72dp/dip1dp =屏幕上的一個像

7、素點*像素密度sp和dp類似，主要用于字體顯示UI設計基礎文件（res）Ø 在XML中Ø 格式：package:type/name說明：包下的可省略packageØ 如：“drawable/icon” “strings/hello”13UI設計基礎Ø 以上屬性也可以用代碼去設置Ø 注意數(shù)值的默認是px14UI設計基礎Ø View的響應Ø 在Android系統(tǒng)中Java中的處理機制，包括ØØØ、源和器三個方面：可以是鼠標源：是接受、鍵盤、觸摸等的實體，如Button等器：是組件產(chǎn)生回調方法。時響應

8、的接口，也被稱作Ø Android內置的控件類，已經(jīng)實現(xiàn)了一些回調方法來處理Ø 我們也可以重寫件處理凼數(shù)，來處理事15UI設計基礎器Ø Android中的Ø 單擊(View.OnClickListener)處理方法：onClick()Ø 焦點(View.OnFocusChangeListener)處理方法：onFocusChange()Ø 按鍵(View.OnKeyListener)處理方法：onKey()Ø 觸碰(View.OnTouchListener)處理方法：onTouch()Ø 創(chuàng)建上下文菜單(View.

9、OnCreateContext 處理方法：onCreateContextListener)();16UI設計基礎處理的步驟：ØØ 創(chuàng)建Ø 控件使用set 給要響應器Listener(.)方法設置接口，的組件器Ø在處理方法中編寫要實現(xiàn)的代碼17UI設計基礎Ø Android中的繪圖Ø 在res/drawables目錄下的保存了所有繪圖的Ø drawable分為10多種,常見如下：Ø Bitmap File(位圖文件: png, jpg, gif)Ø Nine-Path-Image(*.9.png)Ø

10、; xml文件中定義Selector背景選擇器18大綱Ø Android UI 概要Ø UI設計基礎Ø Android UI 布局Ø 常用UI 部件Ø Android樣式和主題19Android UI布局Ø UI布局（Layout）介紹Ø 布局即指定一個View的位置不大小Ø Android布局方式有兩種Ø 通過xml實現(xiàn)Ø 通過代碼實現(xiàn)Ø Android中提供了布局組件他們都繼承于ViewGroup,實現(xiàn)了整個View樹結構20Android UI布局Ø 常用的布局組件有&

11、#216; LinearLayoutØ RelativeLayoutØ FrameLayoutØ GirdLayoutØ TableLayoutØ AbsoluteLayout線性布局相對布局幀布局網(wǎng)格布局表格布局絕對布局Ø 它們都繼承于ViewGroup21Android UI布局Ø 通過xml實現(xiàn)Ø Android的XML布局文件，為應用的布局提供一種可讀的結構，類似HTML一樣Ø 配合Android Layout Edit可以直觀、方便的迚行布局Ø XML中每一個元素都是View戒View

12、Group對象（戒其子類） View對象是樹的葉節(jié)點， ViewGroup對象是樹的分支Ø XML中元素的名稱不它體現(xiàn)的Java類相對應Ø 當載入一個布局時，Android系統(tǒng)會根據(jù)布局的元素初始化這些對象。22Android UI布局Ø 通過代碼實現(xiàn)Ø 在代碼中創(chuàng)建ViewGroup子類對象，并用相應方法動態(tài)將該View添加到ViewGroup 當中Ø addView(View child) 添加view,默認布局參數(shù)Ø addView(View child, ViewGroup.LayoutParams params) 添加vie

13、w,并指定布局參數(shù)23Android UI布局Ø 線性布局LinearLayoutØ 指在該元素下的所有子元素以垂直戒水平的方式排列Ø orientation 屬性指定線性布局的排列方式Ø vertiacl為垂直排列Ø horizontal為水平排列24Android UI布局Ø 布局中常見屬性：Ø layout_width 、 layout_height指定該控件自身在布局中的寬度、高度；Ø 值： fill_parent代表填滿其父元素，新版本中用match_parent 代替Ø 值： wrap_con

14、tent表示該元素的大小僅包裹自身內容Ø 值：數(shù)字 用來填具體的數(shù)值Ø 該屬性在ViewGroup.LayoutParams類中定義25Android UI布局Ø layout_margin指定該控件不相鄰控件四周之間的距離Ø 類似的還有l(wèi)ayout_marginTop只指定該控件上面相鄰控件之間的距離Ø 值：具體的數(shù)值，Ø 區(qū)別于padding是 dp dpi px 等Ø 該屬性在ViewGroup.MarginLayoutParams中定義26Android UI布局Ø layout_gravity指定控件在布

15、局內的對齊方式Ø 值：top上對齊left左對齊center居中等Ø 該屬性僅性布局中有Ø 水平布局時，左右失效Ø 垂直布局是，上下失效Ø 該屬性在LinearLayout.LayoutParams中定義27Android UI布局Ø gravity用來指定控件內部的對齊方式Ø 如果是無子控件的View，表示其內容對齊方式Ø 如果是有子控件的View，表示子控件的對齊Ø 值：top上對齊left左對齊center居中等Ø 使用多個選項時，可用|Ø 該屬性在LinearLayout類中定

16、義。Ø 注意：生效的前提是內容有剩余的空間28Android UI布局Ø layout_weight指定該控件位權性布局內的Ø 根據(jù)layout_width layout_height的丌同而丌同Ø 值：數(shù)值1、2、3、4。Ø 當值為wrap_content，父控件中剩余的空間將按數(shù)值比例，添加到控件中，數(shù)越大空間越大Ø 當值為fill_parent，數(shù)越小，所占空間按比越大（該情冴比較少）Ø 該屬性在LinearLayout.LayoutParams中定義29Android UI布局Ø 總結：Ø 帶“l(fā)

17、ayout”的屬性是指整個控件而言的， 是不父控件之間的關系。如 layout_gravity 在父控件中的對齊方式, layout_margin 是級別相同的控件之間的間隙等等；Ø 丌帶 “l(fā)ayout” 的屬性是指控件內部（內部文字戒部件）的格式，如 gravity是指文本的對齊方式等等，而其中文本的格式又受制約于它的控件在父控件中的屬性.30Android UI布局Ø 相對布局RelativeLayoutØ 繼承于ViewGroup，所以繼承了它的屬性Ø 視圖之間的位置按照相互之間的位置確定Ø 是我們推薦使用的布局方式Ø 相互之

18、間的影響比較?。ㄏ鄬τ诰€性布局）Ø 可嵌套到線性布局中共同布局31Android UI布局Ø 常見相對屬性：Ø layout_below=控件A(id)Ø layout_toLeftOf=控件A(id)Ø layout_alignTop=控件A(id)放到控件A的下面放到控件A的左邊不控件A頂部對齊Ø layout_centerInParent=“true”相對于父控件位置Ø layout_alignParentLeft=“true”不父控件的左端對齊Ø 以上屬性在RelativeLayout.LayoutPara

19、ms中定義32Android UI布局Ø 幀布局（FrameLayout）Ø 默認子控件放在（0，0）點，左上角Ø 幀布局中每一個組件代表一個畫面Ø 按組件定義的先后順序逐屏顯示，后面出現(xiàn)的會覆蓋前面的畫面Ø 通過它可以實現(xiàn)動畫效果33Android UI布局Ø 網(wǎng)格布局（GridLayout）Ø GridLayout的布局樣式是在Android 4.0 SDK中引入Ø 用來方便迚行多 view的復雜布局Ø 屬性設置如下：Ø android:orientation 設定方向，自動放置時生效ver

20、tical：從上往下，依次往右horizontal: 從左往右，依次往下Ø android:columnCountØ android:rowCount設定列數(shù)設定行數(shù)34Android UI布局Ø 網(wǎng)格布局常見屬性：Ø android:layout_columnØ android:layout_rowØ android:layout_columnSpanØ android:layout_rowSpanØ android:layout_gravityview的縱坐標view的橫坐標view在列的跨度view在行的跨度

21、同之前Ø 以上屬性在GridLayout.LayoutParams中定義35Android UI布局Ø 使用：Ø 如果丌指定 view的坐標，則自動從上一個view往后排Ø Span的時候要指定android:layout_gravity，否則可能丌起作用36Android UI布局Ø 表格布局（TableLayout）Ø 由許多TableRow組成，一個TableRow定義一行Ø 一個Row擁有0個戒多個 Cell，每個Cell擁有一個View對象Ø 表格布局的風格不HTML中的表格比較接近Ø coll

22、apseColumns=“1” 隱藏第1列Ø stretchColumns=“0,1,2,3” 指定可以擴展的行Ø shrinkColumns“0” 設置第0列，可收縮37Android UI布局Ø 布局中的嵌套Ø 將另外一個ViewGroup嵌入另一個ViewGroup中Ø include 一個布局Ø 也可以直接包含一個已定義好的布局文件Ø 通過<include layout="layout/framlayout"/>可以把叫framlayout的布局文件加迚來38Android UI布局&

23、#216; 實例化布局文件Ø 通過android中LayoutInflater，來找到layout文件夾下的xml布局文件，并且實例化Ø 獲得LayoutInflater對象的方法：Ø LayoutInflater inflater = LayoutInflater.from(this); this為一個context的Ø LayoutInflater inflater = (LayoutInflater) context.getSystemService(LAYOUT_INFLATER_SERVICE);Ø 也可以activity.getLa

24、youtInflater ()Ø 實例化一個布局文件Ø View view=inflater.inflate(R.layout.ID, null);39Android UI布局Ø 在程序中通過代碼迚行布局Ø new 一個layout的對象，然后添加等。Ø 通過LayoutParams設置部件的布局Ø LayoutParams類是用于child view（子視圖） 向 parent view（父視圖）傳達的布局的意愿Ø 丌同的屬性，分別通過丌同的對象迚行設定。最后得到一起作用的結果。等同不xml 中的效果40大綱Ø

25、Android UI 概要Ø UI設計基礎Ø Android UI 布局Ø 常用UI 部件Ø Android樣式和主題41常用UI部件Ø 常用Android部件Ø Android已經(jīng)為我們提供了常用的部件(Widget)，它們都是View的子類Ø 常用部件如下：Ø TextViewØ ButtonØ EditTextØ ImageViewØ ListView42常用UI部件Ø TextViewn 包含一個文字的Viewn 可以配合Selector，改變背景n 也可以

26、處理clickØ 屬性設置：，(Button就是這樣實現(xiàn)的)android:text設置文本內容，最好事string的android:textSize android:textColorandroid:textType字體大小， 字體顏色字體的風格spandroid:singleLine單行顯示Android:background設置背景43Android:background設置背景android:onClick設置點擊后的處理方法,需設clickable=true方法：Ø getText() 取值Ø setText() 設值44Ø Button

27、16; 屬性：android:id、android:textØ 從布局文件中取Button Button button = (Button)findViewById(R.id.button);Ø 設置器：button.setOnClickListener(button_listene r);45常用UI部件Ø EditTextØ 文本ewØ 繼承自TextView，所以繼承了TextView的屬性的屬性很少ØØ 常用屬性設置：Ø android:hint內容為空時的提示Ø android:inputTyp

28、e設置文本的類型，用于幫助輸入法顯示合適的鍵盤類型，數(shù)字、符號等。Ø android:digits 設置輸入哪些字符Ø android:ems設置字符的寬度46常用UI部件Ø ImageViewØ 包含一個圖像的ViewØ 屬性設置：Ø android:scaleType:圖像的縮放類型，值如下：Ø ScaleType.CENTER按圖片的原來size居中顯示，當圖片長/寬超過View的長/寬，則截取圖片的居中部分顯示Ø ScaleType.CENTER_CROP按比例擴大圖片的size居中顯示，使得圖片長(寬)等

29、于戒大于 View的長(寬)47常用UI部件Ø ScaleType.CENTER_INSIDE將圖片的內容完整居中顯示，通過按比例縮小原來的size使得圖片長/寬等于戒小于 View的長/寬Ø ScaleType.FIT_CENTER把圖片按比例擴大/縮小到View的寬度，居中顯示Ø ScaleType.FIT_START, ScaleType.FIT_END在圖片縮放效果上不FIT_CENTER一樣，只是顯示的位置丌同， FIT_START是置于頂部，F(xiàn)IT_END置于底部。Ø ScaleType.FIT_XY丌按比例縮放圖片，目標是把圖片塞滿整個 V

30、iew。48常用UI部件Ø ListViewØ 用來以列表的形式顯示數(shù)據(jù)Ø 它是AdapterView的間接子類，顯示的數(shù)據(jù)內容需要Adapter類及其子類配合。顯示裝載數(shù)據(jù)49數(shù)據(jù)CursorAdapterArrayAdapterSimpleAdapterListView常用UI部件Ø 常用屬性設置：Ø android:cacheColorHint=“android:colo r/transparent ，設置背景透明Ø android:divider 分隔條顯示DrawableØ android:dividerHeigh

31、t 分隔條的高度Ø android:listSelector 設定選中的Item背景圖Ø android:fastScrollEnabled 顯示快速滑動塊50常用UI部件Ø 常用方法：Ø setAdapter()為ListView綁定一個AdapterØ setOnItemClickLIstener()Ø setSelection （）一個器Ø addFooterView、removeFooterView添加刪除list尾viewØ addHeaderView 、removeHeaderView添加刪除list頭

32、view51常用UI部件Ø Android 中adapter的使用Ø Adapter是連接后端數(shù)據(jù)和前端顯示的適配器接口， 是數(shù)據(jù)和UI（View）之間一個重要的紐帶。Ø 在常見的ListView,GridView等地方都需要用到Adapter。如圖直觀的表達了Data、Adapter、View三者的關系：52常用UI部件Ø Android中不Adapter有關的所有接口、類的完整層級圖。53常用UI部件Ø 在使用過程中可以根據(jù)口戒者繼承類迚行一定的擴的有：的需求實現(xiàn)接展。比較常用Ø ArrayAdapter支持泛型操作，最為簡單，只

33、能展示一行字。Ø SimpleAdapter有最好的擴充性，可以自定義出各種效果。Ø SimpleCursorAdapter可以適用于簡單的純文字型ListView，它需要Cursor的字段和UI的id相對應，可以方便地把數(shù)據(jù)庫的內容以列表的形式展示Ø BaseAdapter，它是一個抽象類，繼承它需要實現(xiàn)較多的方法，所以也就具有較高的靈活性；54常用UI部件Ø 通過BaseAdapter自定義一個adapterØ 重新實現(xiàn)其中的方法Ø public int getCount()Ø public int getItemVie

34、wType(int position)Ø public int getViewTypeCount()Ø public View getView(int position, View convertView, ViewGroup parent)Ø 注意：在創(chuàng)建的時候，只會創(chuàng)建必要的顯示個數(shù)55常用UI部件Ø 總結：Ø Adapter是UI中的一個重點。Ø 類似的Spinner、GridView、等都是通過相同的結構實現(xiàn)的。56大綱Ø Android UI 概要Ø UI設計基礎Ø Android UI 布局&

35、#216; 常用UI 部件Ø Android樣式和主題57Android樣式和主題Ø Android中的樣式(style)和主題(theme)Ø Android Style的設計就是為了提升用戶體驗，讓布局合理而且美觀Ø 它們隸屬于Android，都放在values目錄下Style : 是窗體元素級別的，改變指定控件戒者Layout的樣式。Theme:是窗體級別的，改變窗體樣式Ø Android已經(jīng)提供了默認的樣式和主題，用戶也可以定義樣式和主題，戒者修改系統(tǒng)自帶的Ø 當主題不樣式的屬性發(fā)生于主題時，樣式的優(yōu)先級高58Android樣

36、式和主題Ø 樣式定義Ø 一套包含一個戒多個格式化屬性的整體Ø 可以加諸于布局中的某個元Ø 定義大小戒顏色等上59Android樣式和主題Ø styles.xmlØ style是一個包含一種戒者多種格式化屬性的 集合，用在布局XML單個元素當中，使用相當簡單，卻很好的了界面的效果Ø <style>子元素內部，申明一個戒者多個<item>，每一 個<item>定義了一個名字屬性，并且在元素內部定義了這個風格的值。60Android樣式和主題Ø 如果style中包含某view丌具有的屬

37、性， 則對該view應用此style時，丌具備的屬性將忽略61Android樣式和主題Ø 主題定義Ø 也是一套包含一個戒多個格式化屬性的整體Ø 應用于應用程序中的一個戒多個 Activity之中Ø 定義一套顏色、版面背景、字體、菜單等Ø 主題是丌能應用在某一個單獨的 View里Ø Android 3.0 之后推出了新的主題Ø Holo LightØ Holo DarkØ Holo Light with dark action bars62Android樣式和主題Ø themes.xmlØ 不styles.xml類似，用在應用中所有的Activity當中戒者應用中的某個 Activity當中Ø 通過程序代碼 setTheme (int resid) 設定Ø 也可以在AndoridManifest.xml中設定activity元素的theme屬性。63Androi