|
|
Android 3.0引入的新的片斷（Fragment）API，讓我們更容易地創建動態用戶界面。在這個教程中，我們學習如何將一個兩屏的ListView轉換成WebView流，以適應大屏幕的單屏流設計，比如在平板設備中。
這篇文章的節奏將比我們的入門教程更快一些。如果你對基本的Android控件或概念不熟悉你可能需要復習這個網站上我們其它的一些教程，甚至是Android API參考。最終的開源代碼可以在Google code上下載到。
片段簡介
在我們開始之間，讓我們在更高的層次上定義一下什么是片段。通常來說，片段是一大塊用戶界面，它具有自己的生存周期。如果它聽起來像一個Activity，那是因為它確實很像一個Activity。然而，片段與Activity不同，片段必須存在于Activity之內。片段不須要在它每次初始化的時候與同一個Activity配對，這使它具有一些靈活性。與Activity一樣，片段也無需包含任何用戶界面。
步驟0：開始
這個教程假設你讀過我們的列表視圖教程，你可以下載那個教程的代碼，并完成一些任務，然后開始，也可以直接下載這個教程的代碼直接開始。
步驟1：重新設計界面
下圖示意了我上在列表視圖教程中所提到的文章閱讀應用，我們還沒有考慮并使用片段：
這個流程在相對小屏幕上運行得很不錯。然而，在大屏幕上，比如Motorola Xoom平板的10寸屏幕上，在列表視圖上卻浪費了很多空間。WebView看起來正常，但是有點枯燥。
這就是要引入片段的地方：在大屏幕上，我們可以提供更有效的用戶界面，如果我們可以在同一屏上顯示ListView和WebView。當用戶點擊左邊“面板”的列表視圖中的某一項時，右邊的WebView更新顯示相應的內容。這種工作流程經常用于email或文檔或RSS閱讀器。下圖就是重新設計之后的界面示意圖：
步驟2：轉換為基于片段的設計
現在我們知道了新的流程應該如何設計，我們也知道當前的兩個活動必須轉換成片段。我們將分幾步來完成這個轉換。第一步保持界面樣子不變，只是使用片段修改每個界面內容。一個片段將包含當前的ListView，另一個包含WebView。然后我們再轉到單個屏幕的實現，修改ListView和WebView之間的消息傳遞。
首先，將你的程序的項目構建目標改變Android 3.0。在Eclipse中，右鍵點擊項目并選擇“屬性”。點擊Android部分并選中Android 3.0。我們不使用任何Google API，所以Android開源項目版本足夠了。然后點擊“確定”按鈕。
現在你就可以訪問新的API了，包括片段API。
注意：在將來的教程中，我們將討論如何使用新的兼容層來使得像片段API這樣的技術在更早版本的Android設備上也能工作。但是現在它只能運行在Android 3.0設備上。
步驟3：創建片段類
創建兩個Java類來代表兩個片段：ListView界面和WebView界面。將它們命名為TutListFragment和TutViewerFragment。TutListFragment將繼承ListFragment類，TutViewerFragment只是繼承Fragment類。
在TutListFragment類中，我們需要重寫兩個方法： onListItemClick()和onCreate()。這些方法的內容看起來應該很熟悉，它與之前我們講過的TutListActivity類的代碼一致。這個代碼很快就要修改，但是現在暫時不需要，下面是當前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知識庫：Android用戶界面設計：使用片段，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
