Android學習筆記30：列表ListView控件的使用

　　在Android開發中，ListView是比較常用的控件，它以列表的形式顯示具體內容，並且能夠根據數據的長度自適應顯示。 在ListView中可以根據需要顯示自定義的列表內容，包括文字（TextView）、圖片（ImageView）、按鈕（Button）等，以此構成圖文並茂的顯示效果。

　　在本篇博文中，將使用ListView控件實現簡單的博客園首頁博文條目顯示效果，如圖1所示。

圖1 ListView實例效果圖

 

1.界面布局

　　由圖1的ListView實例效果圖可以看出，在該ListView控件中，我們添加了四條列表項，而每一個列表項都是由五部分構成的，分別是：博文題目（TextView）、作者頭像（ImageView）、博文概要（TextView）、作者昵稱（TextView）和發布日期（TextView）。

　　我們需要自己定義一個xml布局文件，來對ListView控件的列表項進行布局，以符合我們的式樣需求。這里，我定義了一個名為“listviewitem”的xml布局文件，用來對列表項中的五個控件進行布局，其具體內容如下：

　　<?xml version="1.0" encoding="utf-8"?>
　　<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
　　    android:descendantFocusability="afterDescendants"
　　    android:layout_width="match_parent"
　　    android:layout_height="match_parent"
　　    android:orientation="vertical" >
　　    
　　    <!-- 博文題目 -->
　　    <TextView
　　        android:id="@+id/title"
　　        android:layout_marginLeft="5dp"
　　        android:layout_marginTop="5dp"
　　        android:layout_width="match_parent"
　　        android:layout_height="wrap_content"
　　        android:textStyle="bold"
　　        android:textColor="#0000FF"
　　        android:lines="1"    >
　　    </TextView>
　　    
　　    <!-- 作者頭像和博文概要 -->
　　    <LinearLayout 
　　        android:layout_width="match_parent"
　　        android:layout_height="wrap_content"
　　        android:layout_marginTop="2dp"
　　        android:layout_marginLeft="5dp"
　　        android:orientation="horizontal"    >
　　        <ImageView
　　            android:id="@+id/photograph"
　　            android:layout_marginTop="2dp"
　　            android:layout_width="wrap_content"
　　            android:layout_height="wrap_content" ></ImageView>
　　        <TextView
　　            android:id="@+id/summary"
　　            android:layout_marginLeft="2dp"
　　            android:layout_width="wrap_content"
　　            android:layout_height="wrap_content"
　　            android:lines="3"    ></TextView>
　　    </LinearLayout>
　　    
　　    <!-- 作者昵稱和發布日期 -->
　　    <LinearLayout 
　　        android:layout_width="match_parent"
　　        android:layout_height="wrap_content"
　　        android:layout_marginLeft="5dp"
　　        android:layout_marginTop="2dp"
　　        android:layout_marginBottom="2dp"
　　        android:orientation="horizontal"    >
　　        <TextView
　　            android:id="@+id/author"
　　            android:layout_width="80dp"
　　            android:layout_height="wrap_content"
　　            android:textColor="#0000FF"    ></TextView>
　　        <TextView
　　            android:id="@+id/publishtime"
　　            android:layout_width="wrap_content"
　　            android:layout_height="wrap_content"    ></TextView>
　　    </LinearLayout>
　　    
　　</LinearLayout>

　　可以看出，在該布局文件中，使用了LinearLayout的垂直布局方式將每個列表項分成了上中下三部分，上方顯示博文題目，中間則使用LinearLayout的水平布局方式顯示作者頭像和博文概要，下方同樣使用LinearLayout的水平布局方式顯示作者昵稱和發布日期。

 

2.ListView的xml屬性

　　ListView的xml屬性如圖2所示。

圖2 ListView的xml屬性

　　其中，android:divider[Drawable/Color]用於設置相鄰兩個列表項之間的分界線式樣；android:dividerHeight[dimension]用於設置相鄰兩個列表項之間的分界線高度；android:entries[array resource]用於將靜態數組中的內容直接填充到ListView列表中。

　　根據以上的ListView的xml屬性介紹，我們便可以activity_main.xml布局文件中設置ListView的屬性如下：

　　<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
　　    xmlns:tools="http://schemas.android.com/tools"
　　    android:layout_width="match_parent"
　　    android:layout_height="match_parent"
　　    android:orientation="vertical"    >
　　
　　    <ListView 
　　        android:id="@+id/listview"
　　        android:layout_width="match_parent"
　　        android:layout_height="wrap_content"
　　        android:divider="@drawable/dividerimage"    >
　　    </ListView>
　　
　　</LinearLayout>

　　其中，我們設置了相鄰兩個列表項之間的分界線式樣為一根粉色的分界線。

 

3.數據加載

　　如何將數據加載到ListView控件的各個列表項中是使用ListView控件的關鍵。

　　通過查看ListView的API幫助文檔，我們可以找到相關的設置ListView控件的適配器的方法如下：

　　public void setAdapter (ListAdapter adapter);

　　不難看出，ListView控件的適配器類型為ListAdapter，而ListAdapter的子類有ArrayAdapter<T>、BaseAdapter、CursorAdapter、HeaderViewListAdapter、SimpleAdapter、ResourceCursorAdapter、SimpleCursorAdapter和WrapperListAdapter，所以我們可以使用SimpleAdapter作為ListView控件的適配器使用。

　　簡單適配器SimpleAdapter具有良好的可擴充性，可方便的將xml中的控件與所要填充的數據匹配起來。具體實現方法如下：

　　 /*
     * Function     :    onCreate()
     * Author       :    博客園-依舊淡然
     */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mListView = (ListView)this.findViewById(R.id.listview);
        
        //創建簡單適配器SimpleAdapter
        simpleAdapter = new SimpleAdapter(this, this.getItem(), R.layout.listviewitem, 
                new String[] {"itemTitle","itemPhoto", "itemSummary", "itemAuthor", "itemPublishtime"},
                new int[] {R.id.title, R.id.photograph, R.id.summary, R.id.author, R.id.publishtime});

        //加載SimpleAdapter到ListView中
        mListView.setAdapter(simpleAdapter);
    }

　　在如上的代碼中，用到了自定義的getItem()方法，該方法的作用是獲取所有的列表內容。我們可以使用HashMap來儲存一個列表項中的每一條數據（通過鍵值對的形式），這樣每一個HashMap便儲存了一個列表項的所有信息，然后再將HashMap添加到ArrayList中進行儲存。如此，我們便可以通過使用自定義的getItem()方法來獲取所有的列表內容了。具體的實現方法如下：

　　/*
     * Function     :    獲取所有的列表內容
     * Author       :    博客園-依舊淡然
     */
    public ArrayList<HashMap<String, Object>> getItem() {
        ArrayList<HashMap<String, Object>> item = new ArrayList<HashMap<String, Object>>();
        for (int i = 0; i < ListViewItemData.getItemNum(); i++) {
            HashMap<String, Object> map = new HashMap<String, Object>();
            map.put("itemTitle", ListViewItemData.getTitle(i));
            map.put("itemPhoto", ListViewItemData.getPhotoResId(i));
            map.put("itemSummary", ListViewItemData.getSummary(i));
            map.put("itemAuthor", ListViewItemData.getAuthor(i));
            map.put("itemPublishtime", ListViewItemData.getPublishtime(i));
            item.add(map);
        }
        return item;
    }

　　在如上的代碼中，ListViewItemData是自定義的一個類，通過靜態數組的形式儲存了所有列表項中所要顯示的文本和圖片資源。

 

4.事件監聽

　　我們可以為ListView控件設置事件監聽器OnItemClickListener，用來對用戶的點擊事件進行監聽，並根據用戶所選列表項的不同進行與之相對應的響應。我們需要實現OnItemClickListener接口中的抽象方法onItemClick()，如下：

　　public void onItemClick(AdapterView<?> parent, View view, int position, long id);

　　其中，參數position表示各個列表項在ListView控件中所處的位置，自上往下從0開始算起。在該實例中，當點擊第一個列表項時，將關閉當前的Activity，並打開一個新的Activity，在新的Activity中，我們通過使用WebView控件來載入我的博客首頁，如圖3所示。

圖3 通過WebView控件載入網頁

 

5.待完善點

　　在該實例中，只能獲取整個列表項的焦點，並響應整個列表項的點擊事件，如圖4所示。

圖4 ListView控件獲取焦點示例

　　如何讓每個列表項中的各個子項（比如：博文標題、作者）都可以獲取焦點，並響應點擊事件，將是后續學習和完善的一個方面。

　　此外，在該實例中，每個列表項中的內容，都是儲存在自定義的ListViewItemData類中的。顯然這是不符合實際開發需求的，正確的做法應當是通過解析來自網絡的JSON（或XML）數據，然后將其填充到ListView控件列表中。所以，如何解析JSON數據也是后續的一個學習方向。