|
Android 3.0引入的新的片斷(Fragment)API,讓我們更容易地創(chuàng)建動(dòng)態(tài)用戶界面。在這個(gè)教程中,我們學(xué)習(xí)如何將一個(gè)兩屏的ListView轉(zhuǎn)換成WebView流,以適應(yīng)大屏幕的單屏流設(shè)計(jì),比如在平板設(shè)備中。
這篇文章的節(jié)奏將比我們的入門教程更快一些。如果你對(duì)基本的Android控件或概念不熟悉你可能需要復(fù)習(xí)這個(gè)網(wǎng)站上我們其它的一些教程,甚至是Android API參考。最終的開(kāi)源代碼可以在Google code上下載到。
片段簡(jiǎn)介
在我們開(kāi)始之間,讓我們?cè)诟叩膶哟紊隙x一下什么是片段。通常來(lái)說(shuō),片段是一大塊用戶界面,它具有自己的生存周期。如果它聽(tīng)起來(lái)像一個(gè)Activity,那是因?yàn)樗_實(shí)很像一個(gè)Activity。然而,片段與Activity不同,片段必須存在于Activity之內(nèi)。片段不須要在它每次初始化的時(shí)候與同一個(gè)Activity配對(duì),這使它具有一些靈活性。與Activity一樣,片段也無(wú)需包含任何用戶界面。
步驟0:開(kāi)始
這個(gè)教程假設(shè)你讀過(guò)我們的列表視圖教程,你可以下載那個(gè)教程的代碼,并完成一些任務(wù),然后開(kāi)始,也可以直接下載這個(gè)教程的代碼直接開(kāi)始。
步驟1:重新設(shè)計(jì)界面
下圖示意了我上在列表視圖教程中所提到的文章閱讀應(yīng)用,我們還沒(méi)有考慮并使用片段:
這個(gè)流程在相對(duì)小屏幕上運(yùn)行得很不錯(cuò)。然而,在大屏幕上,比如Motorola Xoom平板的10寸屏幕上,在列表視圖上卻浪費(fèi)了很多空間。WebView看起來(lái)正常,但是有點(diǎn)枯燥。
這就是要引入片段的地方:在大屏幕上,我們可以提供更有效的用戶界面,如果我們可以在同一屏上顯示ListView和WebView。當(dāng)用戶點(diǎn)擊左邊“面板”的列表視圖中的某一項(xiàng)時(shí),右邊的WebView更新顯示相應(yīng)的內(nèi)容。這種工作流程經(jīng)常用于email或文檔或RSS閱讀器。下圖就是重新設(shè)計(jì)之后的界面示意圖:
步驟2:轉(zhuǎn)換為基于片段的設(shè)計(jì)
現(xiàn)在我們知道了新的流程應(yīng)該如何設(shè)計(jì),我們也知道當(dāng)前的兩個(gè)活動(dòng)必須轉(zhuǎn)換成片段。我們將分幾步來(lái)完成這個(gè)轉(zhuǎn)換。第一步保持界面樣子不變,只是使用片段修改每個(gè)界面內(nèi)容。一個(gè)片段將包含當(dāng)前的ListView,另一個(gè)包含WebView。然后我們?cè)俎D(zhuǎn)到單個(gè)屏幕的實(shí)現(xiàn),修改ListView和WebView之間的消息傳遞。
首先,將你的程序的項(xiàng)目構(gòu)建目標(biāo)改變Android 3.0。在Eclipse中,右鍵點(diǎn)擊項(xiàng)目并選擇“屬性”。點(diǎn)擊Android部分并選中Android 3.0。我們不使用任何Google API,所以Android開(kāi)源項(xiàng)目版本足夠了。然后點(diǎn)擊“確定”按鈕。
現(xiàn)在你就可以訪問(wèn)新的API了,包括片段API。
注意:在將來(lái)的教程中,我們將討論如何使用新的兼容層來(lái)使得像片段API這樣的技術(shù)在更早版本的Android設(shè)備上也能工作。但是現(xiàn)在它只能運(yùn)行在Android 3.0設(shè)備上。
步驟3:創(chuàng)建片段類
創(chuàng)建兩個(gè)Java類來(lái)代表兩個(gè)片段:ListView界面和WebView界面。將它們命名為TutListFragment和TutViewerFragment。TutListFragment將繼承ListFragment類,TutViewerFragment只是繼承Fragment類。
在TutListFragment類中,我們需要重寫(xiě)兩個(gè)方法: onListItemClick()和onCreate()。這些方法的內(nèi)容看起來(lái)應(yīng)該很熟悉,它與之前我們講過(guò)的TutListActivity類的代碼一致。這個(gè)代碼很快就要修改,但是現(xiàn)在暫時(shí)不需要,下面是當(dāng)前TutListFragment類的代碼:
@Override
public void onListItemClick(ListView l, View v, int position, long id) {
String[] links = getResources().getStringArray(R.array.tut_links);
String content = links[position];
Intent showContent = new Intent(getActivity().getApplicationContext(),
TutViewerActivity.class);
showContent.setData(Uri.parse(content));
startActivity(showContent);
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setListAdapter(ArrayAdapter.createFromResource(getActivity()
.getApplicationContext(), R.array.tut_titles,
R.layout.list_item));
}
it知識(shí)庫(kù):Android用戶界面設(shè)計(jì):使用片段,轉(zhuǎn)載需保留來(lái)源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。