【Android开发】实现微信首页聊天列表

木木与代码(接项目)

于 2025-04-08 16:34:27 发布

阅读量415

点赞数 4

分类专栏： Android开发文章标签： android 微信 gitee android studio

本文链接：https://blog.csdn.net/m0_46426465/article/details/147068715

版权

Android开发专栏收录该内容

17 篇文章

订阅专栏

【Android开发】实现微信首页聊天列表

公众号：木木与代码
本文作者：@MuMu
编写日期：2025年04月08日
本文字数：6303个字符
关注可了解更多的教程。问题或建议，请公众号留言；

01 创建项目

选择项目模板：

设置项目名称，

项目创建成功

02 页面布局

首页

这里我们可以使用RecyclerView或ListView来实现。

RecyclerView 是 Android 提供的一个更加灵活和高效的列表组件，但是RecyclerView学习曲线稍高，配置较复杂。 RecyclerView对于初学者来说理解如何使用可能需要一些时间，相对于 ListView 来说，RecyclerView 需要更多的配置工作。

ListView 是一个比较传统的 Android 组件，用于显示垂直滚动的列表，使用比较简单，易于上手，适合快速开发。这里选择使用ListView 。

在首页添加一个TextView用来显示顶部标题，添加一个ListView用来渲染聊天列表数据。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="聊天"
        android:gravity="center"
        android:paddingTop="44dp"
        android:paddingBottom="10dp"
        android:textColor="#222"
        android:textSize="16sp"
        android:textStyle="bold"/>

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@null"/>

</LinearLayout>

列表layout

在layout文件夹创建一个新的名为chat_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:background="@color/white"
    android:paddingTop="8dp">

    <ImageView
        android:id="@+id/ivImg"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="16dp"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/tvName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/ivImg"
        android:textSize="15sp"
        android:textStyle="bold"
        android:textColor="#000"
        android:layout_marginTop="4dp"
        android:text="张三"/>

    <TextView
        android:id="@+id/tvTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="16dp"
        android:layout_marginTop="5dp"
        android:textSize="13sp"
        android:textColor="#aaa"
        android:text="13:14"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/ivImg"
        android:textSize="12sp"
        android:textColor="#999"
        android:layout_above="@id/vLine"
        android:layout_marginBottom="4dp"
        android:text="在干嘛？"/>

    <View
        android:id="@+id/vLine"
        android:layout_width="match_parent"
        android:layout_height="0.7dp"
        android:layout_below="@+id/ivImg"
        android:layout_toEndOf="@id/ivImg"
        android:background="#ececec"
        android:layout_marginTop="8dp"
        android:text="张三"/>

</RelativeLayout>

03 数据处理

创建Chat类，使用Chat类表示每个聊天信息的数据。

package com.mumu.android.chatlist;

public class Chat {
    private String id;
    private String name;
    private String lastMessage;
    private String time;
    private int avatarResourceId; // 使用资源ID或URL来表示头像图片

    public Chat() {
    }

    public Chat(String id, String name, String lastMessage, String time, int avatarResourceId) {
        this.id = id;
        this.name = name;
        this.lastMessage = lastMessage;
        this.time = time;
        this.avatarResourceId = avatarResourceId;
    }

    // 省略get,set方法
}

创建ChatListAdapter类，处理渲染聊天列表的逻辑。

package com.mumu.android.chatlist;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import java.util.List;

public class ChatListAdapter extends ArrayAdapter<Chat> {
    private final Context mContext;
    private final List<Chat> mChatList;

    public ChatListAdapter(@NonNull Context context, @NonNull List<Chat> objects) {
        super(context, R.layout.chat_item, objects);
        mContext = context;
        mChatList = objects;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        ViewHolder holder;

        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(R.layout.chat_item, parent, false);
            holder = new ViewHolder();
            holder.avatarImageView = convertView.findViewById(R.id.ivImg);
            holder.nameTextView = convertView.findViewById(R.id.tvName);
            holder.lastMessageTextView = convertView.findViewById(R.id.tvMsg);
            holder.timeTextView = convertView.findViewById(R.id.tvTime);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }


        Chat chat = mChatList.get(position);
        holder.avatarImageView.setImageResource(chat.getAvatarResourceId());
        holder.nameTextView.setText(chat.getName());
        holder.lastMessageTextView.setText(chat.getLastMessage());
        holder.timeTextView.setText(chat.getTime());

        return convertView;
    }

    static class ViewHolder {
        ImageView avatarImageView;
        TextView nameTextView, lastMessageTextView, timeTextView;
    }
}

04 测试

在MainActivity中使用ChatListAdapter类，在ListView中显示数据。

private void testData(){
    // 初始化ListView
    ListView listView = findViewById(R.id.listView);
    List<Chat> chatList = new ArrayList<>();
    listView.setAdapter(new ChatListAdapter(this, chatList));

    chatList.add(new Chat("1", "@MuMu", "在干嘛呢？", "13:14", R.drawable.img_test_1));
    chatList.add(new Chat("2", "木木", "Hello", "11:44", R.drawable.img_test_2));
    chatList.add(new Chat("3", "张三张三", "你好", "5:20", R.drawable.img_test_3));
    chatList.add(new Chat("4", "木木与代码", "可以，可以", "昨天", R.drawable.img_test_4));
    chatList.add(new Chat("5", "李四", "你好", "昨天", R.drawable.img_test_5));
    chatList.add(new Chat("6", "张小三", "你好", "前天", R.drawable.img_test_6));
    chatList.add(new Chat("7", "赵六六", "你好", "4月6日", R.drawable.img_test_7));
    chatList.add(new Chat("8", "王五王五", "哈哈哈哈哈哈啊哈哈啊哈哈啊 ", "4月8日", R.drawable.img_test_6));
    chatList.add(new Chat("9", "木木与代码", "你好", "2月14日", R.drawable.img_test_1));
    chatList.add(new Chat("10", "@李四~", "真不错", "2月14日", R.drawable.img_test_5));
    chatList.add(new Chat("11", "张小三", "我在学习。。。", "2月14日", R.drawable.img_test_3));
    chatList.add(new Chat("12", "赵六六", "你好", "2月14日", R.drawable.img_test_4));
    chatList.add(new Chat("13", "王五王五", "哈哈哈哈哈哈啊哈哈啊哈哈啊 ", "2月14日", R.drawable.img_test_2));
    chatList.add(new Chat("14", "李四~~", "哈哈哈哈哈哈啊哈哈啊哈哈啊 ", "2月14日", R.drawable.img_test_3));

    // 点击listView时Toast name
    listView.setOnItemClickListener((parent, view, position, id) -> {
        Chat chat = (Chat) parent.getItemAtPosition(position);
        Toast.makeText(MainActivity.this, chat.getName(), Toast.LENGTH_SHORT).show();
    });
}