SDK_APP/UI_FIX_TEST_GUIDE.md

UI修复测试指南

🎯 修复内容

1. 图表隐藏功能 ✅

• 问题：ECG图表在启动时就显示，占用屏幕空间
• 解决：图表默认隐藏，只有在接收到数据时才显示
• 实现：

  android:visibility="gone"  <!-- 默认隐藏 -->
  

2. 设备选择对话框 ✅

• 问题：扫描完成后没有显示设备选择对话框
• 解决：确保onScanComplete回调正确显示对话框
• 实现：

  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. 布局文件修改

<!-- 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. 数据显示逻辑

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