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,38 +334,45 @@ class HomeFragment : BaseFragment<FragmentHomeBinding>() {
}
}
/** 设置下拉手势 → 进入考勤打卡页(在状态栏区域检测) */
/**
* 设置下拉手势 → 进入考勤打卡页
* 触摸区域上半屏140dp只拦截垂直下拉水平滑动透传给 ViewPager2
*/
@android.annotation.SuppressLint("ClickableViewAccessibility")
private fun setupPullDownGesture() {
val gestureDetector = android.view.GestureDetector(
requireContext(),
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
}
var startY = 0f
var startX = 0f
override fun onDown(e: android.view.MotionEvent): Boolean = true
}
)
// 在状态栏上方的触摸区域检测下拉(不被 ViewPager2 拦截)
binding.pullDownArea.setOnTouchListener { _, event ->
gestureDetector.onTouchEvent(event)
when (event.action) {
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
}
}
}
/** 跳转到考勤打卡页 */
private fun navigateToPunch() {

View File

@@ -6,6 +6,7 @@ import android.view.View
import android.view.ViewGroup
import android.widget.FrameLayout
import androidx.lifecycle.lifecycleScope
import androidx.navigation.fragment.findNavController
import com.xiaoqu.watch.R
import com.xiaoqu.watch.data.punch.PunchStatus
import com.xiaoqu.watch.databinding.FragmentPunchBinding
@@ -71,6 +72,9 @@ class PunchFragment : BaseFragment<FragmentPunchBinding>() {
// 获取考勤状态
fetchAttendance()
// 上滑返回手势
setupSwipeUpToBack()
// 监听系统状态事件
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,30 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 首页容器:固定状态栏 + ViewPager2 左右滑动 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<!-- 首页容器:状态栏 + ViewPager2 + 下拉触摸层(上半屏) -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background">
<!-- 底层:状态栏 + ViewPager2 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background"
android:orientation="vertical"
android:paddingStart="21dp"
android:paddingTop="27dp"
android:paddingEnd="21dp">
<!-- 固定状态栏(不随 ViewPager2 滑动)+ 下拉触摸区域 -->
<FrameLayout
android:id="@+id/pullDownArea"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="3dp">
<!-- 固定状态栏 -->
<com.xiaoqu.watch.ui.widget.StatusBarView
android:id="@+id/statusBar"
android:layout_width="match_parent"
android:layout_height="24dp"
android:layout_gravity="center_vertical" />
android:layout_marginBottom="3dp" />
</FrameLayout>
<!-- ViewPager2 在状态栏下方滑动 -->
<!-- ViewPager2 -->
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
@@ -32,3 +29,12 @@
android:layout_weight="1" />
</LinearLayout>
<!-- 上层:下拉触摸区域(上半屏,透明,不拦截水平滑动) -->
<View
android:id="@+id/pullDownArea"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_gravity="top" />
</FrameLayout>

View File

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