第6講 高級(jí)用戶界面設(shè)計(jì)_視圖組件view_other

1、 Data WarehouseAndroid平臺(tái)手機(jī)嵌入式開發(fā)平臺(tái)手機(jī)嵌入式開發(fā)第6講 高級(jí)用戶界面設(shè)計(jì)-視圖組件Views.1 主要內(nèi)容：主要內(nèi)容：u視圖組件視圖組件u小部件（小部件（WidgetsWidgets）u菜單菜單u對(duì)話框?qū)υ捒騯消息提示條消息提示條2 4.1：視圖組件（：視圖組件（Views）2 2、常見視圖組件：、常見視圖組件：u擴(kuò)展列表視圖擴(kuò)展列表視圖(Expandable ListView) (Expandable ListView) Ch06_ExpandableListViewDemoCh06_ExpandableListViewDemo擴(kuò)展列表視圖是在列表視圖的基礎(chǔ)上

2、進(jìn)行了擴(kuò)展，其組織形式要比列表視圖更加多樣化。如圖所示：列表項(xiàng)中又嵌套了列表3 4.1：視圖組件（：視圖組件（Views）u擴(kuò)展列表視圖擴(kuò)展列表視圖(Expandable ListView)(Expandable ListView)lXml定義如下所示：定義如下所示：ExpandableListView 標(biāo)記使用：標(biāo)記使用： 來(lái)定義來(lái)定義注意：該注意：該idid的定義，和的定義，和ListViewListView組件一樣，也必須引用系統(tǒng)資源中組件一樣，也必須引用系統(tǒng)資源中IDID為為listlist組件，否則會(huì)報(bào)錯(cuò)：組件，否則會(huì)報(bào)錯(cuò)：4 4.1：視圖組件（：視圖組件（Views）u擴(kuò)展列表視圖

3、擴(kuò)展列表視圖(Expandable ListView)(Expandable ListView)l相應(yīng)的相應(yīng)的ExpandableListActivity組件：組件：同列表視圖必須和列表同列表視圖必須和列表Activity配套使用一樣，擴(kuò)展列表視圖組件也配套使用一樣，擴(kuò)展列表視圖組件也必須和擴(kuò)展列表必須和擴(kuò)展列表Activity組件組件ExpandableListActivity配套使用配套使用。開發(fā)者可以直接繼承開發(fā)者可以直接繼承ExpandableListActivity ，然后在該子類中通過(guò)，然后在該子類中通過(guò)列表適配器進(jìn)行列表視圖與數(shù)據(jù)的綁定列表適配器進(jìn)行列表視圖與數(shù)據(jù)的綁定。publ

4、ic class ExpandableListViewDemoAct extends ExpandableListActivity /設(shè)置數(shù)據(jù)適配器，綁定數(shù)據(jù)setListAdapter(adapter); 5 4.1：視圖組件（：視圖組件（Views）u擴(kuò)展列表視圖擴(kuò)展列表視圖(Expandable ListView)(Expandable ListView)lAdapter適配器：提供數(shù)據(jù)給列表視圖進(jìn)行顯示適配器：提供數(shù)據(jù)給列表視圖進(jìn)行顯示可以從ExpandableListAdapter類繼承ExpandableListAdapter adapter = new SimpleExpanda

5、bleListAdapter(this,mGroups,R.layout.group_view,new String Group.KEY1,new int R.id.TXT_GROUP_ITEM , mPeople,R.layout.child_view,new String People.KEY1,People.KEY2,People.KEY3,People.KEY4,People.KEY5,mDetailViewsId);參考參考列表視圖的適配器的定義規(guī)範(fàn)列表視圖的適配器的定義規(guī)範(fàn)6 4.1：視圖組件（：視圖組件（Views）u擴(kuò)展列表視圖擴(kuò)展列表視圖(Expandable ListVie

6、w)(Expandable ListView)l點(diǎn)選事件響應(yīng)點(diǎn)選事件響應(yīng)通過(guò)重載onChildClick ()方法進(jìn)行回調(diào);要獲取所點(diǎn)擊的條目?jī)?nèi)容，需要通過(guò)組位置和子位置聯(lián)合確定：要獲取所點(diǎn)擊的條目?jī)?nèi)容，需要通過(guò)組位置和子位置聯(lián)合確定：public boolean onChildClick(ExpandableListView parent, View v,int groupPosition, int childPosition, long id) People people = new People(mPeople.get(groupPosition).get(childPosition);

7、Toast.makeText(this, people.toString(), Toast.LENGTH_LONG).show();7 4.1：視圖組件（：視圖組件（Views）u下拉列表組件下拉列表組件(Spinner)(Spinner)SpinnerSpinner組件用于下拉列表，用法和組件用于下拉列表，用法和ListViewListView相似，裝載數(shù)據(jù)也需要相似，裝載數(shù)據(jù)也需要AdapterAdapter對(duì)象對(duì)象8 4.1：視圖組件（：視圖組件（Views）u下拉列表組件下拉列表組件(Spinner)(Spinner)lXml定義如下所示：定義如下所示：Spinner 標(biāo)記使用：標(biāo)記使

8、用： 來(lái)定義來(lái)定義9 4.1：視圖組件（：視圖組件（Views）u下拉列表組件下拉列表組件(Spinner)(Spinner)lActivity定義：定義：ArrayAdapter aaAdapter = new ArrayAdapter(this,android.R.layout.simple_spinner_itemandroid.R.layout.simple_spinner_item, applicationNames);SimpleAdapter simpleAdapter = new SimpleAdapter(this, items,R.layout.itemR.layout.i

9、tem, new String ivLogo, tvApplicationName , new int R.id.ivLogo, R.id.tvApplicationName );spinner2.setAdapter(simpleAdapter);spinner2.setAdapter(simpleAdapter);10 4.1：視圖組件（：視圖組件（Views）u垂直滾動(dòng)視圖垂直滾動(dòng)視圖(Scroll View)(Scroll View)： Ch06_ScrollViewDemoCh06_ScrollViewDemo、 Ch06_ScrollViewCh06_ScrollView11 4.

10、1：視圖組件（：視圖組件（Views）u滾動(dòng)視圖滾動(dòng)視圖(Scroll(Scroll View)View)lXml定義如下所示：定義如下所示：ScrollView 標(biāo)記使用：標(biāo)記使用： 來(lái)定義來(lái)定義注意：滾動(dòng)視圖可以作為布局的根組件注意：滾動(dòng)視圖可以作為布局的根組件當(dāng)標(biāo)簽中組件所占的總高度超過(guò)屏幕的高度，在屏幕右側(cè)出現(xiàn)滾動(dòng)條當(dāng)標(biāo)簽中組件所占的總高度超過(guò)屏幕的高度，在屏幕右側(cè)出現(xiàn)滾動(dòng)條12 4.1：視圖組件（：視圖組件（Views）u滾動(dòng)視圖滾動(dòng)視圖(Scroll(Scroll View)View)l實(shí)現(xiàn)機(jī)制實(shí)現(xiàn)機(jī)制滾動(dòng)視圖是框架布局的子類，因此具有框架布局的特點(diǎn)；ScrollView只支持垂直

11、滾動(dòng)，而且只能包含一個(gè)組件，一般是定義只支持垂直滾動(dòng)，而且只能包含一個(gè)組件，一般是定義LinearLayout，并將LinearLayout的orientation設(shè)置為vertical， LinearLayout中可以放置多個(gè)組件；當(dāng)組件的所占的高度超過(guò)屏幕高度，在屏幕的右側(cè)出現(xiàn)一個(gè)滾動(dòng)條。l相應(yīng)的相應(yīng)的Activity組件：組件：沒(méi)有特別之處，只是繼承Activity即可public class ScrollViewDemoAct extends Activity13 4.1：視圖組件（：視圖組件（Views）u滾動(dòng)視圖滾動(dòng)視圖(Scroll(Scroll View)View)l滾動(dòng)視圖的

12、滾動(dòng)視圖的“滾動(dòng)滾動(dòng)”方式方式有兩種滾動(dòng)方式：絕對(duì)滾動(dòng)絕對(duì)滾動(dòng)和相對(duì)滾動(dòng)相對(duì)滾動(dòng)絕對(duì)滾動(dòng)：即直接跳轉(zhuǎn)到視圖的頭部或者尾部的滾動(dòng)絕對(duì)滾動(dòng)：即直接跳轉(zhuǎn)到視圖的頭部或者尾部的滾動(dòng)mMainView.fullScroll(ScrollView.FOCUS_UP);mMainView.fullScroll(ScrollView.FOCUS_DOWN);相對(duì)滾動(dòng)：即相對(duì)于視圖頂部位置或者相對(duì)于當(dāng)前頁(yè)的滾動(dòng)相對(duì)滾動(dòng)：即相對(duì)于視圖頂部位置或者相對(duì)于當(dāng)前頁(yè)的滾動(dòng)mMainView.scrollTo(0, mCurPos);pageScroll（）方法（）方法14 4.1：視圖組件（：視圖組件（Views）u水平

13、滾動(dòng)視圖水平滾動(dòng)視圖(HorizontalScrollView)(HorizontalScrollView)： ch06_horizontalscrollviewch06_horizontalscrollview和和ScrollViewScrollView相似；相似；15 4.1：視圖組件（：視圖組件（Views）u水平滾動(dòng)視圖水平滾動(dòng)視圖(HorizontalScrollView) (HorizontalScrollView) lXml定義如下所示：定義如下所示：HorizontalScrollView HorizontalScrollView xmlns:android=http:/ Li

14、nearLayout android:orientation=horizontal“標(biāo)記使用：標(biāo)記使用： 來(lái)定義來(lái)定義注意：滾動(dòng)視圖可以作為布局的根組件注意：滾動(dòng)視圖可以作為布局的根組件當(dāng)標(biāo)簽中組件所占的總寬度超過(guò)屏幕的寬度，在屏幕下面出現(xiàn)滾動(dòng)條當(dāng)標(biāo)簽中組件所占的總寬度超過(guò)屏幕的寬度，在屏幕下面出現(xiàn)滾動(dòng)條16 4.1：視圖組件（：視圖組件（Views）u可垂直和水平滾動(dòng)視圖可垂直和水平滾動(dòng)視圖 ch06_bothscrollviewch06_bothscrollview可以將可以將ScrollViewScrollView和和HorizontalScrollView HorizontalScro

15、llView 組件結(jié)合使用，可以實(shí)現(xiàn)垂直和水組件結(jié)合使用，可以實(shí)現(xiàn)垂直和水平滾動(dòng)效果平滾動(dòng)效果；即相互嵌套；即相互嵌套17 4.1：視圖組件（：視圖組件（Views）u網(wǎng)格視圖組件網(wǎng)格視圖組件(GridView) (GridView) ch06_gridviewch06_gridviewGridViewGridView組件用于顯示一個(gè)表格，以二維表的方式顯示列表項(xiàng)，即單元格組件用于顯示一個(gè)表格，以二維表的方式顯示列表項(xiàng)，即單元格。每一個(gè)單元格是一個(gè)。每一個(gè)單元格是一個(gè)viewview對(duì)象，在單元格上可以放置任一組件對(duì)象，在單元格上可以放置任一組件18 4.1：視圖組件（：視圖組件（Views）

16、u網(wǎng)格視圖組件網(wǎng)格視圖組件(GridView)(GridView)ch06_gridviewch06_gridviewlXml定義如下所示：定義如下所示：GridView 標(biāo)記使用：標(biāo)記使用： GridView 來(lái)定義來(lái)定義列數(shù)的設(shè)定：列數(shù)的設(shè)定： android:numColumns=5“android:numColumns=5“行數(shù)的設(shè)定：無(wú)需設(shè)定行數(shù)，組件會(huì)自動(dòng)折行顯示行數(shù)的設(shè)定：無(wú)需設(shè)定行數(shù)，組件會(huì)自動(dòng)折行顯示19 4.1：視圖組件（：視圖組件（Views）u網(wǎng)格視圖組件網(wǎng)格視圖組件(GridView)(GridView)lActivity定義：定義：該組件也需要定義該組件也需要定義A

17、dapterAdapter，通過(guò)，通過(guò)AdapterAdapter進(jìn)行數(shù)據(jù)顯示和加載進(jìn)行數(shù)據(jù)顯示和加載SimpleAdapter simpleAdapter = new SimpleAdapter(this, cells,SimpleAdapter simpleAdapter = new SimpleAdapter(this, cells,R.layout.cell, new StringR.layout.cell, new String imageview , new int imageview , new int R.id.imageview ); R.id.imageview );gri

18、dView.setAdapter(simpleAdapter);gridView.setAdapter(simpleAdapter);20 4.1：視圖組件（：視圖組件（Views）u畫廊（相冊(cè)）組件畫廊（相冊(cè)）組件(Gallery)(Gallery) Gallery Gallery組件用于顯示圖像列表，只能水平顯示一行，而且支持水平滑動(dòng)組件用于顯示圖像列表，只能水平顯示一行，而且支持水平滑動(dòng)效果效果21 4.1：視圖組件（：視圖組件（Views）u畫廊（相冊(cè)）組件畫廊（相冊(cè)）組件(Gallery)(Gallery)lXml定義如下所示：定義如下所示：Gallery android:id=+i

19、d/gallery android:layout_marginTop=30dp /標(biāo)記使用：標(biāo)記使用： Gallery 來(lái)定義來(lái)定義22 4.1：視圖組件（：視圖組件（Views）u畫廊（相冊(cè)）組件畫廊（相冊(cè)）組件(Gallery) (Gallery) lActivity定義：定義：該組件也需要定義該組件也需要定義AdapterAdapter，通過(guò)，通過(guò)AdapterAdapter進(jìn)行數(shù)據(jù)顯示和加載進(jìn)行數(shù)據(jù)顯示和加載imageAdapter = new ImageAdapter(this);imageAdapter = new ImageAdapter(this);gallery.setAda

20、pter(imageAdapter);gallery.setAdapter(imageAdapter);23 4.1：視圖組件（：視圖組件（Views）u圖片切換器圖片切換器 ImageSwitcherImageSwitcher： ImageView ImageView的選擇器的選擇器ImageSwitcher的原理：的原理：ImageSwitcher有兩個(gè)子View：ImageView，當(dāng)左右滑動(dòng)的時(shí)候，就在這兩個(gè)在這兩個(gè)ImageView之間來(lái)回切換來(lái)之間來(lái)回切換來(lái)顯示圖片l繼承關(guān)系：繼承關(guān)系：繼承于ViewSwitcher，說(shuō)明具備了切換功能切換功能繼承于ViewAnimator，說(shuō)明具

21、備了動(dòng)畫功能動(dòng)畫功能24 4.1：視圖組件（：視圖組件（Views）u圖片切換器圖片切換器 ImageSwitcher ImageSwitcherl定義：定義：25 4.1：視圖組件（：視圖組件（Views）u圖片切換器圖片切換器 ImageSwitcher ImageSwitcherl實(shí)例化：由實(shí)例化：由ViewFactory工廠類進(jìn)行創(chuàng)建；通過(guò)工廠類進(jìn)行創(chuàng)建；通過(guò)makeView()方法創(chuàng)建方法創(chuàng)建View，然后把，然后把創(chuàng)建出來(lái)的創(chuàng)建出來(lái)的View添加到添加到ImageSwitcher上。上。第一步：第一步：is = (ImageSwitcher) findViewById(R.id.s

22、witcher);is.setFactory(ViewFactory);第二步：第二步：重寫重寫ViewFactory類的類的makeView()方法方法Overridepublic View makeView() ImageView imageView = new ImageView(this); imageView.setImageResource(arrayPicturespictureIndex); return imageView;26 4.1：視圖組件（：視圖組件（Views）u圖片切換器圖片切換器 ImageSwitcher ImageSwitcherl重要方法：重要方法：set

23、ImageURI(Uri uri)：設(shè)置圖片地址設(shè)置圖片地址setImageResource(int resid)：設(shè)置圖片資源庫(kù)設(shè)置圖片資源庫(kù)setImageDrawable(Drawable drawable)：繪制圖片繪制圖片設(shè)置動(dòng)畫效果：設(shè)置動(dòng)畫效果： setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in); setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out);27 4.1：視圖組件（：視圖組件（Views）u標(biāo)簽組件標(biāo)簽組件(TabHost) (TabHost) ch06_tabch06_tab使用標(biāo)簽組件可以對(duì)屏幕進(jìn)行分頁(yè)。使用標(biāo)簽組件可以