简介一套基于 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 mutableListOfFragment() 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底部导航这个组件有几个方案可选BottomNavigationViewMaterial Components 库提供、RadioGroup加上Fragment布局、以及自己用LinearLayout写死四个入口。项目选择的是BottomNavigationView因为它自带item选中态切换、徽标角标、点击涟漪效果还原微信底部栏的观感成本最低。菜单资源在res/menu/bottom_nav_menu.xml里定义每个 item 需要id、icon、title三个属性。需要注意的坑普通.png图标在选中和未选中时不会自动变色必须用 selector 定义两套颜色的 drawable否则图标永远是同一种灰。menu xmlns:androidhttp://schemas.android.com/apk/res/android item android:idid/nav_wechat android:icondrawable/ic_wechat_selector android:titlestring/tab_wechat / item android:idid/nav_contacts android:icondrawable/ic_contacts_selector android:titlestring/tab_contacts / /menutitle属性不只是显示文字它还承担无障碍访问的标签作用。icon引用的ic_wechat_selector是一个 selector 资源里面写了state_checkedtrue时用绿色图标、默认用灰色图标的规则这里就实现了微信底部图标变色的效果。在 Activity 里给 BottomNavigationView 设置setOnItemSelectedListener把返回的itemId映射成之前switchTo(index)的下标就完成了点击导航和 Fragment 切换的串联。3. 核心代码拆解从底部导航到聊天气泡的完整链路3.1 会话列表RecyclerView 的 Adapter 绑定与数据填充打开微信首页长得像一张卡片列表每行是头像、昵称、最后一条消息和时间。这个列表项目里用 RecyclerView 实现而不是 ListView。RecyclerView 强制你写 ViewHolder强制你设置 LayoutManager好处是滚动的性能缓存做得更好这也是微信这类高频滚动页面该有的配置。public class ConversationAdapter extends RecyclerView.AdapterConversationAdapter.VH { private ListConversation data; public ConversationAdapter(ListConversation 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()返回ListConversation里面用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:androidhttp://schemas.android.com/apk/res/android solid android:color#95EC69 / corners android:radius12dp / /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但数据源是一个ListContact在 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 assembleDebugWindows 是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:androidhttp://schemas.android.com/apk/res/android item android:state_checkedtrue android:drawabledrawable/ic_wechat_selected / item android:drawabledrawable/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 对沉浸式适配的支持程度有差异个别机型常见的是某些国产定制系统需要额外处理fitsSystemWindowstrue属性否则标题栏会顶到状态栏下面布局被遮挡一截。5.5 中文乱码和模拟器字体过小现象整个界面文字全是乱码方块模拟器上字小得看不清。原因strings.xml文件编码不是 UTF-8或者英文系统模拟器缺少中文字体。解决确认 Android Studio 里File Encoding设置为 UTF-8res/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 namebg_page#111111/color color namebg_title_bar#1F1F1F/color color nametext_primary#E6E6E6/color color nametext_secondary#999999/color color namebubble_right#0E8A44/color color namebubble_left#2A2A2A/color color namedivider_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绝对不写死十六进制在布局文件里。当初就是偷懒写死颜色暗色模式改造时翻遍了十几个布局文件一个个替换改到半夜没改完。从那以后我每次新建布局都强制走一遍颜色引用检查血泪经验换来的习惯。希望帮到你。本文还有配套的精品资源点击获取