简介这是一份基于Android Studio的微信界面仿制实战项目面向安卓入门与进阶学习者。项目围绕微信典型界面包含底部导航栏、聊天列表、个人资料页、聊天气泡等模块覆盖约束布局、材料设计组件、自定义视图、列表适配与数据绑定、图片加载、主题配色、动画过渡等知识能帮助读者理顺从新建工程到界面美化的完整流程。资源包为zip格式共1041个文件大小24.25MB内以Java源码、XML布局、PNG/JPG图片、Gradle构建配置为主也包含部分编译生成的DEX/Class/APK文件便于对照工程结构理解安卓项目构建。目前已有3103人学习适合直接导入开发工具边看边练。通过这套资源读者可以获得完整可运行的微信风格界面工程并掌握复杂UI布局、列表数据绑定、图片加载方案及视觉细节调整等实践方法工程中保留的版本控制与更新记录也有助于理解项目迭代过程对希望用仿写项目来提升界面开发能力的人尤其实用。1. 用 Android Studio 复刻聊天应用界面这套源码包把骨架和坑都留好了用 Android Studio 去做一个聊天软件的界面听起来像是课程设计第一天就会定下的题目但真把这份源码包拆开跑起来你会发现难点根本不在那几个 xml 布局文件上。很多人卡在第一步底部导航切来切去 Fragment 状态丢了、列表滑着滑着图片乱跳、一上真机直接白屏。这套资源把主界面、会话列表、聊天页、朋友圈这类带交互的页面骨架搭好了拿到手能直接编译运行改改颜色和图标就能拿去交作业或做 Demo。适合刚把四组件学完、想看看完整工程长什么样的新人也适合赶时间出演示效果的开发者。我按自己的习惯从工程结构到运行细节过了一遍下面把值得抄的写出来。2. 页面骨架底部导航与 Fragment 容器怎么搭任何复杂的界面第一件事都是把骨架立起来。这套源码包采用的是单 Activity 多 Fragment 的结构主界面底部有四个 Tab对应会话、通讯录、发现、我的每个 Tab 内部还要承载二级页面比如会话列表点进去是聊天页、发现里挂着朋友圈入口。这种层级下骨架选型直接决定后面写得顺不顺手。2.1 为什么要用 Fragment 而不是多 Activity新手容易犯的错是把每个 Tab 都做成一个 Activity切换时 startActivity 跳转。这在四个平级入口的情况下能跑但一旦涉及二级页面回退、会话列表状态保持、聊天页传参Activity 方案就非常别扭Intent 传值要序列化回退要维护返回栈页面之间切换还会出现明显的重建过程。源码包这里用的是 Fragment理由很实际——Fragment 的事务机制天然支持“在一个 Activity 内切换页面”FragmentManager 帮你管生命周期和回退栈切换成本比 Activity 小一个量级。另一个关键理由是状态保存。会话列表滑到第 20 条切到通讯录再切回来如果用的是 replace 替换 Fragment列表会重建并滚回顶部。而 add hide/show 的方案能让 Fragment 实例一直活着滚动位置、输入框内容、图片加载状态全都在。这也是这份源码包和普通课程设计最大的区别它没把“切换页面”做成销毁重建而是做成“隐藏/显示”。// activity_main.xml 核心结构 LinearLayout android:idid/main_container android:layout_widthmatch_parent android:layout_height0dp android:layout_weight1 android:orientationvertical / BottomNavigationView android:idid/bottom_nav android:layout_widthmatch_parent android:layout_heightwrap_content app:menumenu/bottom_nav_menu app:labelVisibilityModelabeled /布局上 LinearLayout 的高度用 0dp weight1把剩余空间全部让给 Fragment 容器底部导航栏固定高度。labelVisibilityMode 设为 labeled 表示文字始终显示四个 Tab 都带文字不然默认行为在窄屏上可能只显示图标。BottomNavigationView 自带的切换动画是“缩放平移”拿来做仿目标应用的底部栏手感刚好。// res/menu/bottom_nav_menu.xml menu xmlns:androidhttp://schemas.android.com/apk/res/android item android:idid/nav_chat android:icondrawable/ic_chat android:title会话 / item android:idid/nav_contacts android:icondrawable/ic_contacts android:title通讯录 / item android:idid/nav_discover android:icondrawable/ic_discover android:title发现 / item android:idid/nav_profile android:icondrawable/ic_profile android:title我的 / /menu菜单项顺序就是底部栏从左到右的顺序。icon 用 vector drawable 最稳Android Studio 自带 Vector Asset 工具可以直接导入常用图标不用手动切一套 png。2.2 底部导航栏的实现与切换逻辑MainActivity 里要做的不是 setContentView 完事而是把四个 Fragment 的“首次添加”和“后续切换”分开处理。首次添加时全部 add 进来并隐藏只显示默认的那个后续切换时通过 findFragmentByTag 找出对应实例makeVisible 和 hide 其他三个。这套源码包在 MainActivity 里维护了一个当前 Fragment 的引用切换时先 hide 当前再 show 目标逻辑清晰直接照搬就能用。// MainActivity 中的 Fragment 切换逻辑 private fun switchFragment(target: Fragment, tag: String) { val transaction supportFragmentManager.beginTransaction() // 先隐藏当前显示的 Fragment currentFragment?.let { transaction.hide(it) } val existing supportFragmentManager.findFragmentByTag(tag) if (existing null) { // 第一次切换到该 Fragment需要 add transaction.add(R.id.main_container, target, tag) } else { // 已经 add 过直接 show 即可 transaction.show(existing) } currentFragment existing ?: target transaction.commit() }这里有个细节值得提如果 existing 不为 nullshow 的应该是 existing 而不是 target因为 target 是新 new 出来的实例findFragmentByTag 找到的是之前 add 进去的老实例。很多新手在这里 new 了一个新 Fragment 然后 commit结果每次切换都重建状态照样丢。参数 tag 的作用是让 FragmentManager 能按字符串找回实例所以传 tag 的时候一定要固定比如传 fragment.javaClass.simpleName。提示commit() 是异步提交如果紧接着要立刻操作新 Fragment 里的 View建议改用 commitNow()或者等 onViewCreated 回调里再操作否则偶现空指针。2.3 Fragment 切换防丢状态hide/show 与 add 的顺序这四个 Fragment 里会话列表和朋友圈是最容易暴露问题的地方。用 replace 的写法生命周期会走 onDestroyView列表一旦重建图片加载库要重新拉取内存缓存滚动位置也要靠 savedInstanceState 恢复而 onSaveInstanceState 在 Fragment 切走时不一定每次都触发。源码包统一用 hide/show 就是为了绕开这一整套麻烦。hide/show 的本质是控制 Fragment 的 View 可见性onStop 和 onStart 会被调用但 View 实例不销毁onDestroyView 不执行。实测切四次 Tab 再回会话列表RecyclerView 的 scroll position 还停在原位置。要注意的是 hide 只是隐藏了 Fragment 的 ViewonPause 会回调所以如果 Fragment 里有需要暂停的东西比如播放语音、动画记得在 onPause 里处理。这套逻辑对应到 BottomNavigationView 的监听器里就是根据 itemId 分发到 switchFragment 方法。比用 BottomNavigationView 自带的 setupWithNavController 更直接不用引入 Navigation 组件对聊天这种高度自定义的页面来说手写事务更可控。3. 会话列表与聊天页RecyclerView 数据流与多类型 ViewHolder界面骨架立住之后真正有技术含量的是会话列表和聊天页。这个源码包在列表部分用了 RecyclerView数据模型、Adapter、多类型 ViewHolder 都拆得比较规整照着它的结构改成自己的业务数据很快。3.1 会话列表的 Adapter 结构与数据模型会话列表每个 item 的结构和常见通讯软件一致左侧头像、中间昵称加最后一条消息、右侧时间。数据模型按这个结构定义字段不要偷懒直接塞一堆 String 进 List后面加未读角标、置顶逻辑你就知道数据结构的重要性。// 会话列表数据模型 data class SessionEntity( val id: Long, val avatarRes: Int, val name: String, val lastMessage: String, val timeText: String, val unreadCount: Int 0 )Adapter 这边没有用复杂的 DiffUtil而是继承 RecyclerView.Adapter绑定数据时用 position 取实体。对课设和 Demo 来说数据量几十条notifyDataSetChanged 完全够用DiffUtil 的优势在大量数据异步更新时才明显。但有一个点必须做ViewHolder 的 onCreateViewHolder 里用 LayoutInflater 加载 item 布局onBindViewHolder 里对 unreadCount 做判断为 0 时隐藏角标不为 0 时显示数字。// 会话列表 Adapter 的绑定方法 override fun onBindViewHolder(holder: ViewHolder, position: Int) { val item data[position] holder.nameView.text item.name holder.lastMessageView.text item.lastMessage holder.timeView.text item.timeText if (item.unreadCount 0) { holder.badgeView.visibility View.VISIBLE holder.badgeView.text if (item.unreadCount 99) 99 else item.unreadCount.toString() } else { holder.badgeView.visibility View.GONE } // 头像用图片加载库填充后面会细讲参数 Glide.with(holder.itemView.context) .load(item.avatarRes) .placeholder(R.drawable.ic_avatar_default) .into(holder.avatarView) }注意 unreadCount 的处理逻辑visibility 切换放在 onBindViewHolder 里而不是 ViewHolder 的构造函数里因为 item 会复用不每次都设置 visibility 就会出现越滑越乱的现象。这个点也是后面避坑章节要展开的典型问题。3.2 聊天气泡复用多类型 ViewHolder 的写法与注意点聊天页的 RecyclerView 比会话列表多一层复杂度消息分为自己发的和对方发的布局不同但复用的是同一个 ViewHolder 的回收池。如果不告诉 Adapter 当前 position 是哪一种类型RecyclerView 会拿发送方布局去渲染接收方消息气泡方向全反。// 聊天 Adapter 的多类型支持 override fun getItemViewType(position: Int): Int { return if (data[position].isSelf) { TYPE_SELF // 右侧绿色气泡 } else { TYPE_OTHER // 左侧白色气泡 } } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder { return when (viewType) { TYPE_SELF - SelfViewHolder( LayoutInflater.from(parent.context) .inflate(R.layout.item_chat_self, parent, false) ) else - OtherViewHolder( LayoutInflater.from(parent.context) .inflate(R.layout.item_chat_other, parent, false) ) } }getItemViewType 返回的值决定了 onCreateViewHolder 用哪个布局。这里的魔法数字用常量替代代码可读性强很多。两个 ViewHolder 内部各自绑定自己的控件互不干扰。聊天内容区还嵌套了表情和图片类型的消息image 消息在 ViewHolder 里持有 ImageView 引用绑定数据时也要区分文字和图片两种数据格式我一般会在消息实体里加一个 type 字段做二次区分。多类型列表有个隐藏雷区RecyclerView 的回收池是按 viewType 区分的两个 ViewHolder 类型不同回收池是分开的所以不会串但如果你在 getItemViewType 里不加区分直接返回 0那两类消息就会用同一个布局渲染这是新手最容易忽略的。3.3 软键盘遮挡与消息列表自动滚动聊天页的默认行为是输入框在底部弹出软键盘时输入框要跟着键盘抬起来同时消息列表自动滚到最后一条。这里有两个配置要做AndroidManifest 里给聊天 Activity 设置 windowSoftInputModeRecyclerView 在键盘状态变化后 scrollToPosition。// AndroidManifest.xml 中的聊天页配置 activity android:name.activity.ChatActivity android:windowSoftInputModeadjustResize|stateHidden /adjustResize 的作用是让 Activity 的根布局在软键盘弹出时压缩高度输入框自然被顶上去stateHidden 表示进入页面时不主动弹键盘。两个模式用竖线组合是常见做法。如果用了 adjustPan键盘会直接遮挡输入框而不是把布局顶上去聊天输入会非常难受。// 键盘弹出后滚动到底部 val recyclerView findViewByIdRecyclerView(R.id.rv_chat) recyclerView.addOnLayoutChangeListener { _, _, _, _, bottom, _, _, _, _ - // 当可见高度变化时认为键盘弹出滚动到底部 val lastPosition adapter.itemCount - 1 recyclerView.scrollToPosition(lastPosition) }这段代码在布局变化时直接滚到底部适应键盘弹和收两种情况。不过 addOnLayoutChangeListener 会触发多次Adaper itemCount 变化也会回调建议在滚动前判断 adapter 是否为空。更稳的做法是用 ViewTreeObserver.OnGlobalLayoutListener 监听键盘高度变化但那个回调在每次布局改变时都会触发要注意解注册否则内存泄漏。4. 工程化配置Gradle 版本、主题与图片资源加载源码包拿到手第一件事是看 build.gradle 能不能在本地环境跑起来。配置这块是玄学重灾区版本差一个号就可能编译失败但这份包里的配置思路我觉得值得抄稳定优先不折腾新特性。4.1 版本选择稳定版优先能跑就不折腾这套包默认的 compileSdk 是 34minSdk 26targetSdk 34AGP 8.2.2Gradle 8.4。这几个数字组合起来在 Android Studio 里能直接同步编译不需要额外降级。如果你本地的 AGP 版本不同建议统一用包内的版本而不是迁就本地环境去降级因为降级可能触发一堆依赖 API 兼容问题。// 项目级 build.gradle 关键配置 buildscript { repositories { google() mavenCentral() } dependencies { classpath com.android.tools.build:gradle:8.2.2 } }这里把项目里若干依赖统一收口到 mavenCentral 和 google 仓库不加其他自定义仓库源同步速度快。AGP 8.x 要求 JDK 17Android Studio 自带的 JBR 就是 17不用额外配置但要确认没在 gradle.properties 里乱改 org.gradle.java.home否则会莫名报 Invalid Java version。4.2 主题与样式配置从 AppCompat 到 Material 组件聊天的会话列表和输入框高度依赖 Material 组件所以主题直接继承 MaterialComponents 系列而不是 AppCompat。两者的差异在控件上体现得很明显Material 主题下 Button 自带样式EditText 有悬浮标签BottomNavigationView 也有对应的 Material 风格。// values/themes.xml style nameTheme.ChatProject parentTheme.MaterialComponents.DayNight.NoActionBar item namecolorPrimarycolor/chat_green/item item namecolorPrimaryDarkcolor/chat_green_dark/item item namecolorAccentcolor/chat_green/item item nameandroid:statusBarColorcolor/chat_green_dark/item /stylecolorPrimary 会直接影响 BottomNavigationView 的选中色把主题色定义在 colors.xml 里后面整体换色只改一个文件。NoActionBar 是因为聊天页需要自己控制标题栏带 ActionBar 反而多一套要隐藏的逻辑。statusBarColor 直接写进主题不用在每个 Activity 里 setStatusBarColor省事。4.3 图片加载与列表性能Glide 的占位图和缓存参数图片加载用 Glide版本用的 4.15.1对 RecyclerView 的复用机制支持比较完善。没有用 Coil 的原因很实际Glide 的资料多、出问题好查4.x 版本对 lifecycle 的绑定稳定不会出现图片加载到一半 Fragment 销毁导致的内存泄漏。// Glide 加载头像时的推荐参数 Glide.with(context) .load(imageUrl) .placeholder(R.drawable.ic_avatar_default) .error(R.drawable.ic_avatar_error) .diskCacheStrategy(DiskCacheStrategy.ALL) .skipMemoryCache(false) .override(200, 200) .centerCrop() .into(imageView)placeholder 和 error 分别设置占位图和加载失败图本地资源不会出现裂图。diskCacheStrategy 设为 ALL把原图和转换后的图都缓存到磁盘会话列表频繁滑动时网络请求次数明显下降。override(200, 200) 把头像统一压缩到 200px内存占用比加载原图小很多这个参数在列表型页面是必选项。centerCrop 是头像类图片的标准裁剪方式保证正方形区域被填满不变形。5. 常见问题排查最容易翻车的五个位置这个章节写的都是我实际跑这套包时踩过的坑每一条都出现过“看起来没问题但一运行就出事”的魔幻场景。按现象、原因、解决三步记录后面你复现时遇到同样的问题直接对号入座。5.1 真机一开就白屏主题继承与 Window 背景现象模拟器上预览一切正常装到真机上冷启动先白屏两秒然后才显示界面有的机型直接白屏卡死。原因主题里没有设置 windowBackground冷启动时系统用默认白色背景撑住窗口而 MainActivity 的布局是等 Fragment 挂载完才绘制中间有个空档期低端机上这个空档特别明显。解决在主题里加一个 windowBackground指向启动页的背景资源让它替代默认白屏。style nameTheme.ChatProject parentTheme.MaterialComponents.DayNight.NoActionBar item nameandroid:windowBackgrounddrawable/bg_splash/item /stylebg_splash 画成纯色或带 Logo 的 drawable冷启动瞬间就有画面视觉上感觉启动快了一倍。这只是治标如果布局本身 inflate 慢还是要从根上减少嵌套层级。5.2 点击头像直接崩溃回调接口没判空现象会话列表滚动一切正常点任意一个头像App 闪退Logcat 报空指针指向 MainActivity 的一个回调方法。原因SessionAdapter 里定义了一个 onAvatarClick 回调接口但创建 Adapter 时没有把 MainActivity 传进去或者 MainActivity 在某个生命周期阶段还没有实现回调点击时调用了空引用。解决在 Adapter 的 item 点击监听器里统一做判空接口回调前检查 listener 是否为 null同时把接口实现放到 onStart 之后而不是 onCreate 里。// 头像点击监听的安全写法 itemView.findViewByIdView(R.id.iv_avatar).setOnClickListener { listener?.onAvatarClick(item) // 关键可空调用 }5.3 列表滑动时图片乱跳ViewHolder 复用污染现象会话列表里的头像和未读角标滑动过程中有些 item 的头像变成了上一行的头像角标数量错乱。原因ViewHolder 复用时onBindViewHolder 没有把每个字段都重新赋值。比如图片加载是异步的复用瞬间显示的是上一个 item 的图片等新图加载完成才替换肉眼看到的就是“跳图”。解决绑定数据时先给 ImageView 设置占位图再启动 Glide 加载所有文本字段无条件赋值不要在 if/else 分支里漏掉设值。holder.avatarView.setImageResource(R.drawable.ic_avatar_default) // 先重置 Glide.with(...).load(currentAvatar).into(holder.avatarView)这个“先重置再加载”是列表开发的铁律任何异步加载到复用 View 上的场景都适用。5.4 输入框被软键盘顶出屏幕windowSoftInputMode 配置现象聊天页点击输入框软键盘弹出来输入框看不到了但聊天记录顶部出现一大块空白。原因AndroidManifest 里没加 windowSoftInputMode或者加了 adjustPan。adjustPan 会把整个窗口往上顶RecyclerView 的底部被顶出屏幕输入框跟着出去。解决改成 adjustResize让布局压缩而不是上推。还要确保 RecyclerView 的父布局是 LinearLayout 或 FrameLayout用 ScrollView 当父容器会把压缩逻辑搞乱。5.5 资源重名导致的 R 文件异常现象同步工程后 R 文件报红找不到某个资源 id但 res 目录下文件名明明存在。原因不同目录下有两个同名文件比如 drawable 和 drawable-v24 里都有 ic_chat.xml系统按资源名去重不会报错但你 Clean Project 之后 R 文件重新生成某个引用变成了另一个目录的 id。解决全工程搜索同名资源文件把变体目录-v24、-night 等里非必要资源删掉或改名日常开发统一在 drawable 和 values 下维护一份避免下资源包自带的切分环境踩坑。6. 进阶技巧三个细节把静态界面做出真机手感骨架和逻辑都没问题了再往前走一步怎么让界面看起来“活”的。源码包里有些细节没做我会在二次开发时补上这里给三个提手感的小技巧。第一个是聊天页气泡的入场动画。每个新消息 item 出现时给气泡加一个轻微的缩放和透明度动画视觉反馈会明显像“对方正在输入”。实现方式是在 Adapter 的 onBindViewHolder 里判断 item 是否是新插入的是则用 AnimationUtils.loadAnimation 加载一个 scalealpha 组合的 anim应用到 itemView。val animation AnimationUtils.loadAnimation(context, R.anim.chat_bubble_in) holder.itemView.startAnimation(animation)第二个是列表的预加载。RecyclerView 默认滑到边缘才加载更多聊天场景希望提前一点触发加载。用 recyclerView.addOnScrollListener 监听最后可见 item 的位置当 lastVisibleItemPosition 接近 itemCount - 2 时触发加载更多加载后 insert 到列表尾部。这个判断要在主线程外做数据准备避免直接在 scrollListener 里跑耗时操作卡 UI。第三个是滑动流畅度。getItemViewType 里不要做任何耗时计算把“判断 isSelf”这一步放在数据实体里onCreateViewHolder 里 inflate 的布局尽量控制在三层以内。聊天 item 的外层用 ConstraintLayout 或 FrameLayout不用深嵌套的 LinearLayout否则 item_count 超过五百条时帧率会肉眼可见地下降。setHasFixedSize(true) 在 item 高度不变的情况下加上列表布局直接跳过测量流程。我这套包跑完第一遍后养成的习惯是每改一个布局或调一个参数先在真机上做一次“快速滚动 切 Tab 弹键盘”的三连操作哪个环节掉帧、哪个环节闪图立刻就能看出来。这套源码包的底子不错剩下的是把这些手感细节一点点磨上去。代码这东西跑通只是开始把细节补到位才叫完成希望帮到你。本文还有配套的精品资源点击获取
简介这是一份基于Android Studio的微信界面仿制实战项目面向安卓入门与进阶学习者。项目围绕微信典型界面包含底部导航栏、聊天列表、个人资料页、聊天气泡等模块覆盖约束布局、材料设计组件、自定义视图、列表适配与数据绑定、图片加载、主题配色、动画过渡等知识能帮助读者理顺从新建工程到界面美化的完整流程。资源包为zip格式共1041个文件大小24.25MB内以Java源码、XML布局、PNG/JPG图片、Gradle构建配置为主也包含部分编译生成的DEX/Class/APK文件便于对照工程结构理解安卓项目构建。目前已有3103人学习适合直接导入开发工具边看边练。通过这套资源读者可以获得完整可运行的微信风格界面工程并掌握复杂UI布局、列表数据绑定、图片加载方案及视觉细节调整等实践方法工程中保留的版本控制与更新记录也有助于理解项目迭代过程对希望用仿写项目来提升界面开发能力的人尤其实用。1. 用 Android Studio 复刻聊天应用界面这套源码包把骨架和坑都留好了用 Android Studio 去做一个聊天软件的界面听起来像是课程设计第一天就会定下的题目但真把这份源码包拆开跑起来你会发现难点根本不在那几个 xml 布局文件上。很多人卡在第一步底部导航切来切去 Fragment 状态丢了、列表滑着滑着图片乱跳、一上真机直接白屏。这套资源把主界面、会话列表、聊天页、朋友圈这类带交互的页面骨架搭好了拿到手能直接编译运行改改颜色和图标就能拿去交作业或做 Demo。适合刚把四组件学完、想看看完整工程长什么样的新人也适合赶时间出演示效果的开发者。我按自己的习惯从工程结构到运行细节过了一遍下面把值得抄的写出来。2. 页面骨架底部导航与 Fragment 容器怎么搭任何复杂的界面第一件事都是把骨架立起来。这套源码包采用的是单 Activity 多 Fragment 的结构主界面底部有四个 Tab对应会话、通讯录、发现、我的每个 Tab 内部还要承载二级页面比如会话列表点进去是聊天页、发现里挂着朋友圈入口。这种层级下骨架选型直接决定后面写得顺不顺手。2.1 为什么要用 Fragment 而不是多 Activity新手容易犯的错是把每个 Tab 都做成一个 Activity切换时 startActivity 跳转。这在四个平级入口的情况下能跑但一旦涉及二级页面回退、会话列表状态保持、聊天页传参Activity 方案就非常别扭Intent 传值要序列化回退要维护返回栈页面之间切换还会出现明显的重建过程。源码包这里用的是 Fragment理由很实际——Fragment 的事务机制天然支持“在一个 Activity 内切换页面”FragmentManager 帮你管生命周期和回退栈切换成本比 Activity 小一个量级。另一个关键理由是状态保存。会话列表滑到第 20 条切到通讯录再切回来如果用的是 replace 替换 Fragment列表会重建并滚回顶部。而 add hide/show 的方案能让 Fragment 实例一直活着滚动位置、输入框内容、图片加载状态全都在。这也是这份源码包和普通课程设计最大的区别它没把“切换页面”做成销毁重建而是做成“隐藏/显示”。// activity_main.xml 核心结构 LinearLayout android:idid/main_container android:layout_widthmatch_parent android:layout_height0dp android:layout_weight1 android:orientationvertical / BottomNavigationView android:idid/bottom_nav android:layout_widthmatch_parent android:layout_heightwrap_content app:menumenu/bottom_nav_menu app:labelVisibilityModelabeled /布局上 LinearLayout 的高度用 0dp weight1把剩余空间全部让给 Fragment 容器底部导航栏固定高度。labelVisibilityMode 设为 labeled 表示文字始终显示四个 Tab 都带文字不然默认行为在窄屏上可能只显示图标。BottomNavigationView 自带的切换动画是“缩放平移”拿来做仿目标应用的底部栏手感刚好。// res/menu/bottom_nav_menu.xml menu xmlns:androidhttp://schemas.android.com/apk/res/android item android:idid/nav_chat android:icondrawable/ic_chat android:title会话 / item android:idid/nav_contacts android:icondrawable/ic_contacts android:title通讯录 / item android:idid/nav_discover android:icondrawable/ic_discover android:title发现 / item android:idid/nav_profile android:icondrawable/ic_profile android:title我的 / /menu菜单项顺序就是底部栏从左到右的顺序。icon 用 vector drawable 最稳Android Studio 自带 Vector Asset 工具可以直接导入常用图标不用手动切一套 png。2.2 底部导航栏的实现与切换逻辑MainActivity 里要做的不是 setContentView 完事而是把四个 Fragment 的“首次添加”和“后续切换”分开处理。首次添加时全部 add 进来并隐藏只显示默认的那个后续切换时通过 findFragmentByTag 找出对应实例makeVisible 和 hide 其他三个。这套源码包在 MainActivity 里维护了一个当前 Fragment 的引用切换时先 hide 当前再 show 目标逻辑清晰直接照搬就能用。// MainActivity 中的 Fragment 切换逻辑 private fun switchFragment(target: Fragment, tag: String) { val transaction supportFragmentManager.beginTransaction() // 先隐藏当前显示的 Fragment currentFragment?.let { transaction.hide(it) } val existing supportFragmentManager.findFragmentByTag(tag) if (existing null) { // 第一次切换到该 Fragment需要 add transaction.add(R.id.main_container, target, tag) } else { // 已经 add 过直接 show 即可 transaction.show(existing) } currentFragment existing ?: target transaction.commit() }这里有个细节值得提如果 existing 不为 nullshow 的应该是 existing 而不是 target因为 target 是新 new 出来的实例findFragmentByTag 找到的是之前 add 进去的老实例。很多新手在这里 new 了一个新 Fragment 然后 commit结果每次切换都重建状态照样丢。参数 tag 的作用是让 FragmentManager 能按字符串找回实例所以传 tag 的时候一定要固定比如传 fragment.javaClass.simpleName。提示commit() 是异步提交如果紧接着要立刻操作新 Fragment 里的 View建议改用 commitNow()或者等 onViewCreated 回调里再操作否则偶现空指针。2.3 Fragment 切换防丢状态hide/show 与 add 的顺序这四个 Fragment 里会话列表和朋友圈是最容易暴露问题的地方。用 replace 的写法生命周期会走 onDestroyView列表一旦重建图片加载库要重新拉取内存缓存滚动位置也要靠 savedInstanceState 恢复而 onSaveInstanceState 在 Fragment 切走时不一定每次都触发。源码包统一用 hide/show 就是为了绕开这一整套麻烦。hide/show 的本质是控制 Fragment 的 View 可见性onStop 和 onStart 会被调用但 View 实例不销毁onDestroyView 不执行。实测切四次 Tab 再回会话列表RecyclerView 的 scroll position 还停在原位置。要注意的是 hide 只是隐藏了 Fragment 的 ViewonPause 会回调所以如果 Fragment 里有需要暂停的东西比如播放语音、动画记得在 onPause 里处理。这套逻辑对应到 BottomNavigationView 的监听器里就是根据 itemId 分发到 switchFragment 方法。比用 BottomNavigationView 自带的 setupWithNavController 更直接不用引入 Navigation 组件对聊天这种高度自定义的页面来说手写事务更可控。3. 会话列表与聊天页RecyclerView 数据流与多类型 ViewHolder界面骨架立住之后真正有技术含量的是会话列表和聊天页。这个源码包在列表部分用了 RecyclerView数据模型、Adapter、多类型 ViewHolder 都拆得比较规整照着它的结构改成自己的业务数据很快。3.1 会话列表的 Adapter 结构与数据模型会话列表每个 item 的结构和常见通讯软件一致左侧头像、中间昵称加最后一条消息、右侧时间。数据模型按这个结构定义字段不要偷懒直接塞一堆 String 进 List后面加未读角标、置顶逻辑你就知道数据结构的重要性。// 会话列表数据模型 data class SessionEntity( val id: Long, val avatarRes: Int, val name: String, val lastMessage: String, val timeText: String, val unreadCount: Int 0 )Adapter 这边没有用复杂的 DiffUtil而是继承 RecyclerView.Adapter绑定数据时用 position 取实体。对课设和 Demo 来说数据量几十条notifyDataSetChanged 完全够用DiffUtil 的优势在大量数据异步更新时才明显。但有一个点必须做ViewHolder 的 onCreateViewHolder 里用 LayoutInflater 加载 item 布局onBindViewHolder 里对 unreadCount 做判断为 0 时隐藏角标不为 0 时显示数字。// 会话列表 Adapter 的绑定方法 override fun onBindViewHolder(holder: ViewHolder, position: Int) { val item data[position] holder.nameView.text item.name holder.lastMessageView.text item.lastMessage holder.timeView.text item.timeText if (item.unreadCount 0) { holder.badgeView.visibility View.VISIBLE holder.badgeView.text if (item.unreadCount 99) 99 else item.unreadCount.toString() } else { holder.badgeView.visibility View.GONE } // 头像用图片加载库填充后面会细讲参数 Glide.with(holder.itemView.context) .load(item.avatarRes) .placeholder(R.drawable.ic_avatar_default) .into(holder.avatarView) }注意 unreadCount 的处理逻辑visibility 切换放在 onBindViewHolder 里而不是 ViewHolder 的构造函数里因为 item 会复用不每次都设置 visibility 就会出现越滑越乱的现象。这个点也是后面避坑章节要展开的典型问题。3.2 聊天气泡复用多类型 ViewHolder 的写法与注意点聊天页的 RecyclerView 比会话列表多一层复杂度消息分为自己发的和对方发的布局不同但复用的是同一个 ViewHolder 的回收池。如果不告诉 Adapter 当前 position 是哪一种类型RecyclerView 会拿发送方布局去渲染接收方消息气泡方向全反。// 聊天 Adapter 的多类型支持 override fun getItemViewType(position: Int): Int { return if (data[position].isSelf) { TYPE_SELF // 右侧绿色气泡 } else { TYPE_OTHER // 左侧白色气泡 } } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder { return when (viewType) { TYPE_SELF - SelfViewHolder( LayoutInflater.from(parent.context) .inflate(R.layout.item_chat_self, parent, false) ) else - OtherViewHolder( LayoutInflater.from(parent.context) .inflate(R.layout.item_chat_other, parent, false) ) } }getItemViewType 返回的值决定了 onCreateViewHolder 用哪个布局。这里的魔法数字用常量替代代码可读性强很多。两个 ViewHolder 内部各自绑定自己的控件互不干扰。聊天内容区还嵌套了表情和图片类型的消息image 消息在 ViewHolder 里持有 ImageView 引用绑定数据时也要区分文字和图片两种数据格式我一般会在消息实体里加一个 type 字段做二次区分。多类型列表有个隐藏雷区RecyclerView 的回收池是按 viewType 区分的两个 ViewHolder 类型不同回收池是分开的所以不会串但如果你在 getItemViewType 里不加区分直接返回 0那两类消息就会用同一个布局渲染这是新手最容易忽略的。3.3 软键盘遮挡与消息列表自动滚动聊天页的默认行为是输入框在底部弹出软键盘时输入框要跟着键盘抬起来同时消息列表自动滚到最后一条。这里有两个配置要做AndroidManifest 里给聊天 Activity 设置 windowSoftInputModeRecyclerView 在键盘状态变化后 scrollToPosition。// AndroidManifest.xml 中的聊天页配置 activity android:name.activity.ChatActivity android:windowSoftInputModeadjustResize|stateHidden /adjustResize 的作用是让 Activity 的根布局在软键盘弹出时压缩高度输入框自然被顶上去stateHidden 表示进入页面时不主动弹键盘。两个模式用竖线组合是常见做法。如果用了 adjustPan键盘会直接遮挡输入框而不是把布局顶上去聊天输入会非常难受。// 键盘弹出后滚动到底部 val recyclerView findViewByIdRecyclerView(R.id.rv_chat) recyclerView.addOnLayoutChangeListener { _, _, _, _, bottom, _, _, _, _ - // 当可见高度变化时认为键盘弹出滚动到底部 val lastPosition adapter.itemCount - 1 recyclerView.scrollToPosition(lastPosition) }这段代码在布局变化时直接滚到底部适应键盘弹和收两种情况。不过 addOnLayoutChangeListener 会触发多次Adaper itemCount 变化也会回调建议在滚动前判断 adapter 是否为空。更稳的做法是用 ViewTreeObserver.OnGlobalLayoutListener 监听键盘高度变化但那个回调在每次布局改变时都会触发要注意解注册否则内存泄漏。4. 工程化配置Gradle 版本、主题与图片资源加载源码包拿到手第一件事是看 build.gradle 能不能在本地环境跑起来。配置这块是玄学重灾区版本差一个号就可能编译失败但这份包里的配置思路我觉得值得抄稳定优先不折腾新特性。4.1 版本选择稳定版优先能跑就不折腾这套包默认的 compileSdk 是 34minSdk 26targetSdk 34AGP 8.2.2Gradle 8.4。这几个数字组合起来在 Android Studio 里能直接同步编译不需要额外降级。如果你本地的 AGP 版本不同建议统一用包内的版本而不是迁就本地环境去降级因为降级可能触发一堆依赖 API 兼容问题。// 项目级 build.gradle 关键配置 buildscript { repositories { google() mavenCentral() } dependencies { classpath com.android.tools.build:gradle:8.2.2 } }这里把项目里若干依赖统一收口到 mavenCentral 和 google 仓库不加其他自定义仓库源同步速度快。AGP 8.x 要求 JDK 17Android Studio 自带的 JBR 就是 17不用额外配置但要确认没在 gradle.properties 里乱改 org.gradle.java.home否则会莫名报 Invalid Java version。4.2 主题与样式配置从 AppCompat 到 Material 组件聊天的会话列表和输入框高度依赖 Material 组件所以主题直接继承 MaterialComponents 系列而不是 AppCompat。两者的差异在控件上体现得很明显Material 主题下 Button 自带样式EditText 有悬浮标签BottomNavigationView 也有对应的 Material 风格。// values/themes.xml style nameTheme.ChatProject parentTheme.MaterialComponents.DayNight.NoActionBar item namecolorPrimarycolor/chat_green/item item namecolorPrimaryDarkcolor/chat_green_dark/item item namecolorAccentcolor/chat_green/item item nameandroid:statusBarColorcolor/chat_green_dark/item /stylecolorPrimary 会直接影响 BottomNavigationView 的选中色把主题色定义在 colors.xml 里后面整体换色只改一个文件。NoActionBar 是因为聊天页需要自己控制标题栏带 ActionBar 反而多一套要隐藏的逻辑。statusBarColor 直接写进主题不用在每个 Activity 里 setStatusBarColor省事。4.3 图片加载与列表性能Glide 的占位图和缓存参数图片加载用 Glide版本用的 4.15.1对 RecyclerView 的复用机制支持比较完善。没有用 Coil 的原因很实际Glide 的资料多、出问题好查4.x 版本对 lifecycle 的绑定稳定不会出现图片加载到一半 Fragment 销毁导致的内存泄漏。// Glide 加载头像时的推荐参数 Glide.with(context) .load(imageUrl) .placeholder(R.drawable.ic_avatar_default) .error(R.drawable.ic_avatar_error) .diskCacheStrategy(DiskCacheStrategy.ALL) .skipMemoryCache(false) .override(200, 200) .centerCrop() .into(imageView)placeholder 和 error 分别设置占位图和加载失败图本地资源不会出现裂图。diskCacheStrategy 设为 ALL把原图和转换后的图都缓存到磁盘会话列表频繁滑动时网络请求次数明显下降。override(200, 200) 把头像统一压缩到 200px内存占用比加载原图小很多这个参数在列表型页面是必选项。centerCrop 是头像类图片的标准裁剪方式保证正方形区域被填满不变形。5. 常见问题排查最容易翻车的五个位置这个章节写的都是我实际跑这套包时踩过的坑每一条都出现过“看起来没问题但一运行就出事”的魔幻场景。按现象、原因、解决三步记录后面你复现时遇到同样的问题直接对号入座。5.1 真机一开就白屏主题继承与 Window 背景现象模拟器上预览一切正常装到真机上冷启动先白屏两秒然后才显示界面有的机型直接白屏卡死。原因主题里没有设置 windowBackground冷启动时系统用默认白色背景撑住窗口而 MainActivity 的布局是等 Fragment 挂载完才绘制中间有个空档期低端机上这个空档特别明显。解决在主题里加一个 windowBackground指向启动页的背景资源让它替代默认白屏。style nameTheme.ChatProject parentTheme.MaterialComponents.DayNight.NoActionBar item nameandroid:windowBackgrounddrawable/bg_splash/item /stylebg_splash 画成纯色或带 Logo 的 drawable冷启动瞬间就有画面视觉上感觉启动快了一倍。这只是治标如果布局本身 inflate 慢还是要从根上减少嵌套层级。5.2 点击头像直接崩溃回调接口没判空现象会话列表滚动一切正常点任意一个头像App 闪退Logcat 报空指针指向 MainActivity 的一个回调方法。原因SessionAdapter 里定义了一个 onAvatarClick 回调接口但创建 Adapter 时没有把 MainActivity 传进去或者 MainActivity 在某个生命周期阶段还没有实现回调点击时调用了空引用。解决在 Adapter 的 item 点击监听器里统一做判空接口回调前检查 listener 是否为 null同时把接口实现放到 onStart 之后而不是 onCreate 里。// 头像点击监听的安全写法 itemView.findViewByIdView(R.id.iv_avatar).setOnClickListener { listener?.onAvatarClick(item) // 关键可空调用 }5.3 列表滑动时图片乱跳ViewHolder 复用污染现象会话列表里的头像和未读角标滑动过程中有些 item 的头像变成了上一行的头像角标数量错乱。原因ViewHolder 复用时onBindViewHolder 没有把每个字段都重新赋值。比如图片加载是异步的复用瞬间显示的是上一个 item 的图片等新图加载完成才替换肉眼看到的就是“跳图”。解决绑定数据时先给 ImageView 设置占位图再启动 Glide 加载所有文本字段无条件赋值不要在 if/else 分支里漏掉设值。holder.avatarView.setImageResource(R.drawable.ic_avatar_default) // 先重置 Glide.with(...).load(currentAvatar).into(holder.avatarView)这个“先重置再加载”是列表开发的铁律任何异步加载到复用 View 上的场景都适用。5.4 输入框被软键盘顶出屏幕windowSoftInputMode 配置现象聊天页点击输入框软键盘弹出来输入框看不到了但聊天记录顶部出现一大块空白。原因AndroidManifest 里没加 windowSoftInputMode或者加了 adjustPan。adjustPan 会把整个窗口往上顶RecyclerView 的底部被顶出屏幕输入框跟着出去。解决改成 adjustResize让布局压缩而不是上推。还要确保 RecyclerView 的父布局是 LinearLayout 或 FrameLayout用 ScrollView 当父容器会把压缩逻辑搞乱。5.5 资源重名导致的 R 文件异常现象同步工程后 R 文件报红找不到某个资源 id但 res 目录下文件名明明存在。原因不同目录下有两个同名文件比如 drawable 和 drawable-v24 里都有 ic_chat.xml系统按资源名去重不会报错但你 Clean Project 之后 R 文件重新生成某个引用变成了另一个目录的 id。解决全工程搜索同名资源文件把变体目录-v24、-night 等里非必要资源删掉或改名日常开发统一在 drawable 和 values 下维护一份避免下资源包自带的切分环境踩坑。6. 进阶技巧三个细节把静态界面做出真机手感骨架和逻辑都没问题了再往前走一步怎么让界面看起来“活”的。源码包里有些细节没做我会在二次开发时补上这里给三个提手感的小技巧。第一个是聊天页气泡的入场动画。每个新消息 item 出现时给气泡加一个轻微的缩放和透明度动画视觉反馈会明显像“对方正在输入”。实现方式是在 Adapter 的 onBindViewHolder 里判断 item 是否是新插入的是则用 AnimationUtils.loadAnimation 加载一个 scalealpha 组合的 anim应用到 itemView。val animation AnimationUtils.loadAnimation(context, R.anim.chat_bubble_in) holder.itemView.startAnimation(animation)第二个是列表的预加载。RecyclerView 默认滑到边缘才加载更多聊天场景希望提前一点触发加载。用 recyclerView.addOnScrollListener 监听最后可见 item 的位置当 lastVisibleItemPosition 接近 itemCount - 2 时触发加载更多加载后 insert 到列表尾部。这个判断要在主线程外做数据准备避免直接在 scrollListener 里跑耗时操作卡 UI。第三个是滑动流畅度。getItemViewType 里不要做任何耗时计算把“判断 isSelf”这一步放在数据实体里onCreateViewHolder 里 inflate 的布局尽量控制在三层以内。聊天 item 的外层用 ConstraintLayout 或 FrameLayout不用深嵌套的 LinearLayout否则 item_count 超过五百条时帧率会肉眼可见地下降。setHasFixedSize(true) 在 item 高度不变的情况下加上列表布局直接跳过测量流程。我这套包跑完第一遍后养成的习惯是每改一个布局或调一个参数先在真机上做一次“快速滚动 切 Tab 弹键盘”的三连操作哪个环节掉帧、哪个环节闪图立刻就能看出来。这套源码包的底子不错剩下的是把这些手感细节一点点磨上去。代码这东西跑通只是开始把细节补到位才叫完成希望帮到你。本文还有配套的精品资源点击获取
