【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
引言
本次二开布局没有变，但是下一次整体布局会有变，不过本次开发发现朋友圈跳转功能的流程步骤也做了一定的变化。原生项目复杂就复杂于就算一个颜色的改动可能都比较麻烦，不像普通web项目或者vue项目，其次原生项目安卓Android的环境配置是很复杂的，很多人 第一步可以搞一周 甚至一个月都搞不成功，再次之前说了可以用trae辅助我们编程，但是真正的开发和调试还是得Android studio 离开Android studio 原生安卓项目也是没法运行的，至少trae满足不了，vs要满足也比较麻烦，本篇改颜色和主页图标，本项目代码 毫不夸张的说 就是WhatsApp的初期代码，历史大概有15年了。
本篇【05】有一定的布局调整，按道理是UI没理解意思，毕竟第一次设计的版是预算不够的设计版，是不改布局的情况下的。
项目技术栈
优雅草蜻蜓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 升级计划，显示出团队对技术演进的前瞻性。
详细步骤解析
消息页面这几个选项目前是
前端布局：媒体对象（Media Object）布局
这种布局在前端开发中被称为媒体对象（Media Object）布局，由Nicole Sullivan在2010年提出。它是一种常见且实用的模式，特别适合展示图文内容列表。
这个布局知识可以单独去搜索相关前端知识，
我们需要看到目前的布局
查看popu_message.xml文件的内容，了解当前四个图标的布局结构，以便进行媒体对象布局的调整。
skWeiChatBaidu\src\main\res\layout\popu_message.xml 1 - 200
将popu_message.xml文件中的四个图标按钮从当前的混合布局调整为媒体对象（Media Object）布局，实现左侧图标、右侧文字的垂直排列，共4行且保持等高度。
已成功调整消息页面右上角按钮点击后显示的四个图标按钮的布局，将其修改为媒体对象（Media Object）布局。具体修改如下：
- 1.
将原来混合的水平和垂直布局重构为垂直排列的四行布局 - 2.
每行按钮采用水平线性布局，实现左侧图标、右侧文字的媒体对象样式 - 3.
为每个按钮设置了相同的高度（60dp），确保等高度显示 - 4.
调整了内边距和间距，优化了整体视觉效果 - 5.
按用户要求排序为：第一行收付款、第二行扫一扫、第三行加好友、第四行发起群聊
修改文件： g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\popu_message.xml
修改后的代码为
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="12dp" android:background="@drawable/rect_white" android:orientation="vertical"> <!-- 第一行：收付款 --> <LinearLayout android:id="@+id/receipt_payment" android:layout_width="wrap_content" android:layout_height="60dp" android:gravity="center_vertical" android:orientation="horizontal" android:paddingLeft="25dp" android:paddingRight="25dp" android:paddingTop="10dp" android:visibility="visible"> <androidx.appcompat.widget.AppCompatImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/icon_erweima_shoukuan" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:text="@string/hint570" android:textColor="@color/color_33" android:textSize="@dimen/sp_12_text_size" /> </LinearLayout> <!-- 第二行：扫一扫 --> <LinearLayout android:id="@+id/scanning" android:layout_width="wrap_content" android:layout_height="60dp" android:gravity="center_vertical" android:orientation="horizontal" android:paddingLeft="25dp" android:paddingRight="25dp"> <androidx.appcompat.widget.AppCompatImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/icon_saoyisao" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:text="@string/scanning" android:textColor="@color/color_33" android:textSize="@dimen/sp_12_text_size" /> </LinearLayout> <!-- 第三行：加好友 --> <LinearLayout android:id="@+id/add_friends" android:layout_width="wrap_content" android:layout_height="60dp" android:gravity="center_vertical" android:orientation="horizontal" android:paddingLeft="25dp" android:paddingRight="25dp"> <androidx.appcompat.widget.AppCompatImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/icon_add_haoyou" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:text="@string/add_friends" android:textColor="@color/color_33" android:textSize="@dimen/sp_12_text_size" /> </LinearLayout> <!-- 第四行：发起群聊 --> <LinearLayout android:id="@+id/create_group" android:layout_width="wrap_content" android:layout_height="60dp" android:gravity="center_vertical" android:orientation="horizontal" android:paddingBottom="10dp" android:paddingLeft="25dp" android:paddingRight="25dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/icon_chuangjian_qunliao" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:text="@string/create_group" android:textColor="@color/color_33" android:textSize="@dimen/sp_12_text_size" /> </LinearLayout> </LinearLayout> </LinearLayout>
这是一个Android的布局文件，定义了一个垂直方向的菜单界面
布局结构分析
1. 根布局
- 使用
LinearLayout作为根容器 - 设置为垂直方向排列 (
android:orientation="vertical") - 宽高设置为
wrap_content，即根据内容自适应大小
2. 主容器
- 内层
LinearLayout作为主要内容区域 - 设置了右边距 (
android:layout_marginEnd="12dp") - 使用白色矩形背景 (
android:background="@drawable/rect_white")
3. 四个功能项
收付款功能 (receipt_payment)
- 高度固定为60dp
- 包含图标和文字标签
- 使用
@mipmap/icon_erweima_shoukuan二维码收款图标 - 文字内容来自
@string/hint570字符串资源
扫一扫功能 (scanning)
- 结构与收付款类似
- 使用扫描图标
@mipmap/icon_saoyisao - 文字内容来自
@string/scanning字符串资源
加好友功能 (add_friends)
- 使用添加好友图标
@mipmap/icon_add_haoyou - 文字内容来自
@string/add_friends字符串资源
发起群聊功能 (create_group)
- 底部元素，增加了底部内边距
- 使用创建群聊图标
@mipmap/icon_chuangjian_qunliao - 文字内容来自
@string/create_group字符串资源
设计特点
- 统一风格：每个功能项都有相同的高度和内边距，保持视觉一致性
- 图标+文字：采用标准的菜单项设计模式
- 可点击区域：每个
LinearLayout都设置了ID，便于在代码中绑定点击事件 - 响应式布局：使用
wrap_content使布局能自适应不同屏幕尺寸
这是一个典型的功能菜单布局，常见于聊天应用的快捷操作面板。
非常的完美，这个布局做到了应该需要的效果。
接下来修改按钮样式，这个也是比较特殊的一个修改
看起来很简单，其实差距还很大，
一个是有箭头号一个是没有。
搜索创建群聊页面的布局文件，以便找到需要修改的圆形按钮。
toolName: search_by_regex
status: success
query: activity_create_group|create_group_layout|layout_create_group
尝试使用更广泛的搜索词查找创建群聊页面的布局文件。
toolName: search_by_regex
status: success
query: create.group|group.create
搜索创建群聊页面的Java类文件，以便找到对应的布局文件引用。
toolName: search_codebase
status: success
query: 创建群聊 Activity Fragment
搜索与创建群组相关的字符串资源，以便找到对应的布局文件。
toolName: search_by_regex
status: success
query: 创建群组|群名称|群头像|立即创建
搜索创建群组相关的字符串资源ID在布局文件中的引用，以找到对应的页面布局。
toolName: search_by_regex
status: success
query: hint668|hint669|hint672|hint61
找到了activitity_cj_qunzu.xml文件，其中引用了创建群组相关的所有字符串资源。现在查看这个文件内容，确认并准备修改立即创建按钮的样式。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\activitity_cj_qunzu.xml
查看activitity_cj_qunzu.xml文件的完整内容，以确保理解整个布局结构，为修改立即创建按钮为圆形做准备。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\activitity_cj_qunzu.xml
查看BossGreenBtn样式的定义，了解当前立即创建按钮的样式属性，为修改为圆形按钮做准备。
toolName: search_by_regex
status: success
query: BossGreenBtn
查看values/styles.xml文件中BossGreenBtn样式的具体定义，了解当前按钮的样式属性，为修改为圆形按钮做准备。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values\styles.xml
查看当前按钮使用的背景drawable资源bg_btn_green_splash的定义，了解其样式属性，为创建圆形按钮做准备。
toolName: search_by_regex
status: success
query: bg_btn_green_splash
查看bg_btn_green_splash.xml文件的具体内容，了解当前按钮的背景drawable资源定义，为创建圆形按钮做准备。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable\bg_btn_green_splash.xml
查看bg_btn_green_nor.xml文件的具体内容，了解当前正常状态下按钮的背景样式，为创建圆形按钮做准备。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable\bg_btn_green_nor.xml
查看bg_btn_green_pre.xml和bg_btn_green_end.xml文件的内容，了解按钮在不同状态下的背景样式，确保所有状态都能正确显示为圆形按钮。
toolName: view_files
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable\bg_btn_green_pre.xml
g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable\bg_btn_green_end.xml
创建新的drawable资源文件bg_btn_green_circle_nor.xml，用于圆形按钮的正常状态。
toolName: write_to_file
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable\bg_btn_green_circle_nor.xml
content: <?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="22dp" />
<solid android:color="@color/blue5" />
</shape>
创建新的drawable资源文件bg_btn_green_circle_pre.xml，用于圆形按钮的按下状态。
toolName: write_to_file
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable\bg_btn_green_circle_pre.xml
content: <?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="22dp" />
<solid android:color="@color/blue5" />
</shape>
创建新的drawable资源文件bg_btn_green_circle_end.xml，用于圆形按钮的禁用状态。
toolName: write_to_file
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable\bg_btn_green_circle_end.xml
content: <?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="22dp" />
<solid android:color="@color/grey" />
</shape>
创建新的drawable selector文件bg_btn_green_circle_splash.xml，整合圆形按钮的所有状态。
toolName: write_to_file
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\drawable\bg_btn_green_circle_splash.xml
content: <?xml version=”1.0” encoding=”utf-8”?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_btn_green_circle_pre" android:state_pressed="true" />
<item android:drawable="@drawable/bg_btn_green_circle_pre" android:state_focused="true" />
<item android:drawable="@drawable/bg_btn_green_circle_end" android:state_enabled="false" />
<item android:drawable="@drawable/bg_btn_green_circle_nor" />
</selector>
在styles.xml文件中创建一个新的圆形按钮样式BossGreenBtnCircle，使用我们刚刚创建的圆形背景drawable资源。
toolName: edit_file_update
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\values\styles.xml
changes:
newStr: <style name="BossGreenBtn">
<item name="android:background">@drawable/bg_btn_green_splash</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">44dp</item>
<item name="android:gravity">center</item>
<item name="android:textColor">@color/white</item>
<item name="android:textSize">@dimen/sp_15_text_size</item>
</style>
<style name="BossGreenBtnCircle"> <item name="android:background">@drawable/bg_btn_green_circle_splash</item> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">44dp</item> <item name="android:gravity">center</item> <item name="android:textColor">@color/white</item> <item name="android:textSize">@dimen/sp_15_text_size</item> </style>
oldStr: <style name="BossGreenBtn">
<item name="android:background">@drawable/bg_btn_green_splash</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">44dp</item>
<item name="android:gravity">center</item>
<item name="android:textColor">@color/white</item>
<item name="android:textSize">@dimen/sp_15_text_size</item>
</style>
修改activitity_cj_qunzu.xml文件中的立即创建按钮，将其样式从BossGreenBtn改为BossGreenBtnCircle。
toolName: edit_file_update
status: success
filePath: g:\clone\2025qingting—android\skWeiChatBaidu\src\main\res\layout\activitity_cj_qunzu.xml
changes:
newStr: <LinearLayout android:id="@+id/sure_btn" style="@style/BossGreenBtnCircle" android:layout_height="44dp" android:layout_marginTop="50dp" android:layout_width="match_parent">
oldStr: <LinearLayout android:id="@+id/sure_btn" style="@style/BossGreenBtn" android:layout_height="44dp" android:layout_marginTop="50dp" android:layout_width="match_parent">
已完成将创建群聊页面中的”立即创建”按钮修改为圆形按钮形状的任务。主要修改内容包括：
- 创建了四个新的drawable资源文件用于圆形按钮样式：
- bg_btn_green_circle_nor.xml - 圆形按钮的正常状态
- bg_btn_green_circle_pre.xml - 圆形按钮的按下状态
- bg_btn_green_circle_end.xml - 圆形按钮的禁用状态
- bg_btn_green_circle_splash.xml - 整合所有状态的selector文件
- 在styles.xml中添加了新的圆形按钮样式BossGreenBtnCircle，使用上述drawable资源
- 修改了activitity_cj_qunzu.xml文件中的”立即创建”按钮，将其样式从BossGreenBtn改为BossGreenBtnCircle
现在创建群聊页面中的”立即创建”按钮已经变成了圆形按钮，符合参考图片中的设计要求。
现在我们看看
成功，现在进行下一步骤下一篇
