183 lines
6.5 KiB
Markdown
183 lines
6.5 KiB
Markdown
# UI修复测试指南
|
||
|
||
## 🎯 修复内容
|
||
|
||
### 1. 图表隐藏功能 ✅
|
||
- **问题**：ECG图表在启动时就显示，占用屏幕空间
|
||
- **解决**：图表默认隐藏，只有在接收到数据时才显示
|
||
- **实现**：
|
||
```xml
|
||
android:visibility="gone" <!-- 默认隐藏 -->
|
||
```
|
||
|
||
### 2. 设备选择对话框 ✅
|
||
- **问题**：扫描完成后没有显示设备选择对话框
|
||
- **解决**：确保`onScanComplete`回调正确显示对话框
|
||
- **实现**：
|
||
```kotlin
|
||
override fun onScanComplete(devices: List<BluetoothDevice>) {
|
||
if (devices.isNotEmpty()) {
|
||
val dialog = BluetoothDeviceDialog.newInstance(devices)
|
||
dialog.show(supportFragmentManager, "BluetoothDeviceDialog")
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📱 现在的UI布局
|
||
|
||
### 启动时的界面
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ [连接蓝牙] [启动程序] │
|
||
│ [停止程序] [陷波滤波] │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ 状态信息区域 │
|
||
│ [应用已就绪，可以开始使用] │
|
||
│ [权限状态信息] │
|
||
│ [点击"连接蓝牙"按钮开始蓝牙连接...] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 有数据时的界面
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ [连接蓝牙] [启动程序] │
|
||
│ [停止程序] [陷波滤波] │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ ECG实时监测 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ [实时ECG曲线图] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ [详细ECG波形图] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────┘
|
||
┌─────────────────────────────────────────┐
|
||
│ 状态信息区域 │
|
||
│ [蓝牙状态信息] │
|
||
│ [数据处理状态] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
## 🚀 测试步骤
|
||
|
||
### 第一步：验证启动界面
|
||
1. **启动应用**
|
||
2. **确认界面**：
|
||
- ✅ 只显示按钮区域和状态信息区域
|
||
- ✅ ECG图表区域完全隐藏
|
||
- ✅ 按钮没有超出屏幕边界
|
||
|
||
### 第二步：测试蓝牙扫描
|
||
1. **点击"连接蓝牙"按钮**
|
||
2. **观察扫描过程**：
|
||
```
|
||
蓝牙状态: 正在扫描蓝牙设备...
|
||
发现设备: [设备名称] ([地址])
|
||
发现设备: [设备名称] ([地址])
|
||
```
|
||
|
||
### 第三步：验证设备选择对话框
|
||
1. **扫描完成后**：
|
||
- ✅ 应该弹出设备选择对话框
|
||
- ✅ 显示所有发现的设备列表
|
||
- ✅ 每个设备显示名称和地址
|
||
|
||
### 第四步：测试设备连接
|
||
1. **选择任意设备**：
|
||
- 点击设备名称
|
||
- 观察连接过程
|
||
2. **验证连接状态**：
|
||
- 按钮文字变为"断开蓝牙"
|
||
- 按钮颜色变为红色
|
||
|
||
### 第五步：测试数据显示
|
||
1. **连接成功后点击"启动程序"**
|
||
2. **观察图表显示**：
|
||
- ✅ ECG图表区域应该出现
|
||
- ✅ 显示实时数据曲线
|
||
- ✅ 界面布局合理，不超出屏幕
|
||
|
||
## 🔧 关键代码修改
|
||
|
||
### 1. 布局文件修改
|
||
```xml
|
||
<!-- ECG图表区域 -->
|
||
<LinearLayout
|
||
android:id="@+id/ecg_chart_container"
|
||
android:layout_width="match_parent"
|
||
android:layout_height="0dp"
|
||
android:layout_weight="0.7"
|
||
android:orientation="vertical"
|
||
android:background="#F8F8F8"
|
||
android:visibility="gone"> <!-- 默认隐藏 -->
|
||
```
|
||
|
||
### 2. 数据显示逻辑
|
||
```kotlin
|
||
override fun onDataReceived(data: ByteArray) {
|
||
runOnUiThread {
|
||
updateStatus("接收到蓝牙数据: ${data.size} 字节")
|
||
dataManager.onBleNotify(data)
|
||
|
||
// 显示ECG图表
|
||
binding.ecgChartContainer.visibility = View.VISIBLE
|
||
}
|
||
}
|
||
|
||
override fun onProcessedDataAvailable(channelIndex: Int, processedData: List<Float>) {
|
||
if (channelIndex == 0) {
|
||
try {
|
||
// 显示ECG图表
|
||
binding.ecgChartContainer.visibility = View.VISIBLE
|
||
|
||
binding.ecgRhythmView.updateData(processedData)
|
||
binding.ecgWaveformView.updateData(processedData)
|
||
} catch (e: Exception) {
|
||
Log.e("MainActivity", "处理实时数据失败: ${e.message}", e)
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
### 1. 设备选择对话框
|
||
- 确保`BluetoothDeviceDialog.kt`文件存在
|
||
- 确保对话框正确显示设备列表
|
||
- 确保点击设备后能正确连接
|
||
|
||
### 2. 图表显示时机
|
||
- 图表只在有数据时才显示
|
||
- 蓝牙数据接收时显示
|
||
- 处理后的数据更新时显示
|
||
|
||
### 3. 界面适配
|
||
- 按钮布局适应不同屏幕尺寸
|
||
- 图表区域合理分配空间
|
||
- 状态信息区域保持可见
|
||
|
||
## 🎉 预期效果
|
||
|
||
### 启动时：
|
||
- ✅ 界面简洁，只显示必要元素
|
||
- ✅ 按钮布局合理，不超出屏幕
|
||
- ✅ 状态信息清晰可见
|
||
|
||
### 扫描时：
|
||
- ✅ 显示扫描进度和设备发现信息
|
||
- ✅ 扫描完成后弹出设备选择对话框
|
||
|
||
### 连接后：
|
||
- ✅ 显示连接状态
|
||
- ✅ 可以启动数据处理
|
||
|
||
### 有数据时：
|
||
- ✅ ECG图表自动显示
|
||
- ✅ 实时更新数据曲线
|
||
- ✅ 界面布局完整合理
|
||
|
||
现在可以测试修复后的UI了！🎉
|