【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
本次二开布局没有变,但是下一次整体布局会有变,不过本次开发发现朋友圈跳转功能的流程步骤也做了一定的变化。原生项目复杂就复杂于就算一个颜色的改动可能都比较麻烦,不像普通web项目或者vue项目,其次原生项目安卓Android的环境配置是很复杂的,很多人 第一步可以搞一周 甚至一个月都搞不成功,再次之前说了可以用trae辅助我们编程,但是真正的开发和调试还是得Android studio 离开Android studio 原生安卓项目也是没法运行的,至少trae满足不了,vs要满足也比较麻烦,本篇改颜色和主页图标,本项目代码 毫不夸张的说 就是WhatsApp的初期代码,历史大概有15年了。
本篇【06】完成就是第一次不改布局情况的UI设计改版完成。
概述:本项目是一个基于微服务架构的现代即时通讯解决方案。2025年8月进行了大规模技术升级与重构,并于8-9月期间集中进行兼容性调整与Bug修复,旨在提升系统稳定性、可维护性和未来扩展性。
本次升级的核心是将单体服务拆解为独立、可扩展的微服务。
在蓝湖我们看到 这部分 背景
由于这部分要原生实现 ,因此也看了确实在切图里面没有背景图
这个蓝湖对应的 Android代码 为
<item android:width="375dp" android:height="129dp"> <shape android:shape="rectangle"> <solid android:color="#0ffffff" /> </shape> </item>
但是其实这个色是透明色,所以要实现这个效果还比较麻烦,稍微。
但是我们要加到全局页面也不是一件容易的事情,有些页面是不能改的,比如注册登陆等
搜索主体界面相关的布局文件,特别是顶部区域的布局。
toolName: search_codebase
status: success
query: 主体界面 顶部布局 背景
查看activity_main.xml文件的完整内容,了解主体界面的布局结构。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\activity_main.xml
查看layout_main_footbar.xml文件的内容,了解底部导航栏的结构,同时也能更好地理解整体布局。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\layout_main_footbar.xml
搜索联系人页面相关的布局文件,以了解顶部区域的结构并准备添加红色背景。
toolName: search_by_regex
status: success
query: lianxi|contacts|fragment_contacts
查看fragment_contacts.xml文件的内容,了解联系人页面的布局结构,特别是顶部区域。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml
查看activity_main.xml文件的完整内容,了解主体界面的整体布局结构,特别是顶部区域。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\activity_main.xml
创建一个红色背景的shape drawable资源,用于在主体界面顶部添加红色背景。
toolName: write_to_file
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable\bg_red_header.xml
content: <?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#FF4444" /> <corners android:bottomLeftRadius="16dp" android:bottomRightRadius="16dp" /> </shape>
修改fragment_contacts.xml文件,在顶部添加创建的红色背景图。
toolName: edit_file_update
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml
changes:
newStr: <?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" android:orientation="vertical"> <View android:layout_width="match_parent" android:layout_height="129dp" android:background="@drawable/bg_red_header" /> <View android:layout_width="match_parent" android:layout_height="-129dp" /> oldStr: <?xml version=”1.0” encoding=”utf-8”?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" android:orientation="vertical"> 查看修改后的fragment_contacts.xml文件,确保红色背景图正确添加并检查布局是否合理。 toolName: view_files status: success filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml 修复fragment_contacts.xml中的布局问题,移除负高度的View,并调整整体布局结构以确保内容正确显示在红色背景下方。 toolName: edit_file_update status: success filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml changes: newStr: <?xml version=”1.0” encoding=”utf-8”?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white"> <View android:id="@+id/red_header" android:layout_width="match_parent" android:layout_height="129dp" android:background="@drawable/bg_red_header" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:orientation="vertical" /> oldStr: <?xml version=”1.0” encoding=”utf-8”?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" android:orientation="vertical"> <View android:layout_width="match_parent" android:layout_height="129dp" android:background="@drawable/bg_red_header" /> <View android:layout_width="match_parent" android:layout_height="-129dp" /> newStr: </RelativeLayout> oldStr: </LinearLayout>
修复fragment_contacts.xml的布局结构,确保内容容器正确放置在红色背景下方,并且保留原有布局内容。
toolName: edit_file_update
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml
changes:
newStr: <?xml version=”1.0” encoding=”utf-8”?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white"> <View android:id="@+id/red_header" android:layout_width="match_parent" android:layout_height="129dp" android:background="@drawable/bg_red_header" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/red_header" android:background="@color/white" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="12dp" android:layout_marginRight="12dp" android:orientation="horizontal" android:visibility="visible"> <LinearLayout android:id="@+id/ll_sousuo" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="7dp" android:layout_marginTop="7dp" android:background="@drawable/shape_gray_3" android:gravity="center_vertical|left" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="14dp" android:layout_marginRight="8dp" android:src="@drawable/search" /> <TextView android:id="@+id/search_edit" android:layout_width="wrap_content" android:layout_height="35dp" android:gravity="center_vertical" android:hint="@string/search" android:paddingStart="9dp" android:textColor="@color/dark_grey" android:textColorHint="@color/grey" android:textSize="@dimen/message_search_size" tools:ignore="RtlSymmetry" /> </LinearLayout> oldStr: <?xml version=”1.0” encoding=”utf-8”?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white"> <View android:id="@+id/red_header" android:layout_width="match_parent" android:layout_height="129dp" android:background="@drawable/bg_red_header" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:orientation="vertical" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="12dp" android:layout_marginRight="12dp" android:orientation="horizontal" android:visibility="visible"> <LinearLayout android:id="@+id/ll_sousuo" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="7dp" android:layout_marginTop="7dp" android:background="@drawable/shape_gray_3" android:gravity="center_vertical|left" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="14dp" android:layout_marginRight="8dp" android:src="@drawable/search" /> <TextView android:id="@+id/search_edit" android:layout_width="wrap_content" android:layout_height="35dp" android:gravity="center_vertical" android:hint="@string/search" android:paddingStart="9dp" android:textColor="@color/dark_grey" android:textColorHint="@color/grey" android:textSize="@dimen/message_search_size" tools:ignore="RtlSymmetry" /> </RelativeLayout>
查看修改后的fragment_contacts.xml文件末尾部分,确保RelativeLayout正确闭合,并且所有嵌套布局都正确。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml
修复fragment_contacts.xml文件末尾的闭合标签,将错误的</LinearLayout>改为</RelativeLayout>,确保XML结构正确。
toolName: edit_file_update
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml
changes:
newStr: </LinearLayout>
</RelativeLayout>
oldStr: </LinearLayout>
</LinearLayout>
已成功在主体界面(联系人页面)顶部添加了红色背景图。具体完成的工作包括:
bg_red_header.xml
,定义了一个高129dp的矩形背景,填充色为红色(#FF4444),并添加了底部圆角效果。fragment_contacts.xml
布局文件:red_header
这些修改实现了在主体界面顶部添加略微红色背景的需求,使界面视觉效果更加丰富。
改完后,重新运行直接报错
A failure occurred while executing com.android.build.gradle.internal.res.ResourceCompilerRunnable Resource compilation failed (Failed to compile resource file: G:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_contacts.xml: . Cause: javax.xml.stream.XMLStreamException: ParseError at [row,col]:[304,3] Message: 元素类型 “LinearLayout” 必须由匹配的结束标记 “</LinearLayout>“ 终止。). Check logs for more details.
提示304行没有结束标记

修复fragment_contacts.xml文件中未闭合的ImageView标签。
但是还是报错很多,然后这个方法 暂时就不要用了,因为还是得让设计切一张背景图片来比较好,不然很容易做出问题。
现在我们需要调整业务逻辑,也就是修改发现页面跳转
发现页面
心情广场,我们需要做到的是从发现页面按钮直接点击跳转到心情广场。
我需要了解当前底部导航栏的实现和发现页面的跳转逻辑,首先搜索相关代码。
toolName: search_codebase
status: success
query: 底部导航栏 发现按钮 点击事件 跳转
搜索结果没有直接显示底部导航栏的实现和发现页面的跳转逻辑,我需要更精确地搜索与底部导航栏相关的类或文件。
toolName: search_by_regex
status: success
query: bottomnavigation|bottom_bar|底部导航栏
搜索结果没有直接显示底部导航栏的实现类,我需要搜索与”发现”页面相关的类,找到导航逻辑。
toolName: search_codebase
status: success
query: 发现页面 心情广场 跳转
搜索结果显示有DiscoverFragment.java文件,这应该是发现页面的实现类。我需要查看这个文件来了解发现页面的结构和心情广场按钮的点击跳转逻辑。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\fragment\DiscoverFragment.java
从代码注释看,这个DiscoverFragment似乎是朋友圈的实现,而不是发现页面。我需要查看剩余部分并搜索其他相关文件来找到真正的发现页面和底部导航栏实现。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\fragment\DiscoverFragment.java
文件大小超过了限制,我需要分段查看剩余内容。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\fragment\DiscoverFragment.java
继续查看DiscoverFragment.java的剩余部分,了解其完整功能,然后搜索底部导航栏的实现。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\fragment\DiscoverFragment.java
搜索包含底部导航栏实现的主要Activity文件,特别是MainActivity或类似的文件。
toolName: search_codebase
status: success
query: MainActivity 底部导航栏 发现
查看MainActivity.java中更多内容,特别是Fragment切换和底部导航栏点击事件处理的代码。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\ui\MainActivity.java
查看MainActivity.java中更多关于Fragment切换的代码和查看FaXianFragment的内容,以了解发现页面的实现。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\ui\MainActivity.java g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\fragment\FaXianFragment.java
查看MainActivity.java中关于底部导航栏点击事件处理的完整代码,以便进行修改。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\ui\MainActivity.java
修改MainActivity.java中的changeFragment方法,使点击底部导航栏第三个按钮(发现)时直接跳转到心情广场Activity,而不是加载FaXianFragment。
toolName: edit_file_update
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\ui\MainActivity.java
changes:
newStr: /**
* 切换Fragment
*/
private void changeFragment(int checkedId) {
if (mLastFragmentId == checkedId) {
return;
}
// 特殊处理:点击发现按钮直接跳转到心情广场页面
if (checkedId == R.id.rb_tab_3) {
startActivity(new Intent(this, com.guantaoyunxin.app.ui.life.LifeCircleActivity.class));
// 取消选中状态,否则再次点击时不会触发事件
mRadioGroup.clearCheck();
mLastFragmentId = -1;
return;
}
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
Fragment fragment = getSupportFragmentManager().findFragmentByTag(String.valueOf(checkedId));
if (fragment == null) {
switch (checkedId) {
case R.id.rb_tab_1:
fragment = new MessageFragment();
break;
case R.id.rb_tab_2:
fragment = new NewFriendFragment();
// NewFriendFragment friendFragment = (NewFriendFragment) fragment.getChildFragmentManager().getFragments(); // friendFragment.setFirst(); //调用子Fragment UsingFragment中的initData2() break; case R.id.rb_tab_3: fragment = new FaXianFragment(); break; case R.id.rb_tab_4: fragment = new MeFragment(); break; case R.id.rb_tab_5: fragment = new H5Fragment(); break; } }
// fragment = null;
assert fragment != null;
if (!fragment.isAdded()) {// 未添加 add
transaction.add(R.id.main_content, fragment, String.valueOf(checkedId));
}
Fragment lastFragment = getSupportFragmentManager().findFragmentByTag(String.valueOf(mLastFragmentId));
if (lastFragment != null) {
transaction.hide(lastFragment);
}
// 以防万一出现last和current都是同一个fragment的情况,先hide再show,
transaction.show(fragment);
// if (checkedId == R.id.rb_tab_1) { // MessageFragment messageFragment = (MessageFragment) fragment; // messageFragment.setFirst(); // } else if (checkedId == R.id.rb_tab_2) { // NewFriendFragment newFriendFragment = (NewFriendFragment) fragment; // newFriendFragment.setFirst(); // }
transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);// 添加动画
transaction.commitNowAllowingStateLoss();
mLastFragmentId = checkedId;
}
oldStr: /**
* 切换Fragment
*/
private void changeFragment(int checkedId) {
if (mLastFragmentId == checkedId) {
return;
}
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
Fragment fragment = getSupportFragmentManager().findFragmentByTag(String.valueOf(checkedId));
if (fragment == null) {
switch (checkedId) {
case R.id.rb_tab_1:
fragment = new MessageFragment();
break;
case R.id.rb_tab_2:
fragment = new NewFriendFragment();
// NewFriendFragment friendFragment = (NewFriendFragment) fragment.getChildFragmentManager().getFragments(); // friendFragment.setFirst(); //调用子Fragment UsingFragment中的initData2() break; case R.id.rb_tab_3: fragment = new FaXianFragment(); break; case R.id.rb_tab_4: fragment = new MeFragment(); break; case R.id.rb_tab_5: fragment = new H5Fragment(); break; } }
// fragment = null;
assert fragment != null;
if (!fragment.isAdded()) {// 未添加 add
transaction.add(R.id.main_content, fragment, String.valueOf(checkedId));
}
Fragment lastFragment = getSupportFragmentManager().findFragmentByTag(String.valueOf(mLastFragmentId));
if (lastFragment != null) {
transaction.hide(lastFragment);
}
// 以防万一出现last和current都是同一个fragment的情况,先hide再show,
transaction.show(fragment);
// if (checkedId == R.id.rb_tab_1) { // MessageFragment messageFragment = (MessageFragment) fragment; // messageFragment.setFirst(); // } else if (checkedId == R.id.rb_tab_2) { // NewFriendFragment newFriendFragment = (NewFriendFragment) fragment; // newFriendFragment.setFirst(); // }
transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);// 添加动画
transaction.commitNowAllowingStateLoss();
mLastFragmentId = checkedId;
}
运行编译命令,验证代码修改是否正确,确保没有编译错误。
toolName: run_command
status: success
command: .\gradlew assembleDebug —stacktrace
已成功实现点击底部导航栏”发现”按钮直接跳转到心情广场页面的功能。
修改详情:
changeFragment()
方法R.id.rb_tab_3
)时:LifeCircleActivity
(心情广场页面)mLastFragmentId
设为 -1此修改完全满足了需求,用户点击底部导航栏”发现”按钮时,不再进入中间的发现页面,而是直接进入心情广场页面,简化了用户操作流程。

经过测试完全没问题
最后两部分的图标修改,
添加朋友页面的 几项图标和 我的页面 几项选项的左侧图标
还有聊天页面点击更多功能显示出来的需要使用的功能
搜索联系人页面和添加好友功能相关的代码文件。
toolName: search_codebase
status: success
query: 联系人页面 添加好友 二维码 扫一扫 手机通讯录 图标
查看添加好友页面相关文件的完整内容。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\java\com\guantaoyunxin\app\ui\nearby\AddFriendActivity.java g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\popu_message.xml
查看添加好友页面的布局文件activity_add_friend.xml。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\activity_add_friend.xml
我已在联系页面点击右上角添加好友弹出的页面中找到了所有需要的图标路径:
@mipmap/icon_erweima_blue
@mipmap/icon_add_saoyisao
@mipmap/icon_shouji
@mipmap/icon_yaoqing_tongxunlu
这些图标都通过 mipmap 资源文件夹引用,可以在项目的 res/mipmap 目录下找到对应的图片文件。
我们直接去替换即可,最重要是找出来
然后现在进入我的页面
我需要搜索项目中与’我的收藏’、’隐私管理’、’安全中心’、’深色模式’和’设置’相关的图标引用,先使用search_codebase工具查找相关代码。
toolName: search_codebase
status: success
query: 我的收藏 隐私管理 安全中心 深色模式 设置 图标
我需要进一步搜索”我的收藏”、”设置”相关的图标引用,同时查看与设置页面相关的布局文件。
toolName: search_codebase
status: success
query: 我的收藏 设置 图标 布局
我已经发现了”我的收藏”的图标引用在fragment_me.xml中,但需要查看完整的”我的”页面布局文件以及查找其他所需图标的引用。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_me.xml
文件太大,我需要分部分查看fragment_me.xml文件,先查看前200行,重点关注所需图标的引用。

toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_me.xml
继续查看fragment_me.xml文件的后续部分,寻找所有需要的图标引用。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_me.xml
继续查看fragment_me.xml文件的剩余部分,寻找所有需要的图标引用。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\fragment_me.xml
我已经找到了所有需要的图标引用,接下来需要查找这些图标的实际文件路径和文件名。首先查看drawable目录下的文件。
toolName: view_folder
status: success
g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable
我需要查看drawable-xxhdpi目录和mipmap目录,寻找所有需要的图标文件。
toolName: view_folder
status: success
g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable-xxhdpi
现在查看mipmap-xhdpi目录,寻找所有需要的图标文件。
toolName: view_folder
status: success
g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\mipmap-xhdpi
在我的页面中,以下是您需要的图标的详细文件名和路径:
所有图标均位于mipmap-xhdpi资源目录下。
完成修改重新编译效果如下:
图标完成了,不过发现改出来了一个bug,点击其他页面返回消息页面顶部文字会重影,这肯定是有点问题的 所以下篇继续讲解。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。