let5see/post-ocr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 美化Android app UI，Material风格重设计

Browse Source 
- 新增深蓝工业风配色方案和圆角卡片/按钮样式
- 顶部标题栏带运行状态指示灯
- 按钮增加disabled灰色状态，启动/停止/拍照三色区分
- 状态卡片支持ScrollView滚动，内容不再截断
- monospace字体显示连接命令，提升可读性

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
let5sne.win10
2026-02-14 21:36:41 +08:00
parent d2bc33d8c4
commit b2ec97215f
9 changed files with 269 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
android-app/app/src/main/java/com/usbwebcam/MainActivity.kt
View File

@@ -103,6 +103,10 @@ class MainActivity : AppCompatActivity() {
text = "在电脑端浏览器打开上述地址即可查看画面"
visibility = View.VISIBLE
}
findViewById<TextView>(R.id.tv_indicator).apply {
text = "● 运行中"
setTextColor(getColor(R.color.status_running))
}
findViewById<Button>(R.id.btn_start).isEnabled = false
findViewById<Button>(R.id.btn_stop).isEnabled = true
}
@@ -120,6 +124,10 @@ class MainActivity : AppCompatActivity() {
runOnUiThread {
findViewById<TextView>(R.id.tv_status).text = "服务已停止"
findViewById<TextView>(R.id.tv_ip).visibility = View.GONE
findViewById<TextView>(R.id.tv_indicator).apply {
text = "⏸ 未启动"
setTextColor(getColor(R.color.status_stopped))
}
findViewById<Button>(R.id.btn_start).isEnabled = true
findViewById<Button>(R.id.btn_stop).isEnabled = false
}

10
android-app/app/src/main/res/drawable/bg_btn_capture.xml Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#40FFFFFF">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/accent_green" />
<corners android:radius="10dp" />
</shape>
</item>
</ripple>

20
android-app/app/src/main/res/drawable/bg_btn_danger.xml Normal file
View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#40FFFFFF">
<item>
<selector>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#B0BEC5" />
<corners android:radius="10dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="@color/accent_red" />
<corners android:radius="10dp" />
</shape>
</item>
</selector>
</item>
</ripple>

20
android-app/app/src/main/res/drawable/bg_btn_primary.xml Normal file
View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#40FFFFFF">
<item>
<selector>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#B0BEC5" />
<corners android:radius="10dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="@color/accent_blue" />
<corners android:radius="10dp" />
</shape>
</item>
</selector>
</item>
</ripple>

7
android-app/app/src/main/res/drawable/bg_card.xml Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/bg_card" />
<corners android:radius="12dp" />
<stroke android:width="1dp" android:color="@color/divider" />
</shape>

6
android-app/app/src/main/res/drawable/bg_header.xml Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/primary" />
<corners android:radius="12dp" />
</shape>

191
android-app/app/src/main/res/layout/activity_main.xml
View File

@@ -2,81 +2,152 @@
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="24dp"
android:background="#FAFAFA">
android:orientation="vertical"
android:background="@color/bg_main">
<!-- 左侧：状态信息 -->
<!-- 顶部标题栏 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:paddingEnd="24dp">
android:paddingHorizontal="20dp"
android:background="@drawable/bg_header">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="📷 USB 摄像头服务"
android:textSize="18sp"
android:textColor="@color/text_on_dark"
android:textStyle="bold" />
<TextView
android:id="@+id/tv_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="USB 摄像头服务"
android:textSize="22sp"
android:textColor="#212121"
android:textStyle="bold"
android:layout_marginBottom="16dp" />
<TextView
android:id="@+id/tv_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="等待启动..."
android:textSize="16sp"
android:textColor="#424242"
android:lineSpacingExtra="4dp"
android:background="#FFFFFF"
android:padding="16dp"
android:layout_marginBottom="16dp" />
<TextView
android:id="@+id/tv_ip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="⏸ 未启动"
android:textSize="13sp"
android:textColor="#757575"
android:visibility="gone" />
android:textColor="@color/status_stopped" />
</LinearLayout>
<!-- 右侧：按钮区 -->
<!-- 主内容区 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:padding="12dp">
<Button
android:id="@+id/btn_start"
android:layout_width="160dp"
android:layout_height="56dp"
android:text="启动服务"
android:textSize="18sp"
android:layout_marginBottom="12dp" />
<!-- 左侧：状态信息卡片 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginEnd="12dp">
<Button
android:id="@+id/btn_stop"
android:layout_width="160dp"
android:layout_height="56dp"
android:text="停止服务"
android:textSize="18sp"
android:enabled="false"
android:layout_marginBottom="24dp" />
<LinearLayout
style="@style/CardStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_capture"
android:layout_width="160dp"
android:layout_height="56dp"
android:text="拍照保存"
android:textSize="18sp"
android:backgroundTint="#4CAF50" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="服务状态"
android:textSize="12sp"
android:textColor="@color/text_secondary"
android:textStyle="bold"
android:textAllCaps="true"
android:letterSpacing="0.08"
android:layout_marginBottom="8dp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/divider"
android:layout_marginBottom="8dp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="等待启动..."
android:textSize="14sp"
android:textColor="@color/text_primary"
android:lineSpacingExtra="5dp"
android:fontFamily="monospace" />
<TextView
android:id="@+id/tv_ip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="@color/text_hint"
android:layout_marginTop="8dp"
android:visibility="gone" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</LinearLayout>
<!-- 右侧：操作按钮 -->
<LinearLayout
android:layout_width="180dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="@+id/btn_start"
style="@style/BtnPrimary"
android:layout_width="match_parent"
android:layout_height="52dp"
android:text="▶ 启动服务"
android:layout_marginBottom="10dp" />
<Button
android:id="@+id/btn_stop"
style="@style/BtnDanger"
android:layout_width="match_parent"
android:layout_height="52dp"
android:text="■ 停止服务"
android:enabled="false"
android:layout_marginBottom="24dp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/divider"
android:layout_marginBottom="24dp" />
<Button
android:id="@+id/btn_capture"
style="@style/BtnCapture"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="📸 拍照保存" />
</LinearLayout>
</LinearLayout>

34
android-app/app/src/main/res/values/colors.xml Normal file
View File

@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 主色调：深蓝工业风 -->
<color name="primary">#1B2838</color>
<color name="primary_dark">#0F1923</color>
<color name="primary_light">#2A3F56</color>
<!-- 强调色 -->
<color name="accent_green">#43A047</color>
<color name="accent_green_dark">#2E7D32</color>
<color name="accent_red">#E53935</color>
<color name="accent_red_dark">#C62828</color>
<color name="accent_blue">#1E88E5</color>
<color name="accent_blue_dark">#1565C0</color>
<!-- 背景 -->
<color name="bg_main">#ECEFF1</color>
<color name="bg_card">#FFFFFF</color>
<color name="bg_status_bar">#1B2838</color>
<!-- 文字 -->
<color name="text_primary">#212121</color>
<color name="text_secondary">#546E7A</color>
<color name="text_hint">#90A4AE</color>
<color name="text_on_dark">#ECEFF1</color>
<color name="text_on_primary">#FFFFFF</color>
<!-- 状态指示 -->
<color name="status_running">#43A047</color>
<color name="status_stopped">#90A4AE</color>
<!-- 分隔线 -->
<color name="divider">#CFD8DC</color>
</resources>

33
android-app/app/src/main/res/values/styles.xml Normal file
View File

@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 卡片样式 -->
<style name="CardStyle">
<item name="android:background">@drawable/bg_card</item>
<item name="android:padding">16dp</item>
</style>
<!-- 按钮基础样式 -->
<style name="BtnBase">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textAllCaps">false</item>
<item name="android:stateListAnimator">@null</item>
<item name="android:elevation">2dp</item>
</style>
<style name="BtnPrimary" parent="BtnBase">
<item name="android:background">@drawable/bg_btn_primary</item>
<item name="android:textColor">@color/text_on_primary</item>
</style>
<style name="BtnDanger" parent="BtnBase">
<item name="android:background">@drawable/bg_btn_danger</item>
<item name="android:textColor">@color/text_on_primary</item>
</style>
<style name="BtnCapture" parent="BtnBase">
<item name="android:background">@drawable/bg_btn_capture</item>
<item name="android:textColor">@color/text_on_primary</item>
<item name="android:textSize">18sp</item>
</style>
</resources>