xiaozhang/zhibo

Fork 0

cxytw ce0e27f9e7 管理端前端页面修复完善

2025-12-30 16:22:27 +08:00

18 KiB

Raw Permalink Blame History

直播平台Android移动端功能设计分析报告

生成时间：2024年12月29日项目路径：android-app/ 包名：com.example.livestreaming

一、项目概述

1.1 技术架构

技术栈	说明
开发语言	Java (主) + Kotlin (部分)
UI框架	Material Design 3 + ViewBinding
网络请求	Retrofit2 + OkHttp
图片加载	Glide
视频播放	ExoPlayer (Media3) + IjkPlayer (FLV)
实时通信	WebSocket (弹幕/消息)
数据存储	SharedPreferences

1.2 项目规模

统计项	数量
Activity	40+
布局文件	95+
API接口	60+
适配器	20+
工具类	15+

二、功能模块架构

2.1 底部导航结构 (5个主Tab)

┌─────────────────────────────────────────────────────────────┐
│                        直播平台APP                           │
├─────────┬─────────┬─────────┬─────────┬─────────────────────┤
│  首页   │  缘池   │ 许愿树  │  消息   │      我的           │
│  Home   │FishPond │WishTree │Messages │     Profile         │
└─────────┴─────────┴─────────┴─────────┴─────────────────────┘

三、详细功能模块分析

3.1 🏠 首页模块 (MainActivity)

功能结构

首页
├── 顶部导航
│   ├── 侧边栏菜单 (汉堡按钮)
│   ├── 顶部标签页 (关注/发现/附近)
│   ├── 搜索框 (支持语音搜索)
│   └── 用户头像入口
├── 分类标签
│   └── 推荐/游戏/才艺/户外/音乐...
├── 直播间列表
│   └── 瀑布流布局 (StaggeredGridLayout)
└── 悬浮按钮
    └── 创建直播间

侧边栏功能清单

功能	说明	登录要求
个人主页	查看/编辑个人资料	✅ 需要
消息	私信、互动通知	✅ 需要
我的好友	通讯录与挚友	✅ 需要
我的群组	群聊与群组管理	✅ 需要
缘池	附近与社交圈	✅ 需要
我的关注	关注的主播	✅ 需要
粉丝	关注你的人	✅ 需要
获赞	收到的点赞	✅ 需要
观看历史	最近看过的直播	✅ 需要
搜索	找主播/房间/标签	❌ 不需要
设置	账号、隐私、通知	部分需要
帮助与反馈	常见问题与建议	❌ 不需要
关于	版本信息与协议	❌ 不需要

核心API接口

// 直播间列表
GET /api/front/live/public/rooms

// 创建直播间
POST /api/front/live/rooms

// 搜索功能
GET /api/search?keyword={keyword}&type={type}

3.2 📺 直播间模块 (RoomDetailActivity)

功能结构

直播间
├── 播放器区域
│   ├── ExoPlayer (HLS流)
│   ├── IjkPlayer (FLV流)
│   ├── 全屏切换
│   └── 离线状态显示
├── 房间信息
│   ├── 房间标题
│   ├── 主播名称
│   ├── 观看人数
│   ├── 直播状态标签
│   ├── 关注按钮
│   └── 分享按钮
├── 弹幕区域
│   ├── 弹幕列表 (RecyclerView)
│   ├── WebSocket实时弹幕
│   └── 弹幕输入框
└── 礼物系统
    ├── 礼物列表
    ├── 礼物发送
    └── 金币余额

技术特点

特性	实现方式
视频播放	ExoPlayer (HLS) + IjkPlayer (FLV) 双引擎
弹幕通信	WebSocket 实时推送
心跳检测	30秒间隔心跳包
断线重连	最多5次重连，递增延迟
横竖屏	支持全屏切换

核心API接口

// 获取房间详情
GET /api/front/live/public/rooms/{id}

// 获取观看人数
GET /api/front/live/public/rooms/{roomId}/viewers/count

// 获取弹幕消息
GET /api/front/live/public/rooms/{roomId}/messages

// 发送弹幕
POST /api/front/live/public/rooms/{roomId}/messages

// 关注主播
POST /api/front/live/follow

// WebSocket弹幕
ws://192.168.1.164:8081/ws/live/chat/{roomId}

3.3 🎁 礼物打赏模块

功能结构

礼物系统
├── 礼物列表
│   ├── 礼物图标
│   ├── 礼物名称
│   └── 礼物价格 (金币)
├── 用户余额
│   ├── 金币余额
│   └── 充值入口
└── 充值系统
    ├── 充值选项列表
    └── 支付接口

核心API接口

// 获取礼物列表
GET /api/front/gift/list

// 获取用户余额
GET /api/front/gift/balance

// 发送礼物
POST /api/front/gift/send

// 获取充值选项
GET /api/front/gift/recharge/options

// 创建充值订单
POST /api/front/gift/recharge/create

3.4 💬 消息模块 (MessagesActivity)

功能结构

消息中心
├── 会话列表
│   ├── 用户头像
│   ├── 用户昵称
│   ├── 最后消息预览
│   ├── 时间戳
│   └── 未读数量徽章
├── 会话搜索
└── 私聊详情 (ConversationActivity)
    ├── 消息列表
    │   ├── 文本消息
    │   ├── 图片消息
    │   └── 语音消息
    ├── 消息输入
    └── 发送功能

消息类型支持

类型	布局文件	说明
文本消息	item_conversation_message_*.xml	支持收发
图片消息	item_conversation_image_*.xml	支持收发
语音消息	item_conversation_voice_*.xml	支持收发

核心API接口

// 获取会话列表
GET /api/front/conversations

// 搜索会话
GET /api/front/conversations/search?keyword={keyword}

// 获取/创建会话
POST /api/front/conversations/with/{otherUserId}

// 标记已读
POST /api/front/conversations/{id}/read

// 删除会话
DELETE /api/front/conversations/{id}

// 获取消息列表
GET /api/front/conversations/{id}/messages

// 发送消息
POST /api/front/conversations/{id}/messages

// 删除消息
DELETE /api/front/conversations/messages/{id}

3.5 👥 社交模块

3.5.1 好友管理 (MyFriendsActivity)

好友管理
├── 好友列表
│   ├── 好友头像
│   ├── 好友昵称
│   ├── 在线状态
│   └── 操作按钮
├── 好友请求
│   ├── 请求列表
│   ├── 同意/拒绝
│   └── 请求详情
└── 添加好友 (AddFriendActivity)
    ├── 搜索用户
    └── 发送请求

3.5.2 群组管理 (GroupListActivity)

群组管理
├── 群组列表
│   ├── 群组头像
│   ├── 群组名称
│   ├── 成员数量
│   └── 最后消息
├── 创建群组 (CreateGroupActivity)
│   ├── 群组名称
│   ├── 群组头像
│   └── 选择成员
└── 群组详情 (GroupDetailActivity)
    ├── 群组信息
    ├── 成员列表
    ├── 添加成员
    ├── 移除成员
    ├── 转让群主
    └── 解散/退出群组

核心API接口

// 好友管理
GET /api/front/friends
DELETE /api/front/friends/{friendId}
POST /api/front/friends/request
GET /api/front/friends/requests
POST /api/front/friends/requests/{requestId}/handle

// 群组管理
POST /api/front/groups/create
GET /api/front/groups/list
GET /api/front/groups/{groupId}
PUT /api/front/groups/{groupId}
DELETE /api/front/groups/{groupId}
POST /api/front/groups/{groupId}/members
DELETE /api/front/groups/{groupId}/members/{userId}
GET /api/front/groups/{groupId}/members
POST /api/front/groups/{groupId}/leave
POST /api/front/groups/{groupId}/transfer

3.6 🎣 缘池模块 (FishPondActivity)

功能结构

缘池 (社交发现)
├── 轨道用户展示
│   ├── 6个用户头像环绕
│   ├── 轨道动画效果
│   └── 呼吸脉冲动画
├── 中心刷新按钮
├── 快捷功能入口
│   ├── 语音匹配 (VoiceMatchActivity)
│   └── 心动信号 (HeartbeatSignalActivity)
└── 功能卡片网格
    ├── 在线处对象 (OnlineDatingActivity)
    ├── 找人玩游戏 (FindGameActivity)
    ├── 一起KTV (KTVTogetherActivity)
    ├── 你画我猜 (DrawGuessActivity)
    ├── 和平精英 (PeaceEliteActivity)
    └── 桌子游 (TableGamesActivity)

设计特点

创新的轨道式用户展示
流畅的动画效果
多种社交玩法入口

3.7 🌳 许愿树模块 (WishTreeActivity)

功能说明

许愿树是一个社交互动功能，用户可以发布愿望，其他用户可以帮助实现。

3.8 👤 个人中心模块 (ProfileActivity)

功能结构

个人中心
├── 用户信息区
│   ├── 头像 (可点击查看大图)
│   ├── 昵称 (可编辑)
│   ├── 用户ID (可复制)
│   ├── 个人签名 (可编辑)
│   └── 标签 (性别/年龄/星座/地区)
├── 数据统计
│   ├── 关注数
│   ├── 粉丝数
│   └── 获赞数
├── 快捷入口
│   ├── 公园勋章
│   ├── 观看历史
│   └── 我的好友
├── 操作按钮
│   ├── 编辑资料
│   ├── 分享主页
│   └── 添加好友
└── 内容标签页
    ├── 作品 (UserWorksAdapter)
    ├── 收藏
    └── 赞过

编辑资料 (EditProfileActivity)

编辑资料
├── 头像修改
├── 昵称修改
├── 性别选择
├── 生日选择
├── 所在地选择
└── 个人签名

3.9 🔐 用户认证模块

功能结构

用户认证
├── 登录 (LoginActivity)
│   ├── 账号密码登录
│   └── 验证码登录
├── 注册 (RegisterActivity)
│   ├── 手机号注册
│   ├── 验证码验证
│   └── 设置密码
└── 认证辅助 (AuthHelper)
    ├── 登录状态检查
    └── 登录引导提示

核心API接口

// 登录
POST /api/front/login

// 注册
POST /api/front/register

// 发送验证码
POST /api/front/sendCode

// 登出
GET /api/front/logout

// 获取用户信息
GET /api/front/user

// 更新用户信息
POST /api/front/user/edit

3.10 📞 通话模块 (call/)

功能结构

通话功能
├── 发起通话 (CallActivity)
│   ├── 语音通话
│   └── 视频通话
├── 来电接听 (IncomingCallActivity)
│   ├── 接听
│   └── 拒绝
├── 通话记录 (CallHistoryActivity)
│   └── 历史记录列表
└── 通话管理 (CallManager)
    ├── 信令处理
    └── 状态管理

3.11 📝 作品发布模块 (PublishWorkActivity)

功能结构

发布作品
├── 媒体选择
│   ├── 图片选择
│   └── 视频选择
├── 封面设置
├── 标题输入
├── 描述输入
└── 发布提交

3.12 🔍 搜索模块 (SearchActivity)

功能结构

搜索功能
├── 搜索输入
│   ├── 文字输入
│   └── 语音输入
├── 搜索建议
├── 搜索结果
│   ├── 用户结果
│   └── 房间结果
└── 历史记录

3.13 ⚙️ 设置模块 (SettingsPageActivity)

功能结构

设置
├── 账号设置
│   ├── 绑定手机
│   └── 修改密码
├── 隐私设置
├── 通知设置 (NotificationSettingsActivity)
├── 帮助与反馈
│   └── 反馈提交
└── 关于
    ├── 版本信息
    └── 用户协议

四、UI组件清单

4.1 自定义View

组件	文件	说明
EmptyStateView	EmptyStateView.java	空状态展示
AvatarViewerDialog	AvatarViewerDialog.java	头像查看器

4.2 适配器列表

适配器	说明
RoomsAdapter	直播间列表
WaterfallRoomsAdapter	瀑布流直播间
ChatAdapter	直播弹幕
LiveChatAdapter	直播聊天
ConversationsAdapter	会话列表
ConversationMessagesAdapter	私聊消息
FriendsAdapter	好友列表
FriendRequestAdapter	好友请求
GroupsAdapter	群组列表
GroupMembersAdapter	群成员列表
GiftAdapter	礼物列表
RechargeAdapter	充值选项
UserWorksAdapter	用户作品
NotificationsAdapter	通知列表
NearbyUsersAdapter	附近用户
SearchUserAdapter	搜索用户
SearchSuggestionsAdapter	搜索建议
CommentAdapter	评论列表
BadgesAdapter	徽章列表
MoreAdapter	更多选项
DrawerCardsAdapter	侧边栏卡片

五、数据模型清单

5.1 网络响应模型 (net/)

模型	说明
ApiResponse	通用响应包装
PageResponse	分页响应
LoginResponse	登录响应
UserInfoResponse	用户信息
Room	直播间信息
StreamConfig	流配置
StreamUrls	播放地址
GiftResponse	礼物信息
SendGiftResponse	发送礼物响应
ConversationResponse	会话信息
PrivateMessageResponse	私聊消息
ChatMessageResponse	弹幕消息
FriendResponse	好友信息
FriendRequestResponse	好友请求
GroupResponse	群组信息
GroupMemberResponse	群成员信息
SearchUserResponse	搜索用户
RechargeOptionResponse	充值选项
FileUploadResponse	文件上传响应
UserBalanceResponse	用户余额

5.2 请求模型 (net/)

模型	说明
LoginRequest	登录请求
RegisterRequest	注册请求
CreateRoomRequest	创建房间
SendGiftRequest	发送礼物
SendMessageRequest	发送消息
CreateGroupRequest	创建群组
UpdateGroupRequest	更新群组
AddGroupMembersRequest	添加成员
TransferGroupRequest	转让群主
UserEditRequest	编辑用户
CreateRechargeRequest	创建充值

5.3 UI模型

模型	说明
ChatMessage	弹幕消息
ConversationItem	会话项
FriendItem	好友项
FriendRequestItem	好友请求项
GroupItem	群组项
GroupMemberItem	群成员项
Gift	礼物
RechargeOption	充值选项
WorkItem	作品项
NearbyUser	附近用户
NotificationItem	通知项
CommentItem	评论项
BadgeItem	徽章项
DrawerCardItem	侧边栏项
MoreItem	更多选项项
SearchUserItem	搜索用户项

六、工具类清单

工具类	说明
ApiClient	API客户端单例
AuthStore	认证信息存储
AuthHelper	登录状态检查
CacheManager	缓存管理
NetworkUtils	网络工具
NetworkRequestManager	网络请求管理
ErrorHandler	错误处理
ShareUtils	分享工具
LocationDataManager	位置数据管理
CategoryFilterManager	分类筛选管理
LoadingStateManager	加载状态管理
UnreadMessageManager	未读消息管理
LocalNotificationManager	本地通知管理
MessagePreviewHelper	消息预览辅助
MessageSendHelper	消息发送辅助
WorkManager	作品管理
DebounceClickListener	防抖点击监听
LiveChatClient	直播弹幕客户端

七、功能完成度评估

7.1 已完成功能 ✅

模块	完成度	说明
首页框架	95%	UI完整，待接口对接
直播间播放	90%	双引擎播放，WebSocket弹幕
用户认证	85%	登录注册流程完整
个人中心	90%	资料编辑完整
消息系统	85%	会话列表、私聊完整
好友管理	90%	好友列表、请求处理完整
群组管理	95%	10个API全部实现
礼物系统	80%	礼物列表、发送完整
缘池社交	85%	轨道动画、功能入口完整
搜索功能	80%	搜索框、语音搜索完整

7.2 待完善功能 ⏳

模块	完成度	待完成项
后端接口对接	60%	大部分接口待对接
支付充值	40%	支付SDK集成
推送通知	30%	推送服务集成
通话功能	50%	WebRTC集成
作品发布	60%	上传接口对接
许愿树	50%	功能逻辑完善

八、设计亮点

8.1 用户体验

游客模式：用户无需登录即可浏览直播，仅在需要互动时提示登录
防抖处理：所有按钮点击都有防抖保护，避免重复操作
缓存优先：首页优先显示缓存数据，提升启动速度
语音搜索：支持语音输入搜索，提升搜索体验

8.2 技术实现

双播放引擎：ExoPlayer + IjkPlayer，支持HLS和FLV流
WebSocket弹幕：实时弹幕推送，心跳检测，断线重连
瀑布流布局：StaggeredGridLayout实现直播间瀑布流
轨道动画：缘池页面创新的轨道式用户展示

8.3 架构设计

ViewBinding：类型安全的视图绑定
单例API客户端：统一的网络请求管理
认证辅助类：统一的登录状态检查
错误处理：统一的错误处理机制

九、优化建议

9.1 架构优化

引入MVVM架构，使用ViewModel + LiveData
使用Room数据库替代SharedPreferences存储复杂数据
引入依赖注入框架（Hilt/Dagger）

9.2 性能优化

图片加载优化：预加载、内存缓存策略
列表优化：DiffUtil、预加载
内存优化：及时释放资源，避免内存泄漏

9.3 功能完善

完成所有后端接口对接
集成支付SDK（微信/支付宝）
集成推送服务（极光/个推）
完善通话功能（WebRTC）

十、总结

Android移动端是一个功能完整的直播社交平台，包含直播观看、社交互动、消息通信、个人中心等核心模块。UI设计现代化，采用Material Design 3风格，用户体验流畅。

核心优势：

完整的直播观看体验（双引擎播放）
丰富的社交功能（好友、群组、缘池）
实时通信能力（WebSocket弹幕）
良好的用户体验设计

主要待完成：

后端接口全面对接
支付功能集成
推送服务集成
通话功能完善

报告完成

建议按照功能优先级逐步完成后端接口对接

18 KiB Raw Permalink Blame History Unescape Escape

直播平台Android移动端功能设计分析报告

一、项目概述

1.1 技术架构

1.2 项目规模

二、功能模块架构

2.1 底部导航结构 (5个主Tab)

三、详细功能模块分析

3.1 🏠 首页模块 (MainActivity)

功能结构

侧边栏功能清单

核心API接口

3.2 📺 直播间模块 (RoomDetailActivity)

功能结构

技术特点

核心API接口

3.3 🎁 礼物打赏模块

功能结构

核心API接口

3.4 💬 消息模块 (MessagesActivity)

功能结构

消息类型支持

核心API接口

3.5 👥 社交模块

3.5.1 好友管理 (MyFriendsActivity)

3.5.2 群组管理 (GroupListActivity)

核心API接口

3.6 🎣 缘池模块 (FishPondActivity)

功能结构

设计特点

3.7 🌳 许愿树模块 (WishTreeActivity)

功能说明

3.8 👤 个人中心模块 (ProfileActivity)

功能结构

编辑资料 (EditProfileActivity)

3.9 🔐 用户认证模块

功能结构

核心API接口

3.10 📞 通话模块 (call/)

功能结构

3.11 📝 作品发布模块 (PublishWorkActivity)

功能结构

3.12 🔍 搜索模块 (SearchActivity)

功能结构

3.13 ⚙️ 设置模块 (SettingsPageActivity)

功能结构

四、UI组件清单

4.1 自定义View

4.2 适配器列表

五、数据模型清单

5.1 网络响应模型 (net/)

5.2 请求模型 (net/)

5.3 UI模型

六、工具类清单

七、功能完成度评估

7.1 已完成功能 ✅

7.2 待完善功能 ⏳

八、设计亮点

8.1 用户体验

8.2 技术实现

8.3 架构设计

九、优化建议

9.1 架构优化

9.2 性能优化

9.3 功能完善

十、总结

18 KiB

Raw Permalink Blame History