Files
zhini_im/DiscoveryFragment广场页面逻辑分析.txt

512 lines
13 KiB
Plaintext
Raw Permalink Normal View History

# DiscoveryFragment 广场页面逻辑分析
## 📋 页面概述
**文件位置**: `app/src/main/java/com/xunpaisoft/social/im/main/DiscoveryFragment.java`
**布局文件**: `app/src/main/res/layout/main_fragment_discovery.xml`
**页面类型**: Fragment继承自 `Fragment`
**主要功能**: 社交广场页面,类似朋友圈功能,支持发布动态、浏览动态、点赞评论等社交功能
---
## 🎯 核心功能模块
### 1. 页面初始化 (`onCreateView()`)
#### 1.1 初始化流程
```java
onCreateView()
bindViews(view) // 绑定视图控件
bindEvents(view) // 绑定事件监听
initMoment() // 初始化朋友圈功能
检查会议功能支持 // 如果不支持则隐藏会议入口
```
#### 1.2 关键UI组件
- `mRcyItem`: 动态列表 RecyclerView
- `tvGuangchang`: 广场Tab按钮
- `tvGuanzhu`: 关注Tab按钮
- `swipeRefreshLayout`: 下拉刷新和上拉加载控件
- `mTVPublish`: 发布按钮
---
### 2. 页面切换功能
#### 2.1 广场/关注切换
- **状态变量**: `mIsClickGuangchang`(布尔值,默认 `true`
- `true`: 显示广场动态(所有用户动态)
- `false`: 显示关注动态(仅关注用户动态)
#### 2.2 切换逻辑
```java
clickGuangchang() {
mIsClickGuangchang = true;
refreshView(); // 更新Tab样式
mPage = 1; // 重置页码
getPublish(); // 重新加载数据
}
clickGuanzhu() {
mIsClickGuangchang = false;
refreshView(); // 更新Tab样式
mPage = 1; // 重置页码
getPublish(); // 重新加载数据
}
```
#### 2.3 Tab样式更新 (`refreshView()`)
- 根据 `mIsClickGuangchang` 状态在对应Tab底部显示下划线
- 使用 `bottom_line_style` drawable 作为下划线样式
---
### 3. 动态列表功能 (`initRcyItem()`)
#### 3.1 RecyclerView配置
- **布局管理器**: `LinearLayoutManager`(垂直列表)
- **适配器**: `BaseRcyAdapter`
- **布局文件**: `adapter_pengyouquan_item.xml`
#### 3.2 列表项数据绑定
**基本信息显示**:
- 昵称 (`tv_ada_nikename`)
- 头像 (`img_ada_head`)
- 性别图标 (`img_ada_sex`)
- 内容 (`tv_ada_content`)
- 时间 (`tv_ada_time`)
- 点赞数 (`tv_ada_like`)
- 评论数 (`tv_ada_commit`)
**图片显示**:
- 支持多图片网格布局3列
- 单张图片:使用 `LinearLayoutManager`
- 2张及以上使用 `GridLayoutManager`3列
- 点击图片可预览(`MMPreviewActivity`
**评论列表**:
- 最多显示3条评论
- 超过3条时显示"查看详情"按钮
- 评论支持点击回复功能
---
### 4. 数据加载功能 (`getPublish()`)
#### 4.1 请求参数
```java
HashMap<String, String> {
"type": "0" 或 "1", // 0=广场, 1=关注
"page": "页码", // 当前页码
"limit": "每页数量" // AppService.PAGE_MAX_NUMBER
}
```
#### 4.2 分页逻辑
- **下拉刷新**: `mPage = 1`,重置数据(`setmData`
- **上拉加载**: `mPage++`,追加数据(`setLoadmData`
#### 4.3 数据刷新
- 成功时调用 `swipeRefreshLayout.finishRefresh()` 和 `finishLoadMore()`
- 失败时同样调用,并显示错误提示
---
### 5. 社交互动功能
#### 5.1 点赞功能 (`likeDeal()`)
**API调用**:
- 接口: `POST /api/post/like`
- 参数: `post_id`帖子ID
**UI更新逻辑**:
```java
if ("0".equals(listBean.getIs_like())) {
// 未点赞 → 已点赞
- 切换图标为已点赞状态icon_dianzan_yi
- 设置 is_like = "1"
- 点赞数 +1
} else {
// 已点赞 → 取消点赞
- 切换图标为未点赞状态icon_dianzan
- 设置 is_like = "0"
- 点赞数不变(后端处理)
}
```
#### 5.2 评论功能 (`submitComment()`)
**新增评论**:
```java
submitComment(postId, content, callback) {
// 调用 submitComment(postId, null, content, callback)
}
```
**回复评论**:
```java
submitComment(postId, parentCommentId, content, callback) {
HashMap {
"post_id": postId,
"content": content,
"comment_id": parentCommentId // 可选,回复时传入
}
}
```
**评论显示逻辑**:
- 如果有 `receiver`(被回复人),显示格式:`"nickname 回复 receiver: content"`
- 如果没有 `receiver`,显示格式:`"nickname: content"`
**评论对话框**:
- 使用 `CommentDialog` 显示评论输入框
- 点击评论列表项可回复该评论
- 回复时输入框提示:`"回复 nickname"`
#### 5.3 删除功能 (`deleteSelfPyq()`)
**删除条件**:
- 仅自己的动态显示删除按钮
- 判断条件:`Constants.getUserId().equals(listBean.getUser_id())`
**删除流程**:
1. 显示确认对话框(`CommDialog`
2. 用户确认后调用删除接口
3. 删除成功后刷新列表(`mPage = 1`, `getPublish()`
**API调用**:
- 接口: `POST /api/post/delete`(推测)
- 参数: `post_id`帖子ID
---
### 6. 用户交互功能
#### 6.1 用户信息查看
- **点击头像**: 跳转到 `UserInfoActivity`
- **点击昵称**: 跳转到 `UserInfoActivity`
- 通过 `UserViewModel.getUserInfo()` 获取 `UserInfo` 对象
#### 6.2 动态详情
- **点击"查看详情"**: 跳转到 `PengyouquanDetailActivity`
- 传递参数: `detailInfo``GetPengyouquanResult.ListBean` 对象)
#### 6.3 图片预览
- **点击图片**: 使用 `MMPreviewActivity.previewImageArrayList()` 预览
- 支持多图片滑动查看
- 图片URL格式: `AppService.APP_FILE_ADDRESS + url`
#### 6.4 发布动态
- **点击发布按钮**: 跳转到 `PublishActivity`
---
### 7. 其他功能入口
#### 7.1 功能菜单项
- **聊天室** (`chatRoom()`): 跳转到 `ChatRoomListActivity`
- **机器人** (`robot()`): 跳转到与 `FireRobot` 的会话
- **频道** (`channel()`): 跳转到 `ChannelListActivity`
- **朋友圈** (`moment()`): 跳转到朋友圈页面隐式Intent
- **会议** (`conference()`): 跳转到 `ConferencePortalActivity`
- **开发文档** (`cookbook()`): 打开WebView显示文档
#### 7.2 朋友圈功能 (`initMoment()`)
- 检查是否支持朋友圈功能
- 监听消息变化更新朋友圈未读消息数badge
- 如果不支持,隐藏朋友圈入口
---
### 8. 状态栏颜色设置 (`onResume()`)
```java
@Override
public void onResume() {
super.onResume();
// 设置状态栏颜色为 #D4E4FE广场页面专用颜色
if (getActivity() instanceof MainActivity) {
MainActivity mainActivity = (MainActivity) getActivity();
mainActivity.setStatusBarColorForFragment(
R.color.discovery_status_bar_color,
false // 深色图标(适合浅色背景)
);
}
// 更新朋友圈未读消息数
if (WfcUIKit.getWfcUIKit().isSupportMoment()) {
updateMomentBadgeView();
}
}
```
---
## 🔄 完整业务流程
### 发布动态流程
```
用户点击发布按钮
跳转到 PublishActivity
用户编辑内容并发布
发布成功后返回
自动刷新列表refreshAllView
```
### 点赞流程
```
用户点击点赞按钮
调用 likeDeal() 接口
成功后更新UI状态
切换图标和点赞数
```
### 评论流程
```
用户点击评论按钮
显示 CommentDialog
用户输入评论内容
调用 submitComment() 接口
成功后关闭对话框并刷新列表
```
### 回复评论流程
```
用户点击评论列表项
显示 CommentDialog提示"回复 nickname"
用户输入回复内容
调用 submitComment(postId, commentId, content)
成功后关闭对话框并刷新列表
```
---
## 📊 数据结构
### 动态列表项 (`GetPengyouquanResult.ListBean`)
```java
{
"id": "帖子ID",
"user_id": "用户ID",
"nickname": "昵称",
"avatar": "头像URL",
"gender": "性别0=男, 1=女)",
"content": "内容",
"images": "图片URL列表逗号分隔",
"createtime": "创建时间(秒)",
"likes": "点赞数",
"is_like": "是否已点赞0=未点赞, 1=已点赞)",
"province": "省份可为null",
"city": "城市可为null",
"district": "区县可为null",
"poi": "地点信息/POI可为null",
"lat": "纬度可为null",
"lng": "经度可为null",
"comments": [评论列表]
}
```
### 评论项 (`GetCommentInfoResult.ListBean`)
```java
{
"id": "评论ID",
"nickname": "评论者昵称",
"receiver": "被回复人昵称(可选)",
"receiver_id": "被回复人ID可选",
"content": "评论内容",
"createtime": "创建时间(秒)"
}
```
---
## 🛠️ 技术要点
### 1. 下拉刷新和上拉加载
- **库**: `SmartRefreshLayout`
- **功能**:
- 下拉刷新:重置页码,重新加载第一页
- 上拉加载:页码+1追加数据
### 2. 图片布局自适应
- **单张图片**: `LinearLayoutManager`(单列,可横向滑动)
- **多张图片**: `GridLayoutManager`3列网格布局
### 3. 评论显示逻辑
- **显示规则**:
- 评论数 ≤ 3全部显示不显示"查看详情"
- 评论数 > 3只显示前3条显示"查看详情"
- **回复格式**: 使用反射获取 `receiver` 字段支持多种getter方法
### 4. 数据刷新机制
- **删除后**: `mPage = 1`, `getPublish()`
- **评论后**: `mPage = 1`, `getPublish()`
- **点赞后**: 仅更新当前项UI不刷新列表
---
## ⚠️ 注意事项
1. **分页逻辑**: 第一页使用 `setmData()`(重置),后续页使用 `setLoadmData()`(追加)
2. **评论显示**: 使用反射获取 `receiver` 字段,确保兼容性
3. **删除权限**: 仅自己的动态显示删除按钮
4. **状态栏颜色**: 在 `onResume()` 中设置,确保每次显示时都更新
5. **图片预览**: 使用 `MMPreviewActivity`,支持多图片滑动查看
---
## 🔍 相关文件
- **布局文件**: `app/src/main/res/layout/main_fragment_discovery.xml`
- **列表项布局**: `uikit/src/main/res/layout/adapter_pengyouquan_item.xml`
- **评论项布局**: `uikit/src/main/res/layout/adapter_user_comment_item.xml`
- **网络服务**: `AppService.publishList()` - 获取动态列表
- **网络服务**: `AppService.publishLike()` - 点赞接口
- **网络服务**: `AppService.publishComment()` - 评论接口
- **网络服务**: `AppService.postpyqDelete()` - 删除接口
---
## 📝 代码关键位置
### 列表初始化第183行
```java
private void initRcyItem() {
// 设置布局管理器和适配器
}
```
### 数据加载第576行
```java
private void getPublish() {
// 根据type参数加载广场或关注动态
}
```
### 点赞处理第680行
```java
private void likeDeal(String commentId, BooleanCallback callback) {
// 调用点赞接口
}
```
### 评论提交第548行、552行
```java
private void submitComment(String postId, String parentCommentId, String content, BooleanCallback callback) {
// 提交评论或回复
}
```
### 评论列表显示第414行
```java
private void initRcyCommentView(RecyclerView rcy, ArrayList<GetCommentInfoResult.ListBean> list, String postId) {
// 显示评论列表,支持点击回复
}
```
---
## 🎨 UI交互细节
### Tab切换动画
- 使用 `CompoundDrawablesWithIntrinsicBounds` 设置底部下划线
- 切换时动态更新,无动画效果
### 点赞状态切换
- 使用 `setCompoundDrawablesWithIntrinsicBounds` 切换图标
- 图标:
- 未点赞: `icon_dianzan`
- 已点赞: `icon_dianzan_yi`
### 评论对话框
- 使用 `CommentDialog` 自定义对话框
- 支持输入框聚焦和软键盘弹出(注释代码)
---
## 📈 性能优化
1. **图片加载**: 使用 `GlideUtils` 进行图片加载和缓存
2. **列表复用**: 使用 `RecyclerView` 实现列表项复用
3. **嵌套滚动**: 图片RecyclerView设置 `setNestedScrollingEnabled(false)`,避免滚动冲突
4. **固定大小**: 设置 `setHasFixedSize(true)` 优化布局计算
---
## 🔄 数据流
```
用户操作
UI更新
API调用
服务器响应
更新UI状态
刷新列表(如需要)
```
---
## 📚 相关API接口
### 获取动态列表
- **接口**: `POST /api/post/postList`
- **参数**: `type`, `page`, `limit`
- **返回**: `GetPengyouquanResult`
### 点赞/取消点赞
- **接口**: `POST /api/post/like`
- **参数**: `post_id`
- **返回**: 成功/失败
### 发表评论/回复
- **接口**: `POST /api/post/comment`
- **参数**: `post_id`, `content`, `comment_id`(可选,回复时传入)
- **返回**: 成功/失败
### 删除动态
- **接口**: `POST /api/post/delete`(推测)
- **参数**: `post_id`
- **返回**: 成功/失败
---
## 💡 特殊处理
### 评论回复显示
- 使用反射机制获取 `receiver` 字段确保兼容不同版本的API返回
- 如果获取不到 `receiver`,则不显示"回复"前缀
### 图片布局
- 根据图片数量动态调整布局管理器
- 单张图片使用横向滚动布局,多张图片使用网格布局
### 状态栏颜色
- 广场页面专用状态栏颜色:`#D4E4FE`
- 在 `onResume()` 中设置,确保每次显示时都更新