fix: 考勤页面优化

1. 下拉区域扩大到上半屏(140dp),只拦截垂直不拦截水平
2. 考勤页布局优化:居中考勤状态+按钮+低耗电提示
3. 按钮固定宽度250dp,更美观
4. 添加上滑返回手势(考勤页上滑回首页)
5. 去掉底部"上滑返回"文字(已有手势)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
dongliang
2026-04-28 19:53:04 +09:30
parent b59fee4bb7
commit d9ee5f2059
4 changed files with 103 additions and 73 deletions

View File

@@ -334,36 +334,43 @@ class HomeFragment : BaseFragment<FragmentHomeBinding>() {
} }
} }
/** 设置下拉手势 → 进入考勤打卡页(在状态栏区域检测) */ /**
* 设置下拉手势 → 进入考勤打卡页
* 触摸区域上半屏140dp只拦截垂直下拉水平滑动透传给 ViewPager2
*/
@android.annotation.SuppressLint("ClickableViewAccessibility") @android.annotation.SuppressLint("ClickableViewAccessibility")
private fun setupPullDownGesture() { private fun setupPullDownGesture() {
val gestureDetector = android.view.GestureDetector( var startY = 0f
requireContext(), var startX = 0f
object : android.view.GestureDetector.SimpleOnGestureListener() {
override fun onFling(
e1: android.view.MotionEvent?,
e2: android.view.MotionEvent,
velocityX: Float,
velocityY: Float
): Boolean {
if (e1 == null) return false
val dy = e2.y - e1.y
// 下拉手势dy > 0 且速度 > 0
if (dy > 30 && velocityY > 100) {
navigateToPunch()
return true
}
return false
}
override fun onDown(e: android.view.MotionEvent): Boolean = true
}
)
// 在状态栏上方的触摸区域检测下拉(不被 ViewPager2 拦截)
binding.pullDownArea.setOnTouchListener { _, event -> binding.pullDownArea.setOnTouchListener { _, event ->
gestureDetector.onTouchEvent(event) when (event.action) {
true android.view.MotionEvent.ACTION_DOWN -> {
startY = event.y
startX = event.x
true // 拦截 DOWN
}
android.view.MotionEvent.ACTION_MOVE -> {
val dy = event.y - startY
val dx = event.x - startX
// 如果水平滑动幅度 > 垂直 → 不拦截,透传给 ViewPager2
if (kotlin.math.abs(dx) > kotlin.math.abs(dy) + 10) {
false
} else {
true
}
}
android.view.MotionEvent.ACTION_UP -> {
val dy = event.y - startY
val dx = event.x - startX
// 下拉dy > 50且垂直幅度 > 水平
if (dy > 50 && kotlin.math.abs(dy) > kotlin.math.abs(dx)) {
navigateToPunch()
}
true
}
else -> false
}
} }
} }

View File

@@ -6,6 +6,7 @@ import android.view.View
import android.view.ViewGroup import android.view.ViewGroup
import android.widget.FrameLayout import android.widget.FrameLayout
import androidx.lifecycle.lifecycleScope import androidx.lifecycle.lifecycleScope
import androidx.navigation.fragment.findNavController
import com.xiaoqu.watch.R import com.xiaoqu.watch.R
import com.xiaoqu.watch.data.punch.PunchStatus import com.xiaoqu.watch.data.punch.PunchStatus
import com.xiaoqu.watch.databinding.FragmentPunchBinding import com.xiaoqu.watch.databinding.FragmentPunchBinding
@@ -71,6 +72,9 @@ class PunchFragment : BaseFragment<FragmentPunchBinding>() {
// 获取考勤状态 // 获取考勤状态
fetchAttendance() fetchAttendance()
// 上滑返回手势
setupSwipeUpToBack()
// 监听系统状态事件 // 监听系统状态事件
observeEvents() observeEvents()
} }
@@ -310,4 +314,28 @@ class PunchFragment : BaseFragment<FragmentPunchBinding>() {
} }
} }
} }
/** 上滑返回首页 */
@android.annotation.SuppressLint("ClickableViewAccessibility")
private fun setupSwipeUpToBack() {
var startY = 0f
binding.contentArea.setOnTouchListener { _, event ->
when (event.action) {
android.view.MotionEvent.ACTION_DOWN -> {
startY = event.y
true
}
android.view.MotionEvent.ACTION_UP -> {
val dy = event.y - startY
// 上滑dy < -50→ 返回
if (dy < -50) {
findNavController().popBackStack()
}
true
}
else -> true
}
}
}
} }

View File

@@ -1,34 +1,40 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- 首页容器:固定状态栏 + ViewPager2 左右滑动 --> <!-- 首页容器:状态栏 + ViewPager2 + 下拉触摸层(上半屏) -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" <FrameLayout 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:paddingStart="21dp"
android:paddingTop="27dp"
android:paddingEnd="21dp">
<!-- 固定状态栏(不随 ViewPager2 滑动)+ 下拉触摸区域 --> <!-- 底层:状态栏 + ViewPager2 -->
<FrameLayout <LinearLayout
android:id="@+id/pullDownArea"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="40dp" android:layout_height="match_parent"
android:layout_marginBottom="3dp"> android:orientation="vertical"
android:paddingStart="21dp"
android:paddingTop="27dp"
android:paddingEnd="21dp">
<!-- 固定状态栏 -->
<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="24dp" android:layout_height="24dp"
android:layout_gravity="center_vertical" /> android:layout_marginBottom="3dp" />
</FrameLayout> <!-- ViewPager2 -->
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<!-- ViewPager2 在状态栏下方滑动 --> </LinearLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager" <!-- 上层:下拉触摸区域(上半屏,透明,不拦截水平滑动) -->
<View
android:id="@+id/pullDownArea"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="0dp" android:layout_height="140dp"
android:layout_weight="1" /> android:layout_gravity="top" />
</LinearLayout> </FrameLayout>

View File

@@ -1,7 +1,8 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- 考勤打卡页面按原型图V3适老化设计 <!-- 考勤打卡页面按原型图V3
3种状态未上班 / 已上班 / 已下班 顶部:状态栏
120dpi 换算,老年人大字体 --> 中间:时间 + 考勤状态 + 按钮
底部:低耗电提示 -->
<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"
@@ -17,8 +18,9 @@
android:layout_marginTop="27dp" android:layout_marginTop="27dp"
android:layout_marginEnd="21dp" /> android:layout_marginEnd="21dp" />
<!-- 居中内容区 --> <!-- 居中内容区(可上滑返回) -->
<LinearLayout <LinearLayout
android:id="@+id/contentArea"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="0dp" android:layout_height="0dp"
android:layout_weight="1" android:layout_weight="1"
@@ -27,30 +29,28 @@
android:paddingStart="21dp" android:paddingStart="21dp"
android:paddingEnd="21dp"> android:paddingEnd="21dp">
<!-- 考勤状态文字"未上班" / "已上班 07:02" / "已下班 17:05" --> <!-- 考勤状态("未上班" / "已上班 07:02" / "已下班 17:05" -->
<TextView <TextView
android:id="@+id/tvPunchStatus" android:id="@+id/tvPunchStatus"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:textSize="28sp" android:textSize="26sp"
android:textStyle="bold" /> android:layout_marginBottom="27dp" />
<!-- 按钮区域 --> <!-- 按钮区域 -->
<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:orientation="vertical" android:orientation="vertical">
android:layout_marginTop="27dp">
<!-- 主按钮(上班打卡 / 下班打卡) --> <!-- 主按钮(上班打卡 / 下班打卡) -->
<TextView <TextView
android:id="@+id/btnPunch" android:id="@+id/btnPunch"
android:layout_width="match_parent" android:layout_width="250dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center" android:gravity="center"
android:padding="16dp" android:padding="16dp"
android:background="@color/primary"
android:textColor="@color/text_primary" android:textColor="@color/text_primary"
android:textSize="26sp" android:textSize="26sp"
android:textStyle="bold" /> android:textStyle="bold" />
@@ -58,14 +58,13 @@
<!-- 撤销按钮(已上班+已下班时显示) --> <!-- 撤销按钮(已上班+已下班时显示) -->
<TextView <TextView
android:id="@+id/btnRevoke" android:id="@+id/btnRevoke"
android:layout_width="match_parent" android:layout_width="250dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center" android:gravity="center"
android:padding="16dp" android:padding="14dp"
android:background="@color/grey_button" android:background="@color/grey_button"
android:textColor="@color/error" android:textColor="@color/error"
android:textSize="22sp" android:textSize="22sp"
android:textStyle="bold"
android:text="撤销打卡" android:text="撤销打卡"
android:layout_marginTop="11dp" android:layout_marginTop="11dp"
android:visibility="gone" /> android:visibility="gone" />
@@ -87,7 +86,7 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="低耗电模式" android:text="低耗电模式"
android:textColor="@color/warning" android:textColor="@color/warning"
android:textSize="20sp" android:textSize="22sp"
android:textStyle="bold" /> android:textStyle="bold" />
<TextView <TextView
@@ -95,7 +94,7 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="蓝牙扫描已停止\nNFC 已关闭" android:text="蓝牙扫描已停止\nNFC 已关闭"
android:textColor="@color/text_secondary" android:textColor="@color/text_secondary"
android:textSize="16sp" android:textSize="18sp"
android:gravity="center" android:gravity="center"
android:lineSpacingMultiplier="1.5" android:lineSpacingMultiplier="1.5"
android:layout_marginTop="8dp" /> android:layout_marginTop="8dp" />
@@ -104,14 +103,4 @@
</LinearLayout> </LinearLayout>
<!-- 底部提示(上滑返回) -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="上滑返回"
android:textColor="@color/text_secondary"
android:textSize="16sp"
android:paddingBottom="27dp" />
</LinearLayout> </LinearLayout>