简介：一套基于 Android Studio 的仿微信界面工程源码，面向 Android 入门开发者和希望系统练习界面设计的移动端学习者。项目从零搭建类似微信的社交应用界面，覆盖 Activity 与布局管理、BottomNavigationView 底部导航、RecyclerView 聊天列表、自定义聊天气泡、Adapter 数据绑定、Glide/Picasso 图片加载、矢量图标、主题颜色与动画过渡等知识点，并包含版本控制目录与更新美化记录，可帮助理解真实 App 界面从模块拆解到实际实现的完整流程。资源为 zip 压缩包，共 1041 个文件，约 24.25MB，主要包含 XML 布局文件、Java 源码、PNG/JPG 图片素材、Gradle 构建配置、APK 安装包及部分编译缓存文件，目录结构完整，方便对照源码逐步运行调试验证，也便于二次改版学习。目前已有 3103 人学习下载，适合希望借助成熟案例快速掌握 Android 界面开发思路、扎实打好 UI 实现基础的读者，无论是课程设计还是个人练手均有较强参考价值。
1. 一个微信界面项目，值得从零手写一遍
用 Android Studio 做微信界面听起来像入门的练手题，真正动手才发现里面塞满了 Android 开发的硬骨头：底部导航栏的 Fragment 切换、会话列表的 RecyclerView 复用、聊天气泡的左右对齐、标题栏的状态栏适配。这份资源不只是一套能跑的界面代码，它把微信 UI 拆成了四个 Tab（微信、通讯录、发现、我）加一个聊天页，每一块都是 Android 开发中反复用到的组件组合。我拆完这个项目最大的感受是：拿它当教程走一遍，比你刷十几篇碎片化博客管用得多。适合刚学完四大组件想练手的人，也适合备课、做课程设计、想快速搭一套带底部导航的应用骨架的开发者。
2. 整体架构：单 Activity + 多 Fragment 的容器式设计
2.1 为什么是单 Activity 而不是一屏一个页面
微信这种体量的应用，如果每个页面都开一个 Activity，内存和启动开销都扛不住。项目沿用了主流做法——一个 MainActivity 作为宿主容器，界面上半部分放 FrameLayout，下半部分放 BottomNavigationView，四个页面分别用 Fragment 填充。这样每个 Tab 切换时只替换容器里的内容，Activity 全程只创建一次，返回栈也更好控制。
切换逻辑里最容易翻车的点是不用 replace 而用 add + hide。replace 每次切换都会把 Fragment 重建一遍，用户切走再切回来，列表滚动位置和输入框内容全丢了；add + hide 是把四个 Fragment 都 new 出来，切走时 hide，切回来时 show，状态全保住了。代价是四个页面同时常驻内存，但微信首页这种轻量页面完全无所谓，这个取舍在后面二次开发时也更好处理。
private val fragments = mutableListOf<Fragment>() private var currentIndex = 0 private fun switchTo(index: Int) { supportFragmentManager.beginTransaction().apply { fragments.forEachIndexed { i, fragment -> if (i == index) { if (!fragment.isAdded) add(R.id.contentContainer, fragment) show(fragment) } else { if (fragment.isAdded) hide(fragment) } } }.commit() currentIndex = index }这套逻辑的参数核心是R.id.contentContainer，它是 MainActivity 布局里的 FrameLayout 容器 ID，所有 Fragment 都挂在这下面。fragments里存的是四个页面实例，在onCreate里统一初始化，例如fragments.add(WeChatFragment())按 Tab 顺序排列。currentIndex记录当前页下标，配合底部导航的选中监听事件，就能保证点击和代码跳转走同一条路径。
2.2 目录结构与资源组织方式
项目遵循了标准的 Android 工程结构，没有用模块化多 Module 的复杂分层，因为目标是把 UI 还原讲清楚，而不是演示组件化。
app/ ├── src/main/ │ ├── java/com/example/wechat/ │ │ ├── MainActivity.java │ │ ├── adapter/ │ │ │ ├── ConversationAdapter.java │ │ │ └── MessageAdapter.java │ │ ├── fragment/ │ │ │ ├── WeChatFragment.java │ │ │ ├── ContactsFragment.java │ │ │ ├── DiscoverFragment.java │ │ │ └── MeFragment.java │ │ ├── model/ │ │ │ ├── Conversation.java │ │ │ └── ChatMessage.java │ │ └── util/ │ │ └── StatusBarUtil.java │ ├── res/ │ │ ├── layout/ │ │ │ ├── activity_main.xml │ │ │ ├── fragment_wechat.xml │ │ │ ├── item_conversation.xml │ │ │ ├── item_message_left.xml │ │ │ └── item_message_right.xml │ │ ├── menu/ │ │ │ └── bottom_nav_menu.xml │ │ ├── drawable/ │ │ │ ├── bg_bubble_left.xml │ │ │ └── bg_bubble_right.xml │ │ └── values/ │ │ ├── colors.xml │ │ └── strings.xml └── build.gradle这个目录里的关键分层在于 adapter 和 model 的独立。Conversation.java里面只放会话数据，包含字段如String name、String lastMsg、String time、int avatarRes，以及对应的 getter/setter。UI 层不直接处理数据，而是通过ConversationAdapter把列表项绑定到item_conversation.xml上。聊天页的MessageAdapter同理，它根据消息是isFromUser还是isFromFriend来选择加载左气泡还是右气泡布局——这是聊天页面最重要的一层判断。
2.3 底部导航的技术选型：BottomNavigationView 与 RadioGroup
底部导航这个组件有几个方案可选：BottomNavigationView（Material Components 库提供）、RadioGroup加上Fragment布局、以及自己用LinearLayout写死四个入口。项目选择的是BottomNavigationView，因为它自带item选中态切换、徽标角标、点击涟漪效果，还原微信底部栏的观感成本最低。
菜单资源在res/menu/bottom_nav_menu.xml里定义，每个 item 需要id、icon、title三个属性。需要注意的坑：普通.png图标在选中和未选中时不会自动变色，必须用 selector 定义两套颜色的 drawable，否则图标永远是同一种灰。
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/nav_wechat" android:icon="@drawable/ic_wechat_selector" android:title="@string/tab_wechat" /> <item android:id="@+id/nav_contacts" android:icon="@drawable/ic_contacts_selector" android:title="@string/tab_contacts" /> </menu>title属性不只是显示文字，它还承担无障碍访问的标签作用。icon引用的ic_wechat_selector是一个 selector 资源，里面写了state_checked="true"时用绿色图标、默认用灰色图标的规则，这里就实现了微信底部图标变色的效果。在 Activity 里给 BottomNavigationView 设置setOnItemSelectedListener，把返回的itemId映射成之前switchTo(index)的下标，就完成了点击导航和 Fragment 切换的串联。
3. 核心代码拆解：从底部导航到聊天气泡的完整链路
3.1 会话列表：RecyclerView 的 Adapter 绑定与数据填充
打开微信首页长得像一张卡片列表，每行是头像、昵称、最后一条消息和时间。这个列表项目里用 RecyclerView 实现，而不是 ListView。RecyclerView 强制你写 ViewHolder，强制你设置 LayoutManager，好处是滚动的性能缓存做得更好，这也是微信这类高频滚动页面该有的配置。
public class ConversationAdapter extends RecyclerView.Adapter<ConversationAdapter.VH> { private List<Conversation> data; public ConversationAdapter(List<Conversation> data) { this.data = data; } @NonNull @Override public VH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View v = LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_conversation, parent, false); return new VH(v); } @Override public void onBindViewHolder(@NonNull VH holder, int position) { Conversation c = data.get(position); holder.ivAvatar.setImageResource(c.getAvatarRes()); holder.tvName.setText(c.getName()); holder.tvLastMsg.setText(c.getLastMsg()); holder.tvTime.setText(c.getTime()); if (c.getUnreadCount() > 0) { holder.tvUnread.setVisibility(View.VISIBLE); holder.tvUnread.setText(String.valueOf(c.getUnreadCount())); } else { holder.tvUnread.setVisibility(View.GONE); } } @Override public int getItemCount() { return data == null ? 0 : data.size(); } static class VH extends RecyclerView.ViewHolder { ImageView ivAvatar; TextView tvName, tvLastMsg, tvTime, tvUnread; VH(@NonNull View itemView) { super(itemView); ivAvatar = itemView.findViewById(R.id.iv_avatar); tvName = itemView.findViewById(R.id.tv_name); tvLastMsg = itemView.findViewById(R.id.tv_last_msg); tvTime = itemView.findViewById(R.id.tv_time); tvUnread = itemView.findViewById(R.id.tv_unread); } } }这套 Adapter 的逻辑核心在onBindViewHolder——它负责把Conversation对象里的字段映射到item_conversation.xml的各控件上。getItemCount决定了列表长度，模拟数据里放了十几条会话就能撑满一屏。item_conversation.xml的根布局是LinearLayout，高度设成wrap_content，左右 padding 各 16dp，内部用横向LinearLayout放头像、中间竖排两行文字的容器、右侧时间文本。未读角标tvUnread在数据里unreadCount为 0 时直接GONE掉，避免显示一个空的红点。
在WeChatFragment的onViewCreated里初始化列表，模拟数据一般直接写死：
RecyclerView rv = view.findViewById(R.id.rv_conversation); rv.setLayoutManager(new LinearLayoutManager(requireContext())); ConversationAdapter adapter = new ConversationAdapter(buildMockData()); rv.setAdapter(adapter);这里LinearLayoutManager是必须的一步，漏掉它列表什么都不显示，而且不报错——这是新手最容易怀疑人生的地方，现象和排查方法在第 5 章会细讲。buildMockData()返回List<Conversation>，里面用new Conversation("文件传输助手", "你收到了一条消息", "21:45", R.drawable.avatar_1, 0)这样的方式填充十几条数据，模拟真实的会话列表效果。
3.2 聊天页面：左右气泡布局与消息适配
聊天页是另一个 RecyclerView，区别在于它有两种 item 类型，消息来自自己时气泡靠右、绿底白字；来自对方时气泡靠左、白底黑字。实现双布局的核心是重写getItemViewType，让 RecyclerView 根据消息来源返回不同的viewType，然后在onCreateViewHolder里用viewType分支加载不同的布局文件。
@Override public int getItemViewType(int position) { return data.get(position).isFromUser() ? TYPE_USER : TYPE_FRIEND; } @NonNull @Override public MessageAdapter.VH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { if (viewType == TYPE_USER) { return new VH(LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_message_right, parent, false)); } return new VH(LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_message_left, parent, false)); }TYPE_USER和TYPE_FRIEND是两个常量，分别取值1和0，这里的数值没有业务含义，只是区分两种布局的标识。气泡的背景不能画死颜色，而是用一个 drawable 文件bg_bubble_right.xml来实现圆角效果，里面通过shape标签设置corners的radius为 12dp，再填充绿色。
<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#95EC69" /> <corners android:radius="12dp" /> </shape>有一点微信风格值得注意：聊天气泡上下两个角是圆角，但靠近尾巴的那一侧是直角，看起来更像对话框，静下心还原时往往把这些细节处理成统一 12dp 圆角。项目为了降低入门门槛统一用了圆角，二次开发时你可以用cornerRadius和topRightRadius组合微调。
聊天消息的时间分隔逻辑有讲究——连续 5 分钟内多条消息不重复显示时间，超过 5 分钟才插入一个居中的时间条。这块属于高级玩法，项目里没有做，但二次开发时可以自己加，思路是在MessageAdapter里对比当前消息getTime()和前一条消息的时间差，超过 5 分钟就在列表里插入一条类型为TYPE_TIME的消息项。
3.3 标题栏：状态栏透明与沉浸式适配
微信首页的标题栏是自定义的，没有用系统默认的ActionBar，而是自己在布局顶部放了一个LinearLayout作为标题栏，左侧放搜索框入口，中间放标题文字，右侧放加号按钮。状态栏颜色和标题栏颜色必须一致，否则顶部会露出一条默认的白带，这就是所谓的沉浸式适配。
public class StatusBarUtil { public static void setTransparent(Activity activity) { Window window = activity.getWindow(); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(Color.parseColor("#EDEDED")); window.getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); } }这段代码做了两件事：把状态栏的背景色改成与标题栏统一的浅灰色，同时把状态栏上的文字图标设成深色（LIGHT_STATUS_BAR），避免深色底配深色字看不清。如果你把#EDEDED改成微信的绿色#07C160，图标颜色就得改成SYSTEM_UI_FLAG_VISIBLE的白字模式，否则状态栏层级会直接糊掉。这部分适配建议单独抽一个工具类，项目里所有 Fragment 所在的 Activity 只需在onCreate里调用一行就能统一处理。
标题栏右侧的加号按钮点击效果，项目组是用一个PopupWindow实现的下拉菜单，弹出群聊、添加朋友、扫一扫、收付款四个选项。这里的PopupWindow的showAsDropDown属性决定了弹窗锚定在加号按钮的底部，宽度最好设成WRAP_CONTENT配合MeasureSpec计算高度，而不是match_parent，否则弹窗会顶到屏幕边缘，观感离微信原版差距很大。
3.4 通讯录与发现页：列表项分组和简单图标区
通讯录页的复杂度比微信页低很多，关键在分组索引。项目里通讯录用的也是 RecyclerView，但数据源是一个List<Contact>，在 Adapter 里重写getItemViewType判断当前是分组标题还是联系人。分组标题的 item 布局是灰色小字号文字，联系人的 item 和会话列表很像，区别是没有时间戳。发现页更简单，它是一个ScrollView里嵌套多个LinearLayout列表块，每块有边框圆角背景，块内若干行功能入口。这里没有用 RecyclerView，因为发现页项数量固定且不会滚动复用，嵌套滚动用LinearLayout反而更直观。
4. 从导入到跑通：环境配置与真机调试的完整流程
4.1 环境要求与 Gradle 配置
先把环境确认一遍：Android Studio 版本建议 2021.2.1 及以上，太低会不支持项目里用到的 Android Gradle Plugin 版本。JDK 至少 11，项目里如果没用到 Java 17 的新特性，11 就够了。Gradle 版本主要看gradle-wrapper.properties里distributionUrl写的是什么，和 Android Studio 版本匹配就没问题。
打开app/build.gradle看核心依赖配置：
android { namespace 'com.example.wechat' compileSdk 34 defaultConfig { applicationId "com.example.wechat" minSdk 21 targetSdk 34 versionCode 1 versionName "1.0" } } dependencies { implementation 'androidx.appcompat:appcompat:1.6.1' implementation 'com.google.android.material:material:1.9.0' implementation 'androidx.recyclerview:recyclerview:1.3.0' implementation 'androidx.fragment:fragment:1.6.0' implementation 'de.hdodenhof:circleimageview:3.1.0' }依赖里最值得说明的是circleimageview——微信列表和聊天页的头像都是圆形，原生ImageView不支持圆形裁剪，要么自己写BitmapShader裁剪，要么用这个第三方库一行搞定。material库提供BottomNavigationView。fragment库在 appcompat 里会传递依赖，但显式声明版本能避免以后升级冲突。
4.2 导入步骤与首次构建
导入方式搜一下就能找到：Android Studio 的File -> New -> Import Project，选中项目的根目录build.gradle，等待 Gradle 同步。首次构建很慢，因为要下载依赖包，卡住的时候看Build窗口的日志，常见的是网络超时。用的镜像仓库不一样，偶尔会遇到依赖拉不下来，特别是jcenter()已经停止维护的老项目，需要把仓库源换成mavenCentral()和google()。
repositories { google() mavenCentral() }构建完成后直接点运行，如果用的是模拟器，建议选Pixel 5这类带底部导航栏的机型镜像，系统版本选 API 30 以上，低版本模拟器对LIGHT_STATUS_BAR的支持不一致，容易出现状态栏文字看不清的意外情况。真机调试注意开开发者选项里的USB 调试，第一次连接要在手机上点允许该电脑调试，用微信项目练手时往往会在这里被拦一下。
从命令行构建也支持，在项目根目录执行./gradlew assembleDebug（Windows 是gradlew.bat），产物在app/build/outputs/apk/debug/app-debug.apk，可以直接扔进模拟器或真机安装。命令行构建的日志比 Android Studio 的图形界面更直观，遇到依赖冲突时建议先用命令跑一遍，看报错定位更快。
4.3 模拟器跑通后注意的点
模拟器跑通微信界面和真机跑通还是有差异的：模拟器的默认 DPI 比较低，图像尺寸可能比真机大一圈；同理，列表滚动的流畅度模拟器会明显好于真机，如果真机上列表卡顿，优先检查item_conversation.xml里有没有用复杂的嵌套RelativeLayout或者过大的图片资源；时间显示用的是SimpleDateFormat("HH:mm")格式化成当前时间，模拟器系统时间不对会显示得和你预期不一致，这不是代码问题。项目跑起来之后，最直接的验证方式是把模拟器窗口拉长，等比观察微信页、通讯录页、发现页、我页的切换，再点进任意一个会话框，对比一下左右气泡和标题栏返回键的交互。
5. 避坑记录：UI 还原中最容易翻车的 5 个细节
5.1 Fragment 切换后页面状态丢失
现象：从微信页切到发现页再切回来，微信页的列表滚回了顶部，输入框里刚打的东西也没了。原因：切换时用了replace()替换 Fragment，每次都会销毁旧实例重建新实例。解决：统一改成add + hide + show的方案，把四个 Fragment 实例只创建一次，切换时隐藏与显示，而不是销毁重建。这就是第 2 章switchTo方法的由来——这是血泪经验总结出来的，做聊天应用时消息输入框和列表位置是用户强感知的状态，丢一次就再也不想用这个应用了。
5.2 底部导航图标不变色，选了也没反馈
现象：底部导航栏的图标永远是灰色的，点一下没有颜色变化，让人觉得按钮没选中。原因：直接给menu item设置了普通 PNG 图片，没有用 selector 写选中态和默认态的差异。解决：在res/drawable目录下建立ic_wechat_selector.xml，内容如下：
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/ic_wechat_selected" /> <item android:drawable="@drawable/ic_wechat_normal" /> </selector>关键参数是state_checked，它是BottomNavigationView选中菜单项时自动触发的状态。两套图标资源需要内容相同但颜色不同，推荐的做法是同一张源图在 Android Studio 里右键New -> Image Asset，分别选不同的主题色生成两个副本。
5.3 RecyclerView 设置了 Adapter 但列表是空的
现象：聊天列表区域一片空白，没有任何报错，Logcat 也干净。原因：忘了设置LayoutManager。RecyclerView 不像 ListView 自带布局逻辑，它必须通过setLayoutManager指定纵向排列还是网格排列，而设置 Adapter 不会自动帮你补上这一步。解决：在onViewCreated里先补rv.setLayoutManager(new LinearLayoutManager(requireContext()))。这条坑我见过大量新手踩进去，因为空白不报错，人很容易先怀疑数据源、再怀疑 Adapter、最后才想到 LayoutManager。
5.4 状态栏颜色和标题栏脱节
现象：顶部状态栏白底黑字，和下方的自定义标题栏颜色完全是两个世界，一眼看出没做过适配。原因：目标 SDK 在 Android 6.0 以后，系统状态栏默认由系统决定，你没有在代码里设置它的颜色和样式。解决：调用StatusBarUtil.setTransparent时把FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS加上，Android 5.0 以上都会生效，同时用SYSTEM_UI_FLAG_LIGHT_STATUS_BAR决定深色主题还是浅色主题。不同品牌 ROM 对沉浸式适配的支持程度有差异，个别机型（常见的是某些国产定制系统）需要额外处理fitsSystemWindows="true"属性，否则标题栏会顶到状态栏下面，布局被遮挡一截。
5.5 中文乱码和模拟器字体过小
现象：整个界面文字全是乱码方块，模拟器上字小得看不清。原因：strings.xml文件编码不是 UTF-8，或者英文系统模拟器缺少中文字体。解决：确认 Android Studio 里File Encoding设置为 UTF-8，res/values/strings.xml的语言区不使用默认的values，可以建立values-zh目录保证中文环境下文字正确。模拟器字体问题，把 API 30 以上系统镜像配好中文字体就行，不用代码改。
以上 5 条是复刻微信界面时高频命中的问题，几乎每个入手的开发者都会遇到至少两条。遇到问题时先看 Logcat 有没有红色报错，再看 Build 窗口有没有编译告警，最后检查资源文件命名和约束引用。很多 UI 问题不报错，只能靠逐个控件梳理来定位。
6. 二次开发：半小时给界面加上暗色模式
微信界面还原项目做到跑通只是第一步，这套骨架最有价值的用途是作为你上生产项目的起点。挑一个改动面小、见效快的改造课题，我强烈推荐暗色模式。微信官方在暗色模式上是把页面整体切到黑底白字，这个改造正好检验你对资源文件、颜色值、适配模式的理解有没有到位。
先梳理改动面：所有colors.xml里的颜色值、四个 Fragment 的背景色、bg_bubble_left.xml和bg_bubble_right.xml的背景色。最省事的做法是引入values-night资源目录，把暗色模式的颜色重新定义一份，系统切到深色主题时会自动加载这套资源，不需要改任何 Java 代码。
<resources> <color name="bg_page">#111111</color> <color name="bg_title_bar">#1F1F1F</color> <color name="text_primary">#E6E6E6</color> <color name="text_secondary">#999999</color> <color name="bubble_right">#0E8A44</color> <color name="bubble_left">#2A2A2A</color> <color name="divider_line">#333333</color> </resources>这份values-night/colors.xml和默认values/colors.xml里的颜色名必须一一对应，否则暗色模式下系统找不到颜色名，会直接走默认值，导致一部分界面亮一部分界面暗的割裂效果。项目里所有布局引用的颜色都改成@color/bg_page这类名字以后，暗色适配的核心工作量就只剩下检查一遍 item 布局里的硬编码颜色值，比如气泡里的文字颜色写在item_message_left.xml里的android:textColor="#333333"，需要改成@color/text_primary才能真正跟着主题变。
改完后验证方法很简单：把模拟器系统设置切到深色主题，如果页面所有区块自动切换成暗色，说明资源覆盖是对的。如果想在应用内手动切换，可以给MainActivity的onCreate加上AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)强制切暗色。
这套改造做完，你对颜色资源的理解和主题切换机制就彻底通透了。我个人的习惯是每个 UI 项目从第一天就把颜色引用抽到colors.xml，绝对不写死十六进制在布局文件里。当初就是偷懒写死颜色，暗色模式改造时翻遍了十几个布局文件，一个个替换，改到半夜没改完。从那以后我每次新建布局都强制走一遍颜色引用检查，血泪经验换来的习惯。希望帮到你。
本文还有配套的精品资源，点击获取
