236 lines
6.4 KiB
Markdown
236 lines
6.4 KiB
Markdown
|
# Android 直播应用新 UI 设计说明
|
|||
|
|
|
|||
|
|
## 🎨 设计概览
|
|||
|
|
|
|||
|
|
已将 Android 应用首页重新设计为现代化的瀑布流布局，参考了主流直播应用的设计风格。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ✅ 已完成的修改
|
|||
|
|
|
|||
|
|
### 1. 新增布局文件
|
|||
|
|
|
|||
|
|
#### 主界面布局 (`activity_main.xml`)
|
|||
|
|
- **顶部导航栏**：
|
|||
|
|
- 左侧：菜单图标
|
|||
|
|
- 中间：关注/发现/附近 标签页
|
|||
|
|
- 右侧：消息和通知图标
|
|||
|
|
|
|||
|
|
- **搜索栏**：
|
|||
|
|
- 搜索框 + 语音搜索按钮
|
|||
|
|
- 圆角设计，灰色背景
|
|||
|
|
|
|||
|
|
- **分类标签**：
|
|||
|
|
- 横向滚动
|
|||
|
|
- 推荐、颜值、才艺、户外、娱乐、聊天
|
|||
|
|
- 选中状态：紫色背景 + 白色文字
|
|||
|
|
- 未选中：灰色背景 + 灰色文字
|
|||
|
|
|
|||
|
|
- **内容区域**：
|
|||
|
|
- 瀑布流布局（2列）
|
|||
|
|
- RecyclerView + StaggeredGridLayoutManager
|
|||
|
|
|
|||
|
|
- **底部导航栏**：
|
|||
|
|
- 首页、发现、开播（中间大按钮）、消息、我的
|
|||
|
|
- 固定在底部，白色背景，带阴影
|
|||
|
|
|
|||
|
|
#### 直播间卡片布局 (`item_room_waterfall.xml`)
|
|||
|
|
- **封面图**：3:4 比例
|
|||
|
|
- **直播标签**：左上角红色标签（直播中时显示）
|
|||
|
|
- **观看人数**：右上角半透明黑色背景
|
|||
|
|
- **底部信息**：
|
|||
|
|
- 标题（最多2行）
|
|||
|
|
- 主播头像 + 名称
|
|||
|
|
- 热门标签（观看人数>100时显示）
|
|||
|
|
|
|||
|
|
### 2. 新增 Drawable 资源
|
|||
|
|
|
|||
|
|
| 文件名 | 用途 |
|
|||
|
|
|--------|------|
|
|||
|
|
| `search_background.xml` | 搜索框背景（圆角灰色） |
|
|||
|
|
| `category_selected.xml` | 选中的分类标签背景（紫色） |
|
|||
|
|
| `category_normal.xml` | 未选中的分类标签背景（灰色） |
|
|||
|
|
| `live_badge_background.xml` | 直播标签背景（红色） |
|
|||
|
|
| `viewer_count_background.xml` | 观看人数背景（半透明黑色） |
|
|||
|
|
| `hot_badge_background.xml` | 热门标签背景（红色边框） |
|
|||
|
|
|
|||
|
|
### 3. 新增 Java 类
|
|||
|
|
|
|||
|
|
#### `WaterfallRoomsAdapter.java`
|
|||
|
|
- 瀑布流适配器
|
|||
|
|
- 支持直播状态显示
|
|||
|
|
- 支持观看人数显示
|
|||
|
|
- 支持热门标签（观看人数>100）
|
|||
|
|
|
|||
|
|
### 4. 修改的文件
|
|||
|
|
|
|||
|
|
#### `MainActivity.java`
|
|||
|
|
- 使用 `WaterfallRoomsAdapter` 替代 `RoomsAdapter`
|
|||
|
|
- 使用 `StaggeredGridLayoutManager` 实现瀑布流（2列）
|
|||
|
|
- 保持原有的轮询和点击逻辑
|
|||
|
|
|
|||
|
|
#### `themes.xml`
|
|||
|
|
- 添加 `CategoryChip` 样式
|
|||
|
|
- 修改状态栏和导航栏颜色为白色
|
|||
|
|
- 启用浅色状态栏图标
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🎨 设计细节
|
|||
|
|
|
|||
|
|
### 颜色方案
|
|||
|
|
- **主色调**：紫色 (`#6200EE`)
|
|||
|
|
- **强调色**：红色 (`#E53935`) - 用于直播标签
|
|||
|
|
- **背景色**：浅灰 (`#F5F5F5`)
|
|||
|
|
- **文字色**：
|
|||
|
|
- 主要文字：`#333333`
|
|||
|
|
- 次要文字：`#666666`
|
|||
|
|
- 提示文字：`#999999`
|
|||
|
|
|
|||
|
|
### 圆角设计
|
|||
|
|
- 搜索框：24dp
|
|||
|
|
- 分类标签：16dp
|
|||
|
|
- 直播间卡片：12dp
|
|||
|
|
- 直播标签：4dp
|
|||
|
|
|
|||
|
|
### 间距规范
|
|||
|
|
- 页面边距：16dp
|
|||
|
|
- 卡片间距：8dp
|
|||
|
|
- 元素内边距：12dp
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📱 功能说明
|
|||
|
|
|
|||
|
|
### 当前已实现
|
|||
|
|
- ✅ 瀑布流布局展示直播间
|
|||
|
|
- ✅ 直播状态标签
|
|||
|
|
- ✅ 观看人数显示
|
|||
|
|
- ✅ 点击进入直播间
|
|||
|
|
- ✅ 自动刷新列表（5秒轮询）
|
|||
|
|
- ✅ 开播按钮（底部导航中间）
|
|||
|
|
|
|||
|
|
### 待实现（UI已准备好）
|
|||
|
|
- ⏳ 搜索功能
|
|||
|
|
- ⏳ 语音搜索
|
|||
|
|
- ⏳ 分类筛选
|
|||
|
|
- ⏳ 关注/发现/附近 标签页切换
|
|||
|
|
- ⏳ 消息和通知功能
|
|||
|
|
- ⏳ 底部导航其他页面
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🔧 如何编译和运行
|
|||
|
|
|
|||
|
|
### 1. 清理项目
|
|||
|
|
```bash
|
|||
|
|
cd android-app
|
|||
|
|
gradlew clean
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 编译
|
|||
|
|
```bash
|
|||
|
|
gradlew assembleDebug
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 安装到模拟器
|
|||
|
|
```bash
|
|||
|
|
gradlew installDebug
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
或者在 Android Studio 中直接点击 ▶️ Run
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📸 布局预览
|
|||
|
|
|
|||
|
|
### 主界面结构
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────┐
|
|||
|
|
│ ☰ 关注 发现 附近 ✉ 🔔 │ ← 顶部导航
|
|||
|
|
├─────────────────────────────┤
|
|||
|
|
│ 🔍 搜索主播/房间/标签 🎤 │ ← 搜索栏
|
|||
|
|
├─────────────────────────────┤
|
|||
|
|
│ [推荐][颜值][才艺][户外]... │ ← 分类标签
|
|||
|
|
├─────────────────────────────┤
|
|||
|
|
│ ┌──────┐ ┌──────┐ │
|
|||
|
|
│ │ 封面 │ │ 封面 │ │
|
|||
|
|
│ │ 图片 │ │ 图片 │ │
|
|||
|
|
│ │ │ │ │ │ ← 瀑布流内容
|
|||
|
|
│ │ 标题 │ │ 标题 │ │
|
|||
|
|
│ │ 主播 │ │ 主播 │ │
|
|||
|
|
│ └──────┘ └──────┘ │
|
|||
|
|
│ ┌──────┐ ┌──────┐ │
|
|||
|
|
│ │ ... │ │ ... │ │
|
|||
|
|
└─────────────────────────────┘
|
|||
|
|
│ 🏠 🔍 ➕ 💬 👤 │ ← 底部导航
|
|||
|
|
└─────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 直播间卡片结构
|
|||
|
|
```
|
|||
|
|
┌─────────────────┐
|
|||
|
|
│ [直播中] 👁 123│ ← 标签和观看人数
|
|||
|
|
│ │
|
|||
|
|
│ 封面图片 │
|
|||
|
|
│ │
|
|||
|
|
│ │
|
|||
|
|
├─────────────────┤
|
|||
|
|
│ 直播间标题 │
|
|||
|
|
│ 👤 主播名称 [热] │ ← 主播信息
|
|||
|
|
└─────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🐛 已知问题
|
|||
|
|
|
|||
|
|
1. **封面图片**：当前使用默认图标，需要后端提供封面图 URL
|
|||
|
|
2. **主播头像**：当前使用默认图标，需要后端提供头像 URL
|
|||
|
|
3. **分类筛选**：UI已完成，但功能未实现
|
|||
|
|
4. **搜索功能**：UI已完成，但功能未实现
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🔄 如何恢复旧版 UI
|
|||
|
|
|
|||
|
|
如果需要恢复旧版 UI：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd android-app/app/src/main/res/layout
|
|||
|
|
Copy-Item activity_main_old.xml activity_main.xml -Force
|
|||
|
|
Copy-Item item_room_old.xml item_room.xml -Force
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
然后在 `MainActivity.java` 中：
|
|||
|
|
- 将 `WaterfallRoomsAdapter` 改回 `RoomsAdapter`
|
|||
|
|
- 将 `StaggeredGridLayoutManager` 改回 `LinearLayoutManager`
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📝 后续优化建议
|
|||
|
|
|
|||
|
|
### 1. 添加封面图支持
|
|||
|
|
- 后端返回封面图 URL
|
|||
|
|
- 使用 Glide 或 Picasso 加载图片
|
|||
|
|
|
|||
|
|
### 2. 实现分类筛选
|
|||
|
|
- 点击分类标签时筛选对应类型的直播间
|
|||
|
|
- 添加分类字段到 Room 模型
|
|||
|
|
|
|||
|
|
### 3. 实现搜索功能
|
|||
|
|
- 点击搜索框打开搜索页面
|
|||
|
|
- 支持搜索主播名称和直播间标题
|
|||
|
|
|
|||
|
|
### 4. 添加下拉刷新
|
|||
|
|
- 使用 SwipeRefreshLayout
|
|||
|
|
- 手动刷新直播间列表
|
|||
|
|
|
|||
|
|
### 5. 添加加载更多
|
|||
|
|
- 监听滚动到底部
|
|||
|
|
- 分页加载直播间数据
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**设计完成！现在可以编译运行查看新的 UI 效果了！** 🎉
|