Android UI 組件系列（八）：ListView 基礎用法與適配器詳解

博客專欄：Android初級入門UI組件與布局

源碼：通過網盤分享的文件：Android入門布局及UI相關案例

鏈接: https://pan.baidu.com/s/1EOuDUKJndMISolieFSvXXg?pwd=4k9n 提取碼: 4k9n

一、引言

在上一篇文章《Android UI 組件系列（七）：容器 NestedScrollView 的使用場景與協同滾動實戰》中，我們講解了 NestedScrollView 的滾動機制和嵌套使用方式。今天我們來繼續深入容器組件系列，聊聊 Android 中最常見的列表組件之一——ListView。

盡管?RecyclerView?已成為更現代的列表解決方案，但?ListView?依然在不少老項目中被廣泛使用，對于初學者理解 Android 的適配器機制和 UI 構建也非常重要。

二、ListView 的 UI 結構

在 Android 中，ListView?是一種用于顯示垂直滾動列表的容器組件。它通過“適配器”將一組數據源映射到每一個列表項（Item）上，從而實現動態列表的展示。

ListView的XML布局

我們先來看一段最基礎的?ListView?使用 XML 布局：

<!-- res/layout/activity_main.xml -->
<ListViewandroid:id="@+id/list_view"android:layout_width="match_parent"android:layout_height="match_parent"android:divider="@android:color/darker_gray"android:dividerHeight="1dp"/>

這段代碼定義了一個占滿整個屏幕的列表視圖，并通過?divider?設置了分隔線顏色與高度。我們只需要給這個?ListView?設置一個適配器，它就可以根據數據動態生成對應數量的列表項。

ListView 的渲染邏輯

在運行時，ListView?會根據你設置的適配器（Adapter）來決定如何渲染每一項數據。整個流程大致如下：

數據源（List / 數組等）

?? ??↓

適配器（Adapter）

?? ??↓

生成每個 item 對應的 View（例如 TextView / 自定義布局）

?? ??↓

交由 ListView 管理顯示、滾動、復用

常用的內置 item 布局

在使用?ArrayAdapter?等簡單適配器時，Android 提供了一些默認的列表項布局：

android.R.layout.simple_list_item_1：只顯示一行文本
android.R.layout.simple_list_item_2：顯示主副兩行文本
android.R.layout.simple_list_item_checked：帶 CheckBox 的樣式
android.R.layout.simple_list_item_single_choice：單選項樣式
android.R.layout.simple_list_item_multiple_choice：多選項樣式

通過不同的布局選擇，你可以快速完成不同風格的列表 UI 原型。

示例：簡單展示一個字符串列表

/// 配置ListViewprivate fun setupListView() {val listView = findViewById<ListView>(R.id.list_view)val data = listOf("北京", "上海", "廣州", "深圳")val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, data)listView.adapter = adapter}

運行效果如下，每一行都是一個字符串。

三、ArrayAdapter、SimpleAdapter 快速上手

在?ListView?中展示數據的關鍵，就是選擇合適的適配器（Adapter）。對于簡單的字符串列表或圖文混排效果，Android 提供了兩個非常常用的適配器類：

ArrayAdapter：用于展示一維字符串或對象列表；
SimpleAdapter：用于展示鍵值對數據結構，支持圖文混排。

使用 ArrayAdapter 展示文本列表

當你有一個字符串數組，或者只是想展示某個字段列表時，ArrayAdapter?是最簡單的選擇。

val data = listOf("蘋果", "香蕉", "橘子")
val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, data)
listView.adapter = adapter

simple_list_item_1?是系統提供的單行文本布局。你也可以替換成自己的布局資源。

這個效果在上面我們已經看過了。

使用 SimpleAdapter 實現圖文混排

如果你希望每一行除了文字，還能顯示圖片，可以使用?SimpleAdapter。它支持將鍵值對映射到指定的控件上：

    /// 配置圖文ListViewprivate fun setupImageTextListView() {val listView = findViewById<ListView>(R.id.list_view)val data = listOf(mapOf("title" to "微信", "icon" to R.drawable.ic_wechat),mapOf("title" to "QQ", "icon" to R.drawable.ic_qq))val adapter = SimpleAdapter(this,data,R.layout.list_item, // 自定義布局arrayOf("title", "icon"), // 數據中的 keyintArrayOf(R.id.text_view, R.id.image_view) // 映射到布局中的控件)listView.adapter = adapter}

示例中，list_item.xml?是我們自定義的布局文件，代碼如下：

<!-- res/layout/list_item.xml -->
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="10dp"><ImageViewandroid:id="@+id/image_view"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginEnd="10dp"/><TextViewandroid:id="@+id/text_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="16sp"/>
</LinearLayout>

效果如下：

四、設置點擊事件、選中狀態

ListView?除了展示內容，更常見的場景是需要響應用戶的點擊，比如跳轉頁面、更新 UI 或選中狀態。

設置點擊事件

我們可以通過?setOnItemClickListener?來監聽列表項的點擊事件：

listView.setOnItemClickListener { parent, view, position, id ->val selectedItem = parent.getItemAtPosition(position)Toast.makeText(this, "點擊了：$selectedItem", Toast.LENGTH_SHORT).show()
}

常用參數說明：

position：當前點擊的列表索引；
parent.getItemAtPosition(position)：獲取對應位置的數據項；
view：當前 item 對應的視圖（可以進一步修改 UI）；

設置選中狀態（高亮）

如果你想讓點擊后的列表項有高亮效果，有兩種常見方式：

方式一：使用系統自帶的?listSelector

在 XML 中設置?ListView?的選擇器屬性：

<ListViewandroid:id="@+id/list_view"android:layout_width="match_parent"android:layout_height="match_parent"android:choiceMode="singleChoice"android:listSelector="@android:color/holo_blue_light"/>

方式二：自定義點擊后改變 item 背景（適合自定義布局）

如果你使用自定義 item 布局，則可以在點擊事件中手動修改背景：

listView.setOnItemClickListener { parent, view, position, id ->for (i in 0 until parent.childCount) {parent.getChildAt(i).setBackgroundColor(Color.WHITE)}view.setBackgroundColor(Color.LTGRAY)
}

注意：這種方式只適用于屏幕內可見的 item，不會持久記住“選中狀態”，適合輕量使用。

通常我們需要配合修改數據狀態，根據數據來設置選中狀態或者其它狀態。

五、簡單列表展示 + 圖文混排

前面我們已經了解了?ArrayAdapter?和?SimpleAdapter?的基礎用法，也會給?ListView?設置點擊事件。那么接下來我們就用一套完整的代碼，實現一個帶圖標和文字的圖文混排列表效果。

數據源定義

我們使用?List<Map<String, Any>>?的數據結構，每個 item 包含?title?和?icon?兩個字段：

val data = listOf(mapOf("title" to "微信", "icon" to R.drawable.ic_wechat),mapOf("title" to "QQ", "icon" to R.drawable.ic_qq),mapOf("title" to "釘釘", "icon" to R.drawable.ic_dingding)
)

自定義布局?list_item.xml

放在?res/layout/list_item.xml?中，展示左圖右文的橫向結構：

<!-- res/layout/list_item.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="60dp"android:orientation="horizontal"android:gravity="center_vertical"android:padding="10dp"><ImageViewandroid:id="@+id/image_view"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginEnd="16dp"android:scaleType="centerCrop" /><TextViewandroid:id="@+id/text_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="16sp"android:textColor="#333333" />
</LinearLayout>

綁定適配器

使用?SimpleAdapter?將數據與布局綁定：

val adapter = SimpleAdapter(this,data,R.layout.list_item,arrayOf("title", "icon"),intArrayOf(R.id.text_view, R.id.image_view)
)adapter.setViewBinder { view, data, _ ->if (view is ImageView && data is Int) {view.setImageResource(data)true} else {false}
}listView.adapter = adapter

???SimpleAdapter?默認不會處理圖片資源，需要設置?setViewBinder?手動綁定圖片。

設置點擊事件

listView.setOnItemClickListener { _, _, position, _ ->val item = data[position]// 處理點擊事件val title = item["title"] ?: "未知"Toast.makeText(this, "點擊了: $title", Toast.LENGTH_SHORT).show()}

運行效果如下：