feat: 绑定页UI对齐原型图V3
- 二维码页面：标题移到上方，白色圆角背景框，说明文字居中 - 新增配对中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
7
app/src/main/res/drawable/bg_qr_frame.xml
Normal file
7
app/src/main/res/drawable/bg_qr_frame.xml
Normal 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="#FFFFFF" />
|
||||
<corners android:radius="16dp" />
|
||||
</shape>
|
||||
@@ -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>
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
<!-- 全局背景 -->
|
||||
<color name="background">#FF000000</color>
|
||||
|
||||
<!-- 主题色 -->
|
||||
<color name="primary">#FF007AFF</color>
|
||||
<color name="action_primary">#FF339AFB</color>
|
||||
<!-- 主题色（对齐原型图 V3） -->
|
||||
<color name="primary">#FF3B9EFF</color>
|
||||
<color name="action_primary">#FF3B9EFF</color>
|
||||
|
||||
<!-- 状态色 -->
|
||||
<color name="success">#FF1CC46B</color>
|
||||
<color name="warning">#FFEB9A26</color>
|
||||
<color name="error">#FFDA5050</color>
|
||||
<!-- 状态色（对齐原型图 V3） -->
|
||||
<color name="success">#FF4ADE80</color>
|
||||
<color name="warning">#FFFFB340</color>
|
||||
<color name="error">#FFFF6B6B</color>
|
||||
|
||||
<!-- 按钮色 -->
|
||||
<color name="grey_button">#FF666666</color>
|
||||
|
||||
Reference in New Issue
Block a user