网站导航
> 技术文档 > Android UI 组件系列（八）：ListView 基础用法与适配器详解

Android UI 组件系列（八）：ListView 基础用法与适配器详解

网友: 技术文档 2025-07-26 19:53:21

博客专栏：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 布局：

这段代码定义了一个占满整个屏幕的列表视图，并通过 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 原型。

示例：简单展示一个字符串列表

/// 配置ListView private fun setupListView() { val listView = findViewById(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 提供了两个非常常用的适配器类：

  1. ArrayAdapter：用于展示一维字符串或对象列表；
  2. 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。它支持将键值对映射到指定的控件上：

 /// 配置图文ListView private fun setupImageTextListView() { val listView = findViewById(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\"), // 数据中的 key intArrayOf(R.id.text_view, R.id.image_view) // 映射到布局中的控件 ) listView.adapter = adapter }

示例中，list_item.xml 是我们自定义的布局文件，代码如下：

效果如下：

四、设置点击事件、选中状态

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 的选择器属性：

方式二：自定义点击后改变 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> 的数据结构，每个 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 中，展示左图右文的横向结构：

绑定适配器

使用 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() }

运行效果如下：

六、结语

本篇我们聚焦于 ListView 的基础使用方式，围绕其 UI 结构与适配器机制展开，主要介绍了以下内容：

✅ ListView 的布局结构与渲染逻辑；

✅ ArrayAdapter 适用于快速展示字符串列表；

✅ SimpleAdapter 可轻松实现图文混排展示；

✅ 如何监听点击事件与设置选中高亮；

✅ 结合完整示例，快速构建图文列表 UI；

虽然 ListView 的使用已经较为成熟，但它依然是理解 Android 列表机制、适配器模式、性能优化的良好入门途径。在项目初期阶段或快速原型开发中，ListView 仍具备一定实用价值。

网络标签：

相关问题