# 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了！🎉