【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)

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

即时通讯服务:

协议: XMPP (Extensible Messaging and Presence Protocol)
实现: 独立部署的 XMPP 服务，负责最核心的点对点、群组聊天等实时消息分发。

消息回执服务:

实现: Tigase Server 7.1.3
职责: 专门处理消息的已发送、已送达、已阅读等状态回执，确保消息的可达性。

消息队列服务:

组件: RocketMQ 4.3.2 (rocketmq-all-4.3.2)
职责: 处理服务间的异步通信、流量削峰、任务队列等，保证系统的高可用和高性能。

上传服务:

实现: 独立制作的 Upload 服务
职责: 专门处理图片、文件、语音等附件的上传、存储和管理，与主业务逻辑解耦。

推送服务:

实现: 独立制作的 Push 服务
集成: 内部封装了 极光推送 SDK，负责将消息通过系统通道推送给Android客户端。

缓存与队列服务:

组件: Redis
职责: 用作高速缓存，提升访问速度；同时处理临时消息队列和会话状态存储。

四、数据存储 (Data Storage)

主数据库:

组件: MongoDB
版本升级: 已从旧的 3.4.0 成功升级至 4.0 版本。
用途: 存储非结构化的聊天记录、用户动态、群组信息等海量数据，利用其灵活的Schema特性适应IM业务的快速迭代。

关系型数据库:

可能选项: MySQL8.0 下一步做改进的。
可能用途: 存储用户账户、好友关系、群组列表等结构化数据。

总结与技术亮点

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

详细步骤解析

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

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

主要用于存放应用图标和启动相关图标，按不同屏幕分辨率分类
具体位置： g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xxx （包括hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi等）
包含内容：应用功能图标、底部导航栏图标、用户头像图标等多种UI图标资源

主要用于存放各种界面元素的图片资源，同样按不同屏幕分辨率分类
具体位置： g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable-xxx （包括hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi等）
包含内容：聊天背景图片、表情图片、按钮图标、文件类型图标、视频控制图标等

主要用于存放XML格式的drawable资源定义文件
具体位置： g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable
包含内容：形状定义（如圆角矩形、圆形）、状态选择器、渐变背景等XML配置资源

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

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

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

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

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

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

实现架构

1.
基础布局实现

使用 RadioGroup 和 RadioButton 组件构建底部导航栏
布局文件： layout_main_footbar.xml
包含四个可见的 RadioButton ，分别对应四个菜单项

2.
样式定义

应用 SkMainTabStyle 样式统一控制按钮外观
样式文件： styles.xml
样式设置包括宽度、高度、内边距、背景、文本颜色和大小等属性

图标实现方式

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

具体实现细节：

1.
图片资源引用

每个菜单项图标通过 drawableTop 属性引用对应的 drawable 资源
四个图标分别引用 tab_chat_normal_bg 、 tab_group_normal_bg 、 tab_find_normal_bg 和 tab_my_normal_bg

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>

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.
使用原生组件：利用 Android 原生的 RadioGroup 和 RadioButton 实现底部导航栏
2.
图片切换机制：通过 selector 实现选中和未选中状态的图标切换
3.
样式统一管理：使用 SkMainTabStyle 统一管理所有标签按钮的样式
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.
新朋友按钮：

图片名称：icon_xinhaoyou.png
路径：g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_xinhaoyou.png

2.
标签按钮：

图片名称：icon_biaoqian.png
路径：g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_biaoqian.png

3.
商务号按钮：

图片名称：icon_shangwuhao.png
路径：g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_shangwuhao.png

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

替换用小尺寸

我们再次运行看看效果，

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

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

引言

项目技术栈

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

一、移动客户端 (Android)

二、服务端 (Backend)

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

四、数据存储 (Data Storage)

总结与技术亮点

详细步骤解析

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

实现架构

图标实现方式

通知指示器

实现特点

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

引言

项目技术栈

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

一、 移动客户端 (Android)

二、 服务端 (Backend)

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

四、 数据存储 (Data Storage)

总结与技术亮点

详细步骤解析

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

实现架构

图标实现方式

通知指示器

实现特点

热门文章

最新文章

相关电子书

一、移动客户端 (Android)

二、服务端 (Backend)

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

四、数据存储 (Data Storage)