shumeng/xqwatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 绑定页UI对齐原型图V3

Browse Source 
- 二维码页面：标题移到上方，白色圆角背景框，说明文字居中
- 新增配对中Loading状态（spinner + "正在配对…"）
- 颜色值对齐原型图（blue=#3B9EFF, green=#4ADE80, orange=#FFB340, red=#FF6B6B）
- 新增 bg_qr_frame.xml 白色圆角背景

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
dongliang
2026-04-27 16:46:59 +09:30
parent cd49471a15
commit d06bf11b95
4 changed files with 126 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
app/src/main/res/layout/fragment_bind.xml
View File

@@ -1,45 +1,83 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- BindFragment：二维码配对页面（全屏，无 NavBar） -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<!-- BindFragment：二维码配对页面（全屏，无 NavBar）
两种状态：qrWrap=二维码展示, loadingWrap=配对中 -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background"
android:gravity="center"
android:orientation="vertical"
android:padding="@dimen/safe_area_left">
android:background="@color/background">
<!-- 二维码图片 -->
<ImageView
android:id="@+id/ivQrCode"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_marginBottom="@dimen/spacing_lg"
android:contentDescription="配对二维码" />
<!-- 状态1：二维码展示（默认显示） -->
<LinearLayout
android:id="@+id/qrWrap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="@dimen/safe_area_left">
<!-- 标题 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="扫码绑定手表"
android:textColor="@color/text_primary"
android:textSize="@dimen/text_title"
android:textStyle="bold"
android:layout_marginBottom="@dimen/spacing_md" />
<!-- 标题（在二维码上方） -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="扫码配对"
android:textColor="@color/text_primary"
android:textSize="@dimen/text_title"
android:textStyle="bold"
android:layout_marginBottom="@dimen/spacing_lg" />
<!-- 说明文字 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1. 下载小趣智品APP"
android:textColor="@color/text_secondary"
android:textSize="@dimen/text_caption"
android:layout_marginBottom="@dimen/spacing_xs" />
<!-- 二维码白色圆角背景框 -->
<FrameLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:background="@drawable/bg_qr_frame"
android:padding="10dp"
android:layout_marginBottom="@dimen/spacing_md">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2. 在APP中扫此码添加手表"
android:textColor="@color/text_secondary"
android:textSize="@dimen/text_caption" />
<!-- 二维码图片 -->
<ImageView
android:id="@+id/ivQrCode"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="配对二维码"
android:scaleType="fitCenter" />
</LinearLayout>
</FrameLayout>
<!-- 说明文字 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:lineSpacingMultiplier="1.7"
android:text="扫码下载小趣智慧清洁App\n在App中扫码添加手表"
android:textColor="@color/text_secondary"
android:textSize="@dimen/text_small" />
</LinearLayout>
<!-- 状态2：配对中（默认隐藏） -->
<LinearLayout
android:id="@+id/loadingWrap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">
<!-- Loading spinner -->
<ProgressBar
android:layout_width="32dp"
android:layout_height="32dp"
android:indeterminateTint="@color/text_secondary"
android:layout_marginBottom="@dimen/spacing_md" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="正在配对…"
android:textColor="@color/text_secondary"
android:textSize="@dimen/text_caption" />
</LinearLayout>
</FrameLayout>