快捷導航

Android?控件自動貼邊實現(xiàn)實例詳解

更新時間：2022年11月27日 14:37:41 作者：ChenYhong

這篇文章主要為大家介紹了Android?控件自動貼邊實現(xiàn)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

最近接到個需求，需要在用戶與App交互時，把SDK中之前實現(xiàn)過的懸浮控件貼邊隱藏，結(jié)束交互后延遲一段時間再自動顯示。本篇文章介紹一下實現(xiàn)的思路。

判斷交互

用戶與App交互、結(jié)束交互可以通過監(jiān)聽觸摸事件來實現(xiàn)。建議使用的Activity的dispatchTouchEvent，Activity下的所有觸摸事件分發(fā)時都會回調(diào)此方法，代碼如下：

class AutoEdgeHideActivity : BaseGestureDetectorActivity() {
    override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
        when (ev.action) {
            MotionEvent.ACTION_DOWN -> {
                // 手指按下，開始本次交互
                // 在此實現(xiàn)隱藏邏輯
            }
            MotionEvent.ACTION_UP -> {
                // 手指抬起，結(jié)束本次交互
                // 在此實現(xiàn)延遲顯示功能
            }
        }
        return super.dispatchTouchEvent(ev)
    }
}

隱藏與顯示

想要實現(xiàn)的效果是當用戶與App交互時，懸浮控件平移貼邊，但保留一部分顯示。結(jié)束交互延遲一段時間后，懸浮控件平移回原來的位置。

此處通過ValueAnimator來實現(xiàn)，計算好控件的起始和結(jié)束位置，然后改變控件的x坐標，代碼如下：

private fun xCoordinateAnimator(view: View, startX: Float, endX: Float) {
    val animator = ValueAnimator.ofFloat(startX, endX)
    animator.addUpdateListener {
        // 不斷更改控件的X坐標
        view.x = it.animatedValue as Float
    }
    // 設(shè)置插值器，速度由快變慢
    animator.interpolator = DecelerateInterpolator()
    // 設(shè)置動畫的持續(xù)時間
    animator.duration = 500
    animator.start()
}

示例

整合之后做了個示例Demo，完整代碼如下：

class AutoEdgeHideActivity : BaseGestureDetectorActivity() {
    private lateinit var binding: LayoutAutoEdgeHideActivityBinding
    private var widthPixels: Int = 0
    private val autoShowInterval = 2
    private var interacting = false
    private var hidden = false
    private var lastPositionX: Float = 0f
    private val handler = Handler(Looper.myLooper() ?: Looper.getMainLooper())
    private val autoShowRunnable = Runnable { autoShow() }
    @SuppressLint("SetTextI18n")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.layout_auto_edge_hide_activity)
        widthPixels = resources.displayMetrics.widthPixels
        binding.includeTitle.tvTitle.text = "AutoEdgeHideExample"
        binding.vFloatView.setOnClickListener {
            if (hidden) {
                // 當前為隱藏狀態(tài)，先顯示
                // 把之前的延遲線程先取消
                handler.removeCallbacks(autoShowRunnable)
                autoShow()
                Toast.makeText(this, "手動顯示控件", Toast.LENGTH_SHORT).show()
            } else {
                // 相應(yīng)正常的事件
                Toast.makeText(this, "點擊了浮標控件", Toast.LENGTH_SHORT).show()
            }
        }
    }
    override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
        when (ev.action) {
            MotionEvent.ACTION_DOWN -> {
                if (!checkIsTouchFloatView(ev, binding.vFloatView)) {
                    // 起始ACTION_DOWN事件在浮標控件外，自動隱藏浮標控件，標記正在交互
                    interacting = true
                    handler.removeCallbacks(autoShowRunnable)
                    autoHide()
                }
            }
            MotionEvent.ACTION_UP -> {
                if (interacting) {
                    // 交互結(jié)束，一定時間后自動顯示，時間可以自由配置
                    interacting = false
                    handler.postDelayed(autoShowRunnable, autoShowInterval * 1000L)
                }
            }
        }
        return super.dispatchTouchEvent(ev)
    }
    /**
     * 檢查是否觸摸浮標控件
     */
    private fun checkIsTouchFloatView(ev: MotionEvent, view: View): Boolean {
        val screenLocation = IntArray(2)
        view.getLocationOnScreen(screenLocation)
        val viewX = screenLocation[0]
        val viewY = screenLocation[1]
        return (ev.x >= viewX && ev.x <= (viewX + view.width)) && (ev.y >= viewY && ev.y <= (viewY + view.height))
    }
    private fun autoShow() {
        if (hidden) {
            hidden = false
            binding.vFloatView.let {
                xCoordinateAnimator(it, it.x, lastPositionX)
            }
        }
    }
    private fun autoHide() {
        if (!hidden) {
            hidden = true
            binding.vFloatView.let {
                // 記錄一下顯示狀態(tài)下的x坐標
                lastPositionX = it.x
                // 隱藏時的x坐標，留一點控件的邊緣顯示（示例中默認控件在屏幕右側(cè)）
                val endX = widthPixels - it.width * 0.23f
                xCoordinateAnimator(it, lastPositionX, endX)
            }
        }
    }
    private fun xCoordinateAnimator(view: View, startX: Float, endX: Float) {
        val animator = ValueAnimator.ofFloat(startX, endX)
        animator.addUpdateListener {
            view.x = it.animatedValue as Float
        }
        animator.interpolator = DecelerateInterpolator()
        animator.duration = 500
        animator.start()
    }
}

效果如圖：