6.4 KiB
6.4 KiB
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. 清理项目
cd android-app
gradlew clean
2. 编译
gradlew assembleDebug
3. 安装到模拟器
gradlew installDebug
或者在 Android Studio 中直接点击 ▶️ Run
📸 布局预览
主界面结构
┌─────────────────────────────┐
│ ☰ 关注 发现 附近 ✉ 🔔 │ ← 顶部导航
├─────────────────────────────┤
│ 🔍 搜索主播/房间/标签 🎤 │ ← 搜索栏
├─────────────────────────────┤
│ [推荐][颜值][才艺][户外]... │ ← 分类标签
├─────────────────────────────┤
│ ┌──────┐ ┌──────┐ │
│ │ 封面 │ │ 封面 │ │
│ │ 图片 │ │ 图片 │ │
│ │ │ │ │ │ ← 瀑布流内容
│ │ 标题 │ │ 标题 │ │
│ │ 主播 │ │ 主播 │ │
│ └──────┘ └──────┘ │
│ ┌──────┐ ┌──────┐ │
│ │ ... │ │ ... │ │
└─────────────────────────────┘
│ 🏠 🔍 ➕ 💬 👤 │ ← 底部导航
└─────────────────────────────┘
直播间卡片结构
┌─────────────────┐
│ [直播中] 👁 123│ ← 标签和观看人数
│ │
│ 封面图片 │
│ │
│ │
├─────────────────┤
│ 直播间标题 │
│ 👤 主播名称 [热] │ ← 主播信息
└─────────────────┘
🐛 已知问题
- 封面图片：当前使用默认图标，需要后端提供封面图 URL
- 主播头像：当前使用默认图标，需要后端提供头像 URL
- 分类筛选：UI已完成，但功能未实现
- 搜索功能：UI已完成，但功能未实现
🔄 如何恢复旧版 UI
如果需要恢复旧版 UI：
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 效果了！ 🎉