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 效果了！** 🎉
|