如何在来电布局中实现原生Android式上下滑动Action Button功能

要实现原生Android来电界面的上下滑动操作按钮效果，优先使用ViewDragHelper实现拖拽逻辑，不需要手动处理复杂的触摸事件计算，实现成本低且交互流畅度和原生效果一致。

核心实现思路 #

限制中间按钮仅可垂直方向拖拽，设置滑动阈值，拖拽距离超过阈值时触发对应操作，松手后未达阈值自动回弹到初始位置，拖拽过程可同步做图标透明度、缩放等过渡动画匹配原生效果。

具体实现代码 #

自定义滑动操作控件（Kotlin） #

class SlideActionButton @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {

    private lateinit var centerBtn: View
    private var initialY = 0f
    // 触发操作的滑动阈值，可自行调整，此处为控件高度的30%
    private val dragThreshold: Float get() = height * 0.3f

    private val dragHelper = ViewDragHelper.create(this, 1.0f, object : ViewDragHelper.Callback() {
        override fun tryCaptureView(child: View, pointerId: Int): Boolean {
            // 仅允许拖拽中间操作按钮
            return child == centerBtn
        }

        override fun clampViewPositionVertical(child: View, top: Int, dy: Int): Int {
            // 限制垂直拖拽边界，避免按钮拖出控件范围
            val topLimit = paddingTop
            val bottomLimit = height - paddingBottom - child.height
            return top.coerceAtLeast(topLimit).coerceAtMost(bottomLimit)
        }

        override fun onViewPositionChanged(changedView: View, left: Int, top: Int, dx: Int, dy: Int) {
            super.onViewPositionChanged(changedView, left, top, dx, dy)
            // 拖拽过程中更新上下提示图标透明度，做过渡效果
            val dragPercent = abs(top - initialY) / dragThreshold
            findViewById<View>(R.id.iv_answer_hint).alpha = (1 - dragPercent).coerceAtLeast(0f)
            findViewById<View>(R.id.iv_reject_hint).alpha = (1 - dragPercent).coerceAtLeast(0f)
        }

        override fun onViewReleased(releasedChild: View, xvel: Float, yvel: Float) {
            super.onViewReleased(releasedChild, xvel, yvel)
            val offsetY = releasedChild.top - initialY
            when {
                // 上滑超过阈值，触发接听逻辑
                offsetY < -dragThreshold -> slideListener?.onSlideUp()
                // 下滑超过阈值，触发拒接逻辑
                offsetY > dragThreshold -> slideListener?.onSlideDown()
            }
            // 松手后回弹到初始位置
            dragHelper.settleCapturedViewAt(releasedChild.left, initialY.toInt())
            invalidate()
        }
    })

    var slideListener: OnSlideActionListener? = null

    interface OnSlideActionListener {
        fun onSlideUp()
        fun onSlideDown()
    }

    init {
        // 加载默认布局，也可自定义通过attr引入布局
        inflate(context, R.layout.widget_slide_action_btn, this)
        centerBtn = findViewById(R.id.btn_center_action)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // 记录按钮初始位置
        initialY = centerBtn.top.toFloat()
    }

    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        return dragHelper.shouldInterceptTouchEvent(ev)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        dragHelper.processTouchEvent(event)
        return true
    }

    override fun computeScroll() {
        if (dragHelper.continueSettling(true)) {
            ViewCompat.postInvalidateOnAnimation(this)
        }
    }
}

配套布局文件（widget_slide_action_btn.xml） #

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 上滑接听提示图标 -->
    <ImageView
        android:id="@+id/iv_answer_hint"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginTop="16dp"
        android:src="@drawable/ic_call_answer_green" />

    <!-- 下滑拒接提示图标 -->
    <ImageView
        android:id="@+id/iv_reject_hint"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_call_reject_red" />

    <!-- 中间可拖拽操作按钮 -->
    <ImageView
        android:id="@+id/btn_center_action"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_gravity="center"
        android:background="@drawable/bg_circle_white_shadow"
        android:src="@drawable/ic_phone" />

</merge>

页面调用示例 #

在Activity/Fragment中直接设置监听即可：

slideActionBtn.slideListener = object : SlideActionButton.OnSlideActionListener {
    override fun onSlideUp() {
        // 处理接听来电逻辑
    }

    override fun onSlideDown() {
        // 处理拒接来电逻辑
    }
}

优化点 #

• 可在触发操作时添加震动反馈，提升交互感知
• 可根据屏幕尺寸动态调整滑动阈值，适配不同设备
• 可自定义回弹动画时长，修改ViewDragHelper.create的第二个灵敏度参数即可调整

内容的提问来源于stack exchange，提问作者Kevin Patel