关于ListView 的使用文档

1. 概述

ListView 是 Android 中用于显示列表数据的核心控件，本项目通过一个购物商城示例展示了 ListView 的基本使用方法，包括数据适配、布局设计和性能优化。

2. 项目结构

2.1 主要文件

文件路径	作用
app/src/main/java/cn/edu/listview/MainActivity.java	主活动，实现 ListView 的初始化和数据绑定
app/src/main/res/layout/activity_main.xml	主布局文件，包含 ListView 控件
app/src/main/res/layout/list_item.xml	列表项布局文件，定义列表项的显示样式

2.2 资源文件

路径	内容
app/src/main/res/drawable-hdpi/	商品图片资源（apple.png、cake.png、kiwifruit.png、scarf.png、table.png、wireclothes.png）

3. 核心实现

3.1 数据准备

在 MainActivity.java 中定义数据源：

// 商品名称与价格数据集合
private String[] titles = {"桌子", "苹果", "蛋糕", "线衣", "猕猴桃", "围巾"};
private String[] prices = {"1800元", "10元/kg", "300元", "350元", "10元/kg", "280元"};
// 图片数据集合
private int[] icons = {R.drawable.table, R.drawable.apple, R.drawable.cake,
        R.drawable.wireclothes, R.drawable.kiwifruit, R.drawable.scarf};

3.2 ListView 初始化与适配器设置

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mListView = findViewById(R.id.lv); // 初始化ListView控件
    MyBaseAdapter mAdapter = new MyBaseAdapter(); // 创建适配器实例
    mListView.setAdapter(mAdapter); // 设置适配器
}

3.3 自定义适配器

继承 BaseAdapter 实现数据与视图的绑定：

class MyBaseAdapter extends BaseAdapter {
    @Override
    public int getCount() {
        return titles.length; // 返回数据总数
    }

    @Override
    public Object getItem(int position) {
        return titles[position]; // 返回指定位置的数据
    }

    @Override
    public long getItemId(int position) {
        return position; // 返回指定位置的ID
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (convertView == null) {
            // 加载列表项布局
            convertView = View.inflate(MainActivity.this, R.layout.list_item, null);
            // 初始化ViewHolder
            holder = new ViewHolder();
            holder.title = convertView.findViewById(R.id.title);
            holder.price = convertView.findViewById(R.id.price);
            holder.iv = convertView.findViewById(R.id.iv);
            convertView.setTag(holder);
        } else {
            // 复用ViewHolder
            holder = (ViewHolder) convertView.getTag();
        }
        // 设置数据
        holder.title.setText(titles[position]);
        holder.price.setText(prices[position]);
        holder.iv.setBackgroundResource(icons[position]);
        return convertView;
    }

    // ViewHolder类，用于缓存控件引用
    class ViewHolder {
        TextView title, price;
        ImageView iv;
    }
}

4. 布局资源详解

4.1 主布局 (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!-- 标题栏 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:text="购物商城"
        android:textSize="18sp"
        android:textColor="#FFFFFF"
        android:background="#FF8F03"
        android:gravity="center"/>
    <!-- ListView控件 -->
    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

4.2 列表项布局 (list_item.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
    <!-- 商品图片 -->
    <ImageView
        android:id="@+id/iv"
        android:layout_width="120dp"
        android:layout_height="90dp"
        android:layout_centerVertical="true"/>
    <!-- 商品信息容器 -->
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/iv"
        android:layout_centerVertical="true">
        <!-- 商品名称 -->
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="桌子"
            android:textSize="20sp"
            android:textColor="#000000" />
        <!-- 价格标签 -->
        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="价格："
            android:textSize="20sp"
            android:layout_marginTop="10dp"
            android:layout_below="@+id/title"
            android:textColor="#FF8F03" />
        <!-- 价格值 -->
        <TextView
            android:id="@+id/price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1000"
            android:textSize="20sp"
            android:layout_below="@+id/title"
            android:layout_toRightOf="@+id/tv_price"
            android:textColor="#FF8F03"
            android:layout_marginTop="10dp"/>
    </RelativeLayout>
</RelativeLayout>

5. 控件说明

控件	ID	作用	位置
ListView	lv	显示商品列表	activity_main.xml
ImageView	iv	显示商品图片	list_item.xml
TextView	title	显示商品名称	list_item.xml
TextView	tv_price	显示价格标签	list_item.xml
TextView	price	显示商品价格	list_item.xml

6. 性能优化

6.1 ViewHolder 模式

通过 ViewHolder 模式缓存控件引用，避免在 getView() 方法中重复调用 findViewById()，提高滚动性能。

6.2 视图复用

利用 convertView 参数复用已创建的视图，减少内存消耗和视图创建时间。

7. 使用步骤

1. 添加 ListView 到布局文件：在 activity_main.xml 中定义 ListView 控件。
2. 准备数据源：定义存储数据的数组或集合。
3. 创建自定义适配器：继承 BaseAdapter 并实现必要方法。
4. 初始化 ListView 并设置适配器：在 onCreate() 方法中完成初始化和设置。
5. 优化性能：使用 ViewHolder 模式和视图复用。

8. 运行效果

应用运行时，将显示一个带有标题栏的购物商城页面，下方是商品列表，每个列表项包含商品图片、名称和价格，可上下滚动查看所有商品。

9. 总结

本项目通过简洁的示例展示了 ListView 的基本使用方法，包括数据绑定、布局设计和性能优化。ListView 作为 Android 中经典的列表控件，适用于显示大量数据，通过合理的适配器设计和性能优化，可以实现流畅的用户体验