列表檢視（ListView）是Android平臺下用於顯示不定數量的資料最有用的檢視控制元件之一。在這個教程中，我們將向你展示如何使用ListView來瀏覽文章列表。

在之前的文章中，你看到了許多關於不同佈局控制元件的教程。應用程式本身非常簡單：它將顯示文章標題列表，當點選標題時，顯示文章內容。這篇文章的節奏將比我們的入門教程更快一些。如果你對基本的Android控制元件或概念不熟悉你可能需要複習這個網站上我們其它的一些教程，甚至是Android API參考。最終的開原始碼可以在Google code上下載到。

步驟0: 建立專案

在Eclipse中建立一個新的Android專案。我們將專案命名為MT-List，起始活動命名為TutListActivity。這個Activity必須繼承ListActivity類，它是一個特殊的Activity類，用於幫助管理ListView控制元件。我們使用的是Android2.3.3的API。

步驟1: 設計列表介面

實際上，這一步要做的很少。一個由重複項組成的ListView控制元件，每一項都有相同的佈局（一項一個模板）。我們想要顯示一個文章標題列表。每個標題都是ListView中的一項。因此，每個列表項的模板只需要一個TextView控制元件。在你的專案中新增一個叫做list_item.xml佈局資原始檔，它描述了列表中的每一項的模板佈局。在這個例子中，它看起來可能像這樣：

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <TextViewxmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:textSize="24dp"
6. android:padding="6dp"
7. />

字號加上填充屬性值要確保在平均大小的螢幕下列表每一項對於平均手指的大小來說是足夠大的觸控目標。

步驟2: 為ListView填充資料

ListView控制元件設計用於從資料來源載入資料。可以使用介面卡從資料庫，陣列或其它資料來源讀取資料。在這個程式中我們使用陣列作為資料來源。今後，你可以將陣列替換為某些實時資料來源。在你的專案中建立兩個字串陣列（你可以將他們新增到strings.xml或者一個分離的arrays.xml檔案，隨你願意）。將一個數組取名為“tut_titles”，另一個名為“tut_links”。用網站上的有效的標題和URL填充這兩個陣列。下面是我們的陣列：

1. <string-arrayname="tut_titles">
2. <item>
3. Design &amp; Build a 1980s iOS Phone App: Design Comp Slicing  
4. </item>
5. <item>
6. Best of Tuts+ in February 2011  
7. </item>
8. <item>Create a Brick Breaker Game with the Corona SDK: Game Controls  
9. </item>
10. <item>Exporting Graphics for Mobile Apps: PNG or JPEG?  
11. </item>
12. <item>
13. Android Tablet Design  
14. </item>
15. <item>Build a Titanium Mobile Pizza Ordering App: Order Form Setup  
16. </item>
17. <item>Create a Brick Breaker Game with the Corona SDK: Application Setup  
18. <item>
19. <item>Android Tablet Virtual Device Configurations  
20. </item>
21. <item>
22. Build a Titanium Mobile Pizza Ordering App: Topping Selection  
23. </item>
24. <item>Design &amp; Build a 1980s iOS Phone App: Interface Builder Setup  
25. </item>
26. </string-array>
27. <string-arrayname="tut_links">
28. <item>http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/80s-phone-app-slicing/  
29. </item>
30. <item>http://mobile.tutsplus.com/articles/news/best-of-tuts-in-february-2011/  
31. </item>
32. <item>http://mobile.tutsplus.com/tutorials/corona/create-a-brick-breaker-game-with-the-corona-sdk-game-controls/  
33. </item>
34. <item>http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/mobile-design_png-or-jpg/  
35. </item>
36. <item>http://mobile.tutsplus.com/tutorials/android/android-tablet-design/  
37. </item>
38. <item>http://mobile.tutsplus.com/tutorials/appcelerator/build-a-titanium-mobile-pizza-ordering-app-order-form-setup/  
39. </item>
40. <item>http://mobile.tutsplus.com/tutorials/corona/corona-sdk_brick-breaker/  
41. </item>
42. <item>http://mobile.tutsplus.com/tutorials/android/android-sdk_tablet_virtual-device-configuration/  
43. </item>
44. <item>http://mobile.tutsplus.com/tutorials/appcelerator/pizza-ordering-app-part-2/  
45. </item>
46. <item>http://mobile.tutsplus.com/tutorials/iphone/1980s-phone-app_interface-builder-setup/  
47. </item>
48. </string-array>

當然這個資料是靜態的。在一些情況下，使用靜態資料對於一個ListView來說也是有意義的。對於這些情況，使用一個字串陣列資源非常簡單和方便。需要確保標題和連結的排序是一致的，這樣兩個陣列才能匹配。

步驟3: 將陣列適配到ListView

現在程式已經有資料了，現在來顯示它們。回到TutListActivity.java，修改onCreate()方法，使用setListAdapter()方法來載入資料。和常規的活動不一樣，對於整個活動就僅僅只是一個ListView的情況，ListActivity不需要使用setContentView()。完成後，你的整個ListActivity將看起來像這樣：

1. public class TutListActivity extends ListActivity {   
2. @Override  
3.  public void onCreate(Bundle savedInstanceState) {   
4. super.onCreate(savedInstanceState);   
5. setListAdapter(ArrayAdapter.createFromResource(getApplicationContext(), R.array.tut_titles, R.layout.list_item));   
6. }  
7. } 

這時候，你已經可以執行這個程式了。你將看到一個具有所有本教程中所有標題的ListView。上劃和下劃都正常。但是，點選標題還沒有任何反應。

步驟4：處理ListView條目點選

處理ListView中條目的點選與其它檢視物件的處理方式相似：使用偵聽器（listener）。在這裡，我們關注OnTimeClickListener。你可能注意到我們還沒有直接處理過ListView物件。現在是時候了。在ListActivity中，簡單地呼叫getListView()方法來遍歷ListView，然後呼叫setOnItemClickListener()方法並且一次性實現它們：

1. getListView().setOnItemClickListener(new OnItemClickListener() {  
2.    @Override   
3.     public void onItemClick(AdapterView<?> parent, View view,  
4.      int position, long id) {   
5.       // TBD  
6.      }   
7.    }  
8. ); 

onItemClick()方法會在使用者每次點選列表檢視中的每一項時被呼叫。為了方便，它可以傳入幾個有用的引數，其中一個我們需要它來啟動檢視器活動（viewer activity）。等等，什麼是檢視器活動？

步驟5：建立檢視器活動

非常好的問題。讓我們現在就來建立一個檢視器活動！這個活動將用於向用戶顯示教程內容。通過繼承Activity建立一個新的類，並把它命名為TutViewerActivity.java。為它建立一個佈局資原始檔，檔案只包括一項：一個WebView控制元件。佈局檔案應該看起來如下：

在TutViewerActivity類的onCreate()方法中，呼叫setContentView()方法並

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <WebViewxmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:id="@+id/tutView">
6. </WebView>

將這個佈局傳入。最後，不要忘了將這個活動新增到你的AndroidManifest.xml 檔案。

步驟6：啟動Details Activity

注意力回到TutListActivity一會。讓我們看看我們需要做什麼來啟動這個檢視器Activity顯示合適文章連結。在onItemClick()方法中，被點選項的位置被作為一個int型的值傳入。這就是我們需要用來訪問文章連結陣列的值。

連結數組裡的字串值是URL。傳遞URL到另一個活動的簡便方法是通過setData()方法向Intent新增一個Uri。下面是onItemClick()的最終實現，它啟動檢視器活動，傳入合適的URL：

1. @Override   
2. public void onItemClick(AdapterView<?> parent, View view,  
3.   int position, long id) {   
4.   String content = links[position];   
5.   Intent showContent = new Intent(getApplicationContext(), TutViewerActivity.class);   
6.   showContent.setData(Uri.parse(content)); startActivity(showContent);   
7. } 

如果你只是將這些程式碼直接貼上到onCreate()方法的最後面，你會注意到links變數還沒有定義。因為它將用於OnItemClickListener類，變數必須是一個final值，如下：

1. final String[] links = getResources().getStringArray(R.array.tut_links); 

這一行必須放在OnItemClickListener的定義之前。是的，你可以將它定義成非final的成員變數。對於更復雜的情況，那樣做甚至是必須的。但是在這裡，我們可以在方法中放置所有程式碼。現在如果你執行這個程式，你將得到一個空白的檢視器介面。活動正確地啟動了，但是我們需要去連線檢視器活動來在WebView控制元件中載入URL。

步驟7：載入URL

注意力回到TutViewerActivity.java檔案。在呼叫setContentView()方法之後，新增程式碼，在傳入的Intent中檢索Uri並將它轉換成String變數。然後將一個呼叫新增到WebView類的loadUrl()方法。整個TutViewerActivity類的程式碼將看起來像這樣：

1. public class TutViewerActivity extends Activity {   
2. @Override   
3.  public void onCreate(Bundle savedInstanceState) {   
4.  super.onCreate(savedInstanceState);   
5.  setContentView(R.layout.tut_view);   
6.  Intent launchingIntent = getIntent();   
7.  String content = launchingIntent.getData().toString();   
8.  WebView viewer = (WebView) findViewById(R.id.tutView);   
9.  viewer.loadUrl(content);   
10. }   
11. } 

現在再執行程式。正常了麼？還沒有！最後一個細節：你必須把網終許可權新增到AndroidManifest.xml檔案。現在執行這個程式，你將看到程式正常運行了：

步驟8：改善體驗（可選）目前來看，使用者體驗只是做到了僅僅是可以用。ListView展示所有文章標題，使用者可以點選列表某一項並且可以轉到一個帶有WebView控制元件的活動來展示合適的URL的內容。為了將這個最基本的實現變得更優雅一些你可能考慮以下幾個方面：

設定瀏覽檢視的初始縮放以應對接來的縮放

配置WebView使其包含更多增強瀏覽體驗的控制元件

動態載入文章列表，而不是使用靜態陣列

為ListView新增特效視覺效果

充分利用大螢幕

向ListView增加附加的資訊：副標題，難度級別，圖示，已讀指示，收藏按鈕等。

總結

ListView小工具是在介面上以列表形式組織資料的快速方式。在這個教程中我們只是接觸到ListView控制元件的最表層。然而，你學到了最基礎的：建立列表項，使用資料介面卡，以及處理列表項點選。