【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 中由右上角按鈕的點擊事件觸發顯示。