fix: 按原型图精确换��所有尺寸(120dpi, 1dp=0.75px)

主页:时钟69sp, 日期20sp, 卡片数字43sp, 标签16sp
设置页:头像59dp/27sp, 姓名20sp, 手机号15sp, 信息行17sp
SafeArea: 21dp/27dp, 状态栏24dp
卡片圆角19dp, 内边距19/16dp
指示器: 圆点7dp, 活动19dp

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
dongliang
2026-04-27 19:32:15 +09:30
parent fdc2eaa5c9
commit 170e2a527e
6 changed files with 82 additions and 80 deletions

View File

@@ -3,5 +3,5 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android" <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"> android:shape="rectangle">
<solid android:color="#733B9EFF" /> <solid android:color="#733B9EFF" />
<corners android:radius="14dp" /> <corners android:radius="19dp" />
</shape> </shape>

View File

@@ -3,5 +3,5 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android" <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"> android:shape="rectangle">
<solid android:color="#734ADE80" /> <solid android:color="#734ADE80" />
<corners android:radius="14dp" /> <corners android:radius="19dp" />
</shape> </shape>

View File

@@ -3,5 +3,5 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android" <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"> android:shape="rectangle">
<solid android:color="#73FFB340" /> <solid android:color="#73FFB340" />
<corners android:radius="14dp" /> <corners android:radius="19dp" />
</shape> </shape>

View File

@@ -1,20 +1,21 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- 设置页ViewPager2 Page 0:状态栏 + 用户信息 + 设备信息 + 手表信息入口 --> <!-- 设置页ViewPager2 Page 0
屏幕密度 120dpi, 1dp=0.75px, 换算: px/0.75=dp -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:background="@color/background" android:background="@color/background"
android:orientation="vertical" android:orientation="vertical"
android:paddingStart="@dimen/safe_area_left" android:paddingStart="21dp"
android:paddingTop="@dimen/safe_area_top" android:paddingTop="27dp"
android:paddingEnd="@dimen/safe_area_right" android:paddingEnd="21dp"
android:paddingBottom="@dimen/safe_area_bottom"> android:paddingBottom="27dp">
<!-- 自定义状态栏 --> <!-- 状态栏 18px → 24dp -->
<com.xiaoqu.watch.ui.widget.StatusBarView <com.xiaoqu.watch.ui.widget.StatusBarView
android:id="@+id/statusBar" android:id="@+id/statusBar"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="18dp" /> android:layout_height="24dp" />
<!-- 可滚动内容区 --> <!-- 可滚动内容区 -->
<ScrollView <ScrollView
@@ -28,21 +29,21 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical"> android:orientation="vertical">
<!-- 用户信息区域(居中,可点击触发调试模式) --> <!-- 用户信息区域 -->
<LinearLayout <LinearLayout
android:id="@+id/userBlock" android:id="@+id/userBlock"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center" android:gravity="center"
android:orientation="vertical" android:orientation="vertical"
android:paddingTop="8dp" android:paddingTop="11dp"
android:paddingBottom="10dp"> android:paddingBottom="16dp">
<!-- 圆形头像(渐变背景 + 首字母) --> <!-- 头像 44px → 59dp, 字母 20px → 27sp -->
<FrameLayout <FrameLayout
android:layout_width="44dp" android:layout_width="59dp"
android:layout_height="44dp" android:layout_height="59dp"
android:layout_marginBottom="6dp"> android:layout_marginBottom="11dp">
<View <View
android:layout_width="match_parent" android:layout_width="match_parent"
@@ -55,12 +56,12 @@
android:layout_height="match_parent" android:layout_height="match_parent"
android:gravity="center" android:gravity="center"
android:textColor="@color/text_primary" android:textColor="@color/text_primary"
android:textSize="20sp" android:textSize="27sp"
android:textStyle="bold" /> android:textStyle="bold" />
</FrameLayout> </FrameLayout>
<!-- 姓名 --> <!-- 姓名 15px → 20sp -->
<TextView <TextView
android:id="@+id/tvUserName" android:id="@+id/tvUserName"
android:layout_width="wrap_content" android:layout_width="wrap_content"
@@ -69,42 +70,38 @@
android:textSize="20sp" android:textSize="20sp"
android:textStyle="bold" /> android:textStyle="bold" />
<!-- 手机号(脱敏) --> <!-- 手机号 11px → 15sp -->
<TextView <TextView
android:id="@+id/tvUserPhone" android:id="@+id/tvUserPhone"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:textColor="@color/text_secondary" android:textColor="@color/text_secondary"
android:textSize="14sp" android:textSize="15sp"
android:layout_marginTop="2dp" /> android:layout_marginTop="3dp" />
</LinearLayout> </LinearLayout>
<!-- 设备信息列表 --> <!-- 设备信息列表 13px → 17sp -->
<LinearLayout <LinearLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical"> android:orientation="vertical">
<!-- 设备型号 -->
<LinearLayout style="@style/ConfigRow"> <LinearLayout style="@style/ConfigRow">
<TextView style="@style/ConfigLabel" android:text="设备型号" /> <TextView style="@style/ConfigLabel" android:text="设备型号" />
<TextView android:id="@+id/tvModel" style="@style/ConfigValue" /> <TextView android:id="@+id/tvModel" style="@style/ConfigValue" />
</LinearLayout> </LinearLayout>
<!-- 系统版本 -->
<LinearLayout style="@style/ConfigRow"> <LinearLayout style="@style/ConfigRow">
<TextView style="@style/ConfigLabel" android:text="系统版本" /> <TextView style="@style/ConfigLabel" android:text="系统版本" />
<TextView android:id="@+id/tvOsVersion" style="@style/ConfigValue" /> <TextView android:id="@+id/tvOsVersion" style="@style/ConfigValue" />
</LinearLayout> </LinearLayout>
<!-- IMEI -->
<LinearLayout style="@style/ConfigRow"> <LinearLayout style="@style/ConfigRow">
<TextView style="@style/ConfigLabel" android:text="IMEI" /> <TextView style="@style/ConfigLabel" android:text="IMEI" />
<TextView android:id="@+id/tvImei" style="@style/ConfigValue" /> <TextView android:id="@+id/tvImei" style="@style/ConfigValue" />
</LinearLayout> </LinearLayout>
<!-- App 版本 -->
<LinearLayout style="@style/ConfigRow"> <LinearLayout style="@style/ConfigRow">
<TextView style="@style/ConfigLabel" android:text="App 版本" /> <TextView style="@style/ConfigLabel" android:text="App 版本" />
<TextView android:id="@+id/tvAppVersion" style="@style/ConfigValue" /> <TextView android:id="@+id/tvAppVersion" style="@style/ConfigValue" />
@@ -116,24 +113,24 @@
</ScrollView> </ScrollView>
<!-- 页面指示器 --> <!-- 页面指示器 dot 5px→7dp, active 14px→19dp -->
<LinearLayout <LinearLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center" android:gravity="center"
android:paddingTop="8dp"> android:paddingTop="13dp">
<View <View
android:id="@+id/indConfig0" android:id="@+id/indConfig0"
android:layout_width="14dp" android:layout_width="19dp"
android:layout_height="5dp" android:layout_height="7dp"
android:layout_marginEnd="5dp" android:layout_marginEnd="7dp"
android:background="@drawable/indicator_dot_active" /> android:background="@drawable/indicator_dot_active" />
<View <View
android:id="@+id/indConfig1" android:id="@+id/indConfig1"
android:layout_width="5dp" android:layout_width="7dp"
android:layout_height="5dp" android:layout_height="7dp"
android:background="@drawable/indicator_dot_inactive" /> android:background="@drawable/indicator_dot_inactive" />
</LinearLayout> </LinearLayout>

View File

@@ -1,23 +1,25 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- 主页ViewPager2 Page 1:状态栏 + 时钟 + 日期 + 快捷区 + 指示器 <!-- 主页ViewPager2 Page 1
屏幕 240×284px,用户群体老年人,字体尽可能大 --> 屏幕 240×284px, 密度 120dpi, 1dp=0.75px, 换算: px/0.75=dp
原型图 safe area: top20 left16 right16 bottom20 → dp: 27 21 21 27 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:background="@color/background" android:background="@color/background"
android:orientation="vertical" android:orientation="vertical"
android:paddingStart="10dp" android:paddingStart="21dp"
android:paddingTop="14dp" android:paddingTop="27dp"
android:paddingEnd="10dp" android:paddingEnd="21dp"
android:paddingBottom="10dp"> android:paddingBottom="27dp">
<!-- 自定义状态栏 --> <!-- 状态栏 18px → 24dp -->
<com.xiaoqu.watch.ui.widget.StatusBarView <com.xiaoqu.watch.ui.widget.StatusBarView
android:id="@+id/statusBar" android:id="@+id/statusBar"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="16dp" /> android:layout_height="24dp"
android:layout_marginBottom="3dp" />
<!-- 时钟区域(居中撑满 --> <!-- 时钟区域(flex:1 撑满中间 -->
<LinearLayout <LinearLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="0dp" android:layout_height="0dp"
@@ -25,59 +27,62 @@
android:gravity="center" android:gravity="center"
android:orientation="vertical"> android:orientation="vertical">
<!-- 时钟 HH:mm原型图 52px占屏幕 21.7% --> <!-- 时钟 52px → 69sp -->
<TextView <TextView
android:id="@+id/tvClock" android:id="@+id/tvClock"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="14:30" android:text="14:30"
android:textColor="@color/text_primary" android:textColor="@color/text_primary"
android:textSize="80sp" android:textSize="69sp"
android:fontFamily="sans-serif-light" android:fontFamily="sans-serif-medium"
android:letterSpacing="0.02" android:letterSpacing="0.02"
android:includeFontPadding="false" /> android:includeFontPadding="false" />
<!-- 日期 + 星期(原型图 15px --> <!-- 日期 15px → 20sp -->
<TextView <TextView
android:id="@+id/tvDate" android:id="@+id/tvDate"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="4月23日 周三" android:text="4月23日 周三"
android:textColor="@color/text_primary" android:textColor="@color/text_primary"
android:textSize="24sp" android:textSize="20sp"
android:layout_marginTop="4dp" /> android:fontFamily="sans-serif-medium"
android:layout_marginTop="11dp" />
</LinearLayout> </LinearLayout>
<!-- 快捷区3 个彩色卡片(原型图 padding 14px数字 32px标签 12px --> <!-- 快捷区 gap:6px→8dp -->
<LinearLayout <LinearLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="horizontal"> android:orientation="horizontal">
<!-- 接单池(蓝色) --> <!-- 接单池(蓝色)padding top14→19, bottom12→16, radius14→19 -->
<LinearLayout <LinearLayout
android:id="@+id/cardPool" android:id="@+id/cardPool"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:layout_weight="1"
android:layout_marginEnd="3dp" android:layout_marginEnd="4dp"
android:background="@drawable/bg_quick_blue" android:background="@drawable/bg_quick_blue"
android:gravity="center" android:gravity="center"
android:orientation="vertical" android:orientation="vertical"
android:paddingTop="10dp" android:paddingTop="19dp"
android:paddingBottom="8dp"> android:paddingBottom="16dp">
<!-- 数字 32px → 43sp -->
<TextView <TextView
android:id="@+id/tvPoolNum" android:id="@+id/tvPoolNum"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="0" android:text="0"
android:textColor="@color/primary" android:textColor="@color/primary"
android:textSize="42sp" android:textSize="43sp"
android:textStyle="bold" android:textStyle="bold"
android:includeFontPadding="false" /> android:includeFontPadding="false" />
<!-- 标签 12px → 16sp -->
<TextView <TextView
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
@@ -85,7 +90,7 @@
android:textColor="@color/text_primary" android:textColor="@color/text_primary"
android:textSize="16sp" android:textSize="16sp"
android:textStyle="bold" android:textStyle="bold"
android:layout_marginTop="2dp" /> android:layout_marginTop="8dp" />
</LinearLayout> </LinearLayout>
<!-- 待打卡(橙色) --> <!-- 待打卡(橙色) -->
@@ -94,13 +99,13 @@
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:layout_weight="1"
android:layout_marginStart="2dp" android:layout_marginStart="4dp"
android:layout_marginEnd="2dp" android:layout_marginEnd="4dp"
android:background="@drawable/bg_quick_orange" android:background="@drawable/bg_quick_orange"
android:gravity="center" android:gravity="center"
android:orientation="vertical" android:orientation="vertical"
android:paddingTop="10dp" android:paddingTop="19dp"
android:paddingBottom="8dp"> android:paddingBottom="16dp">
<TextView <TextView
android:id="@+id/tvPunchNum" android:id="@+id/tvPunchNum"
@@ -108,7 +113,7 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="0" android:text="0"
android:textColor="@color/warning" android:textColor="@color/warning"
android:textSize="42sp" android:textSize="43sp"
android:textStyle="bold" android:textStyle="bold"
android:includeFontPadding="false" /> android:includeFontPadding="false" />
@@ -119,7 +124,7 @@
android:textColor="@color/text_primary" android:textColor="@color/text_primary"
android:textSize="16sp" android:textSize="16sp"
android:textStyle="bold" android:textStyle="bold"
android:layout_marginTop="2dp" /> android:layout_marginTop="8dp" />
</LinearLayout> </LinearLayout>
<!-- 待完成(绿色) --> <!-- 待完成(绿色) -->
@@ -128,12 +133,12 @@
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:layout_weight="1"
android:layout_marginStart="3dp" android:layout_marginStart="4dp"
android:background="@drawable/bg_quick_green" android:background="@drawable/bg_quick_green"
android:gravity="center" android:gravity="center"
android:orientation="vertical" android:orientation="vertical"
android:paddingTop="10dp" android:paddingTop="19dp"
android:paddingBottom="8dp"> android:paddingBottom="16dp">
<TextView <TextView
android:id="@+id/tvCompleteNum" android:id="@+id/tvCompleteNum"
@@ -141,7 +146,7 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="0" android:text="0"
android:textColor="@color/success" android:textColor="@color/success"
android:textSize="42sp" android:textSize="43sp"
android:textStyle="bold" android:textStyle="bold"
android:includeFontPadding="false" /> android:includeFontPadding="false" />
@@ -152,29 +157,29 @@
android:textColor="@color/text_primary" android:textColor="@color/text_primary"
android:textSize="16sp" android:textSize="16sp"
android:textStyle="bold" android:textStyle="bold"
android:layout_marginTop="2dp" /> android:layout_marginTop="8dp" />
</LinearLayout> </LinearLayout>
</LinearLayout> </LinearLayout>
<!-- 页面指示器 --> <!-- 页面指示器 margin-top:10px→13dp -->
<LinearLayout <LinearLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center" android:gravity="center"
android:paddingTop="6dp"> android:paddingTop="13dp">
<View <View
android:id="@+id/indMain0" android:id="@+id/indMain0"
android:layout_width="5dp" android:layout_width="7dp"
android:layout_height="5dp" android:layout_height="7dp"
android:layout_marginEnd="5dp" android:layout_marginEnd="7dp"
android:background="@drawable/indicator_dot_inactive" /> android:background="@drawable/indicator_dot_inactive" />
<View <View
android:id="@+id/indMain1" android:id="@+id/indMain1"
android:layout_width="14dp" android:layout_width="19dp"
android:layout_height="5dp" android:layout_height="7dp"
android:background="@drawable/indicator_dot_active" /> android:background="@drawable/indicator_dot_active" />
</LinearLayout> </LinearLayout>

View File

@@ -48,25 +48,25 @@
<item name="android:layout_height">wrap_content</item> <item name="android:layout_height">wrap_content</item>
<item name="android:orientation">horizontal</item> <item name="android:orientation">horizontal</item>
<item name="android:gravity">center_vertical</item> <item name="android:gravity">center_vertical</item>
<item name="android:paddingTop">8dp</item> <item name="android:paddingTop">13dp</item>
<item name="android:paddingBottom">8dp</item> <item name="android:paddingBottom">13dp</item>
</style> </style>
<!-- 设置页标签(左侧) --> <!-- 设置页标签 13px→17sp -->
<style name="ConfigLabel"> <style name="ConfigLabel">
<item name="android:layout_width">0dp</item> <item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item> <item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item> <item name="android:layout_weight">1</item>
<item name="android:textColor">@color/text_secondary</item> <item name="android:textColor">@color/text_secondary</item>
<item name="android:textSize">16sp</item> <item name="android:textSize">17sp</item>
</style> </style>
<!-- 设置页值(右侧) --> <!-- 设置页值 13px→17sp -->
<style name="ConfigValue"> <style name="ConfigValue">
<item name="android:layout_width">wrap_content</item> <item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item> <item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/text_primary</item> <item name="android:textColor">@color/text_primary</item>
<item name="android:textSize">16sp</item> <item name="android:textSize">17sp</item>
<item name="android:textStyle">bold</item> <item name="android:textStyle">bold</item>
</style> </style>
</resources> </resources>