【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡

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

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

1. 即时通讯服务:
   • 协议: XMPP (Extensible Messaging and Presence Protocol)
   • 实现: 独立部署的 XMPP 服务，负责最核心的点对点、群组聊天等实时消息分发。
2. 消息回执服务:
   • 实现: Tigase Server 7.1.3
   • 职责: 专门处理消息的已发送、已送达、已阅读等状态回执，确保消息的可达性。
3. 消息队列服务:
   • 组件: RocketMQ 4.3.2 (rocketmq-all-4.3.2)
   • 职责: 处理服务间的异步通信、流量削峰、任务队列等，保证系统的高可用和高性能。
4. 上传服务:
   • 实现: 独立制作的 Upload 服务
   • 职责: 专门处理图片、文件、语音等附件的上传、存储和管理，与主业务逻辑解耦。
5. 推送服务:
   • 实现: 独立制作的 Push 服务
   • 集成: 内部封装了 极光推送 SDK，负责将消息通过系统通道推送给Android客户端。
6. 缓存与队列服务:
   • 组件: Redis
   • 职责: 用作高速缓存，提升访问速度；同时处理临时消息队列和会话状态存储。

四、 数据存储 (Data Storage)

1. 主数据库:
   • 组件: MongoDB
   • 版本升级: 已从旧的 3.4.0 成功升级至 4.0 版本。
   • 用途: 存储非结构化的聊天记录、用户动态、群组信息等海量数据，利用其灵活的Schema特性适应IM业务的快速迭代。
2. 关系型数据库:
   • 可能选项: 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. 1. 将原来混合的水平和垂直布局重构为垂直排列的四行布局
2. 2. 每行按钮采用水平线性布局，实现左侧图标、右侧文字的媒体对象样式
3. 3. 为每个按钮设置了相同的高度（60dp），确保等高度显示
4. 4. 调整了内边距和间距，优化了整体视觉效果
5. 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

![](https://doc.youyacao.com/server/index.php?s=/api/attachment/visitFile&sign=b9135ad7d75281d7be5eb01d626b3e66)

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">

已完成将创建群聊页面中的”立即创建”按钮修改为圆形按钮形状的任务。主要修改内容包括：

1. 创建了四个新的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文件
2. 在styles.xml中添加了新的圆形按钮样式BossGreenBtnCircle，使用上述drawable资源
3. 修改了activitity_cj_qunzu.xml文件中的”立即创建”按钮，将其样式从BossGreenBtn改为BossGreenBtnCircle

现在创建群聊页面中的”立即创建”按钮已经变成了圆形按钮，符合参考图片中的设计要求。

现在我们看看

成功，现在进行下一步骤下一篇