【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 服务，负责最核心的点对点、群组聊天等实时消息分发。
  1. 消息回执服务:
    • 实现: Tigase Server 7.1.3
    • 职责: 专门处理消息的已发送、已送达、已阅读等状态回执，确保消息的可达性。
  1. 消息队列服务:
    • 组件: RocketMQ 4.3.2 (rocketmq-all-4.3.2)
    • 职责: 处理服务间的异步通信、流量削峰、任务队列等，保证系统的高可用和高性能。
  1. 上传服务:
    • 实现: 独立制作的 Upload 服务
    • 职责: 专门处理图片、文件、语音等附件的上传、存储和管理，与主业务逻辑解耦。
  1. 推送服务:
    • 实现: 独立制作的 Push 服务
    • 集成: 内部封装了 极光推送 SDK，负责将消息通过系统通道推送给Android客户端。
  1. 缓存与队列服务:
    • 组件: Redis
    • 职责: 用作高速缓存，提升访问速度；同时处理临时消息队列和会话状态存储。
四、 数据存储 (Data Storage)
  1. 主数据库:
    • 组件: MongoDB
    • 版本升级: 已从旧的 3.4.0 成功升级至 4.0 版本。
    • 用途: 存储非结构化的聊天记录、用户动态、群组信息等海量数据，利用其灵活的Schema特性适应IM业务的快速迭代。
  1. 关系型数据库:
    • 可能选项: 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图标资源
  1. 2.
    drawable系列目录 ：
    • 主要用于存放各种界面元素的图片资源，同样按不同屏幕分辨率分类
    • 具体位置： g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable-xxx （包括hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi等）
    • 包含内容：聊天背景图片、表情图片、按钮图标、文件类型图标、视频控制图标等
  1. 3.
    drawable目录 ：
    • 主要用于存放XML格式的drawable资源定义文件
    • 具体位置： g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable
    • 包含内容：形状定义（如圆角矩形、圆形）、状态选择器、渐变背景等XML配置资源

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

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

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

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

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

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

实现架构

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

图标实现方式

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

具体实现细节：

  1. 1.
    图片资源引用
    • 每个菜单项图标通过 drawableTop 属性引用对应的 drawable 资源
    • 四个图标分别引用 tab_chat_normal_bg 、 tab_group_normal_bg 、 tab_find_normal_bg 和 tab_my_normal_bg
  1. 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
  1. 2.
    标签按钮：
    • 图片名称：icon_biaoqian.png
    • 路径：g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_biaoqian.png
  1. 3.
    商务号按钮：
    • 图片名称：icon_shangwuhao.png
    • 路径：g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi\icon_shangwuhao.png
  1. 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 中由右上角按钮的点击事件触发显示。

替换用小尺寸

我们再次运行看看效果，

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

# 开源 # android-studio
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

光伏储能虚拟同步发电机并网仿真模型附Simulink仿真

随着光伏发电规模的不断扩大，其间歇性和波动性对电网稳定性的影响愈发显著。光伏储能虚拟同步发电机（Photovoltaic Energy Storage Virtual Synchronous Generator，PV-ES-VSG）技术通过模拟同步发电机的特性，为提升光伏发电并网稳定性提供了有效途径。构建准确的并网仿真模型，有助于深入研究该技术在不同工况下的运行特性，优化控制策略，保障电网安全稳定

avatar 2048 AI社区

惊爆内幕！提示工程架构师解读 Agentic AI 在金融科技潜力

Agentic AI到底是什么？（不是更聪明的ChatGPT，而是“有行动力的智能体”）它能帮金融科技解决什么？（效率低、风险漏、个性化差——这些普通AI搞不定的痛点）范围覆盖：银行、证券、基金、保险四大金融场景，用“故事+代码+案例”讲透Agentic AI的落地逻辑。故事引入：用“银行小助理的3代进化”让你秒懂Agentic AI；核心原理：拆解Agentic AI的“5大器官”（目标、计划、

avatar 2048 AI社区

comfyUI实战——使用openArt的工作流

想要由一张照片生成简笔画，要不是使用醒图之类的工具手动描边，也试了豆包等ai去处理，但是结果还是不如人意。小红书发现有好心人bole分享了他搭建的。可以认为模块是一些python脚本，可以使用Manager安装，模型是别人训练好的模型，一般在huggingface网站可以找到。在运行工作流时，有问题的位置会以红色框显示，也可以在左边菜单栏点击终端看代码到底是哪里报错的。

avatar 2048 AI社区