【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡

【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡

引言

本次二开布局没有变，但是下一次整体布局会有变，不过本次开发发现朋友圈跳转功能的流程步骤也做了一定的变化。原生项目复杂就复杂于就算一个颜色的改动可能都比较麻烦，不像普通web项目或者vue项目，其次原生项目安卓Android的环境配置是很复杂的，很多人 第一步可以搞一周 甚至一个月都搞不成功，再次之前说了可以用trae辅助我们编程，但是真正的开发和调试还是得Android studio 离开Android studio 原生安卓项目也是没法运行的，至少trae满足不了，vs要满足也比较麻烦，本篇改颜色和主页图标，本项目代码 毫不夸张的说 就是WhatsApp的初期代码，历史大概有15年了。

项目技术栈

优雅草蜻蜓I即时通讯水银版 - 技术栈列表

概述：本项目是一个基于微服务架构的现代即时通讯解决方案。2025年8月进行了大规模技术升级与重构，并于8-9月期间集中进行兼容性调整与Bug修复，旨在提升系统稳定性、可维护性和未来扩展性。

一、 移动客户端 (Android)

• 开发语言: Java
• 开发模式: 原生开发
• 兼容性底座: 最低支持 Android API 5 (Android 5.0)
• 核心框架升级:
  • 项目已从原生的 Android Support 库全面升级到 AndroidX，以获得更好的性能和维护性。
• 推送集成:
  • 集成 极光推送 (JPush) SDK，用于处理应用在后台或进程被杀时的消息离线推送。

二、 服务端 (Backend)

• 核心语言: Java
• 主要框架: Spring Boot
  • 用于构建和编排所有业务逻辑和业务流程，提供RESTful API接口，是连接各个微服务的核心枢纽。
• JDK 版本:
  • 当前版本: JDK 1.8
  • 未来计划: 已有明确计划升级至 JDK 17（因时间安排暂未执行，旨在获得新的语言特性和性能提升）。

三、 微服务与基础设施 (Microservices & Infrastructure)

本次升级的核心是将单体服务拆解为独立、可扩展的微服务。

1. 即时通讯服务:
   • 协议: XMPP (Extensible Messaging and Presence Protocol)
   • 实现: 独立部署的 XMPP 服务，负责最核心的点对点、群组聊天等实时消息分发。
2. 消息回执服务:
   • 实现: Tigase Server 7.1.3
   • 职责: 专门处理消息的已发送、已送达、已阅读等状态回执，确保消息的可达性。
3. 消息队列服务:
   • 组件: RocketMQ 4.3.2 (rocketmq-all-4.3.2)
   • 职责: 处理服务间的异步通信、流量削峰、任务队列等，保证系统的高可用和高性能。
4. 上传服务:
   • 实现: 独立制作的 Upload 服务
   • 职责: 专门处理图片、文件、语音等附件的上传、存储和管理，与主业务逻辑解耦。
5. 推送服务:
   • 实现: 独立制作的 Push 服务
   • 集成: 内部封装了 极光推送 SDK，负责将消息通过系统通道推送给Android客户端。
6. 缓存与队列服务:
   • 组件: Redis
   • 职责: 用作高速缓存，提升访问速度；同时处理临时消息队列和会话状态存储。

四、 数据存储 (Data Storage)

1. 主数据库:
   • 组件: MongoDB
   • 版本升级: 已从旧的 3.4.0 成功升级至 4.0 版本。
   • 用途: 存储非结构化的聊天记录、用户动态、群组信息等海量数据，利用其灵活的Schema特性适应IM业务的快速迭代。
2. 关系型数据库:
   • 可能选项: MySQL8.0 下一步做改进的。
   • 可能用途: 存储用户账户、好友关系、群组列表等结构化数据。

总结与技术亮点

• 架构现代化: 从可能存在的单体架构成功转型为微服务架构，服务间通过 RocketMQ 和 HTTP API 进行通信，解耦彻底。
• 技术债务清理: 积极处理历史技术债务，包括 AndroidX 迁移和 MongoDB 大版本升级，为未来开发铺平道路。
• 专业化分工: 每个核心功能（通讯、上传、推送、回执）都由独立服务承担，职责单一，更易于扩展、部署和故障排查。
• 成熟组件选型: 选用 RocketMQ, Redis, Tigase 等经过大规模实践验证的中间件，保证了系统底层的稳定性和可靠性。
• 明确的发展规划: 已有清晰的 JDK 17 升级计划，显示出团队对技术演进的前瞻性。

详细步骤解析

上一篇我们看了 资源管理器，但是没有把内容列出来，

本项目中的图片静态资源主要存储在以下位置：

1. 1. mipmap系列目录 ：
   • 主要用于存放应用图标和启动相关图标，按不同屏幕分辨率分类
   • 具体位置： g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xxx （包括hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi等）
   • 包含内容：应用功能图标、底部导航栏图标、用户头像图标等多种UI图标资源
2. 2. drawable系列目录 ：
   • 主要用于存放各种界面元素的图片资源，同样按不同屏幕分辨率分类
   • 具体位置： g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable-xxx （包括hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi等）
   • 包含内容：聊天背景图片、表情图片、按钮图标、文件类型图标、视频控制图标等
3. 3. drawable目录 ：
   • 主要用于存放XML格式的drawable资源定义文件
   • 具体位置： g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable
   • 包含内容：形状定义（如圆角矩形、圆形）、状态选择器、渐变背景等XML配置资源

经过检索查看了 资源所在目录，

然后我们目前先来改首页底部的四个图标，我们需要查看这些 图标 到底是代码直接写的 还是用的图片，因为原生的话也有可能直接画的。

其次把UI本页的切图全部拿到先

经过研究查看，四个菜单栏图标是图片实现方式，那就很好办了

底部四个菜单栏图标的实现方式

通过查看代码，我已了解到底部四个菜单栏图标（消息、联系、发现、我的）的实现方式，以下是详细说明：

实现架构

1. 1. 基础布局实现
   • 使用 RadioGroup 和 RadioButton 组件构建底部导航栏
   • 布局文件： layout_main_footbar.xml
   • 包含四个可见的 RadioButton ，分别对应四个菜单项
2. 2. 样式定义
   • 应用 SkMainTabStyle 样式统一控制按钮外观
   • 样式文件： styles.xml
   • 样式设置包括宽度、高度、内边距、背景、文本颜色和大小等属性

图标实现方式

• 答案：是的，四个图标都是使用图片实现的。

具体实现细节：

1. 1. 图片资源引用
   • 每个菜单项图标通过 drawableTop 属性引用对应的 drawable 资源
   • 四个图标分别引用 tab_chat_normal_bg 、 tab_group_normal_bg 、 tab_find_normal_bg 和 tab_my_normal_bg
2. 2. 状态切换机制
   • 每个图标都使用 selector 选择器文件定义不同状态的显示
   • 例如 tab_chat_normal_bg.xml 中定义了两种状态：

<selector 
xmlns:android="http://schemas.
android.com/apk/res/android">
    <item 
    android:drawable="@mipmap/
    tab_chat_new" 
    android:state_checked="true
    " 
    android:state_enabled="true
    " />
    <item 
    android:drawable="@mipmap/
    tab_chat_normal_nor_new"/>
</selector>

1. 3. 图片资源存储
   • 图标图片资源存储在 mipmap 目录下
   • 每个图标有两种状态的图片文件：
     • 选中状态： tab_chat_new.png 、 tab_group_new.png 、 tab_find_new.png 、 tab_my_new.png
     • 未选中状态： tab_chat_normal_nor_new.png 、 tab_group_normal_nor_new.png 、 tab_find_normal_nor_new.png 、 tab_my_normal_nor_new.png

通知指示器

• 每个菜单项旁边都有一个用于显示通知数量的 TextView
• 这些指示器默认是不可见的（ android:visibility=”invisible” ），可以通过代码动态显示和设置数字

实现特点

1. 1. 使用原生组件 ：利用 Android 原生的 RadioGroup 和 RadioButton 实现底部导航栏
2. 2. 图片切换机制 ：通过 selector 实现选中和未选中状态的图标切换
3. 3. 样式统一管理 ：使用 SkMainTabStyle 统一管理所有标签按钮的样式
4. 4. 通知功能支持 ：内置通知数量显示功能 这种实现方式是 Android 应用中常见的底部导航栏实现方案，具有良好的兼容性和易用性。

找到后开始替换，我用一个简单的方法对应命名到新版UI切图复制粘贴 覆盖

未选中的图标图 在另外的页面才有，通讯录页面的切图我们需要也下载下来。

git pull 拉了一些同事给的兼容性调整

重新编译后发现效果已经呈现

不过也有警告

注: G:\clone\2025qingting—android\imagepicker\src\main\java\com\xzh\imagepicker\activity\ImagePreActivity.java使用或覆盖了已过时的 API。 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。

这个只能后面继续处理

现在我们继续替换联系页面的4个图标，这个需要找一下，怎么找呢

搜索联系页面的相关文件，找到包含新朋友、标签、商务号、黑名单按钮的布局文件。

搜索联系页面的布局文件，找到包含这四个按钮的界面定义。

在工作区搜索 ‘contacts|fragment_contacts|activity_contacts’

• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\pop_at_room_member.xml 31 - 31
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\item_recently_contacts.xml 21 - 21
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\item_recently_contacts.xml 29 - 29
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\item_course_contacts.xml 9 - 9
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\item_course_contacts.xml 16 - 16
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\item_course_contacts.xml 21 - 21
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml 263 - 263
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml 264 - 264
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\activity_search_friend.xml 38 - 38
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\activity_person_setting.xml 36 - 36

查看联系页面的主要布局文件，找到包含四个按钮的部分。

skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml 1 - 300

查找这四个按钮引用的图片资源文件的具体路径。

在工作区搜索 ‘icon_xinhaoyou|icon_biaoqian|icon_shangwuhao|icon_heimingdan’

• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\row_sort_gongzhonghao.xml 15 - 15
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\row_sort_friend_qun.xml 24 - 24
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\row_set_label_select.xml 28 - 28
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\row_set_label_select.xml 37 - 37
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\row_select_label.xml 28 - 28
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\row_select_label.xml

通过这里查看到路径了

在“联系”菜单页面上方的四个按钮图片及其路径如下：

1. 1. 新朋友按钮：
   • 图片名称：icon_xinhaoyou.png
   • 路径：g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_xinhaoyou.png
2. 2. 标签按钮：
   • 图片名称：icon_biaoqian.png
   • 路径：g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_biaoqian.png
3. 3. 商务号按钮：
   • 图片名称：icon_shangwuhao.png
   • 路径：g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_shangwuhao.png
4. 4. 黑名单按钮：
   • 图片名称：icon_heimingdan.png
   • 路径：g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_heimingdan.png

像之前 一样替换即可，

找联系页面的这个地方布局稍微有点变动但是改动不是很大

具体操作

另外这个的尺寸不对我们按照设计图

是20pt左右的宽度，我们先下载切图选最小尺寸的。

这个首先我们还是要找出图片地址先替换图片，

搜索消息页面的主布局文件，找到右上角按钮的实现。

在工作区搜索 ‘fragment_message|activity_message|layout_message_main’

找不到结果

搜索消息页面相关的Java实现文件，找到右上角按钮的代码。

在工作区搜索 ‘消息页面 右上角按钮 功能菜单 加好友 扫一扫 收款’

• MessageFragment.java 305 - 328
• AddContactsActivity.java 434 - 448
• InstantMessageConfirmNew.java 31 - 43
• SelectNewContactsActivity.java 39 - 58
• AddFriendActivity.java 167 - 177
• XChatMessageListener.java 1936 - 1950
• AddContactsActivity.java 349 - 360
• SelectContactsActivity.java 670 - 688
• SelectFriendsActivity.java 182 - 212
• BasicInfoActivity.java 1136 - 1160
• ChatActivity.java 516 - 540
• ChatContentView.java 714 - 731
• PaymentReceiptMoneyActivity.java 37 - 54
• SendContactsActivity.java 131 - 144

在工作区搜索 ‘receipt_payment|scanning|add_friends|create_group’

• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rTW\strings.xml 388 - 388
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rTW\strings.xml 389 - 389
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rTW\strings.xml 390 - 390
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rTW\strings.xml 676 - 676
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rTW\strings.xml 1153 - 1153
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rTW\strings.xml 1183 - 1183
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rHK\strings.xml 391 - 391
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rHK\strings.xml 392 - 392
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rHK\strings.xml 393 - 393
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rHK\strings.xml 679 - 679
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rHK\strings.xml 1156 - 1156
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-zh-rHK\strings.xml 1186 - 1186
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-night\strings.xml 365 - 365
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-night\strings.xml 366 - 366
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-night\strings.xml 367 - 367
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-night\strings.xml 658 - 658
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-night\strings.xml 1136 - 1136
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-night\strings.xml 1166 - 1166
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-en\strings.xml 270 - 270
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-en\strings.xml 277 - 277
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-en\strings.xml 278 - 278
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-en\strings.xml 351 - 351
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-en\strings.xml 658 - 658
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-en\strings.xml 1134 - 1134
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values-en\strings.xml 1183 - 1183
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values\strings.xml 369 - 369
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values\strings.xml 370 - 370
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values\strings.xml 371 - 371
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values\strings.xml 662 - 662
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values\strings.xml 1140 - 1140
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values\strings.xml 1170 - 1170
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_square.xml 140 - 140
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\item_sk_pay_receipt.xml 79 - 79
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\item_sk_pay_receipt.xml 84 - 84
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\popu_message.xml 23 - 23
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\popu_message.xml 47 - 47
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\popu_message.xml 65 - 65
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\popu_message.xml 72 - 72
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\popu_message.xml 87 - 87
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\popu_message.xml 105 - 105
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\popu_message.xml 121 - 121
• g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\activity_add_friend.xml 134 - 134

查看消息页面右上角按钮弹出菜单的布局文件，找到四个图标的资源引用。

上面java逻辑要找到如何处理这个，从哪里引用基本上要找到这里

/**
 * 扫描他人付款码，弹起收款界面
 */
public class PaymentReceiptMoneyActivity extends BaseActivity {

    private String money, words;

    private TextView mTransferDescTv, mTransferDescClickTv;
    private String paymentCode;

    private EditText et_transfer;
    private KeyBoad keyBoad;
    private boolean isUiCreat = false;
    private ShouKuan mReceipt;
    private String content = "";

    private UserDefinedCircleImageView mAvatarIv;
    private TextView mNameTv;

skWeiChatBaidu\src\main\res\layout\popu_message.xml 1 - 150

查找这四个图标在mipmap目录中的具体路径。

在工作区搜索 ‘icon_erweima_shoukuan|icon_saoyisao|icon_add_haoyou|icon_chuangjian_qunliao’

查看mipmap-xhdpi目录中这四个图标的具体路径。

2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi

消息页面右上角按钮点击后显示的四个图标的具体路径如下：

1. 1. 收/付款图标：位于 g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_erweima_shoukuan.png
2. 2. 扫一扫图标：位于 g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_saoyisao.png
3. 3. 加好友图标：位于 g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_add_haoyou.png
4. 4. 发起群聊图标：位于 g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_chuangjian_qunliao.png 这些图标在 popu_message.xml 布局文件中通过 @mipmap/ 引用，并在 MessageFragment.java 中由右上角按钮的点击事件触发显示。

替换用小尺寸

我们再次运行看看效果，

效果已经出来了就是布局有限问题