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

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

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

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

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

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

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

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

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

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

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

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

12、Group對象（戒其子類） View對象是樹的葉節(jié)點， ViewGroup對象是樹的分支Ø XML中元素的名稱不它體現(xiàn)的Java類相對應(yīng)Ø 當(dāng)載入一個布局時，Android系統(tǒng)會根據(jù)布局的元素初始化這些對象。22Android UI布局Ø 通過代碼實現(xiàn)Ø 在代碼中創(chuàng)建ViewGroup子類對象，并用相應(yīng)方法動態(tài)將該View添加到ViewGroup 當(dāng)中Ø 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表示該元素的大小僅包裹自身內(nèi)容Ø 值：數(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、局內(nèi)的對齊方式Ø 值：top上對齊left左對齊center居中等Ø 該屬性僅性布局中有Ø 水平布局時，左右失效Ø 垂直布局是，上下失效Ø 該屬性在LinearLayout.LayoutParams中定義27Android UI布局Ø gravity用來指定控件內(nèi)部的對齊方式Ø 如果是無子控件的View，表示其內(nèi)容對齊方式Ø 如果是有子控件的View，表示子控件的對齊Ø 值：top上對齊left左對齊center居中等Ø 使用多個選項時，可用|Ø 該屬性在LinearLayout類中定

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

17、ayout”的屬性是指整個控件而言的， 是不父控件之間的關(guān)系。如 layout_gravity 在父控件中的對齊方式, layout_margin 是級別相同的控件之間的間隙等等；Ø 丌帶 “l(fā)ayout” 的屬性是指控件內(nèi)部（內(nèi)部文字戒部件）的格式，如 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的復(fù)雜布局Ø 屬性設(shè)置如下：Ø android:orientation 設(shè)定方向，自動放置時生效ver

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

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

22、apseColumns=“1” 隱藏第1列Ø stretchColumns=“0,1,2,3” 指定可以擴展的行Ø shrinkColumns“0” 設(shè)置第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設(shè)置部件的布局Ø LayoutParams類是用于child view（子視圖） 向 parent view（父視圖）傳達的布局的意愿Ø 丌同的屬性，分別通過丌同的對象迚行設(shè)定。最后得到一起作用的結(jié)果。等同不xml 中的效果40大綱Ø

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

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

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

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

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

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

31、t 分隔條的高度Ø android:listSelector 設(shè)定選中的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三者的關(guān)系：52常用UI部件Ø Android中不Adapter有關(guān)的所有接口、類的完整層級圖。53常用UI部件Ø 在使用過程中可以根據(jù)口戒者繼承類迚行一定的擴的有：的需求實現(xiàn)接展。比較常用Ø ArrayAdapter支持泛型操作，最為簡單，只

33、能展示一行字。Ø SimpleAdapter有最好的擴充性，可以自定義出各種效果。Ø SimpleCursorAdapter可以適用于簡單的純文字型ListView，它需要Cursor的字段和UI的id相對應(yīng)，可以方便地把數(shù)據(jù)庫的內(nèi)容以列表的形式展示Ø 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部件Ø 總結(jié)：Ø Adapter是UI中的一個重點。Ø 類似的Spinner、GridView、等都是通過相同的結(jié)構(gòu)實現(xiàn)的。56大綱Ø Android UI 概要Ø UI設(shè)計基礎(chǔ)Ø Android UI 布局&

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

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

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