Android 控件自动贴边实现实例详解

 更新时间:2022年11月27日 14:37:41   作者:ChenYhong  
这篇文章主要为大家介绍了Android 控件自动贴边实现实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

最近接到个需求,需要在用户与App交互时,把SDK中之前实现过的悬浮控件贴边隐藏,结束交互后延迟一段时间再自动显示。本篇文章介绍一下实现的思路。

判断交互

用户与App交互、结束交互可以通过监听触摸事件来实现。建议使用的ActivitydispatchTouchEventActivity下的所有触摸事件分发时都会回调此方法,代码如下:

class AutoEdgeHideActivity : BaseGestureDetectorActivity() {
    override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
        when (ev.action) {
            MotionEvent.ACTION_DOWN -> {
                // 手指按下,开始本次交互
                // 在此实现隐藏逻辑
            }
            MotionEvent.ACTION_UP -> {
                // 手指抬起,结束本次交互
                // 在此实现延迟显示功能
            }
        }
        return super.dispatchTouchEvent(ev)
    }
}

隐藏与显示

想要实现的效果是当用户与App交互时,悬浮控件平移贴边,但保留一部分显示。结束交互延迟一段时间后,悬浮控件平移回原来的位置。

此处通过ValueAnimator来实现,计算好控件的起始和结束位置,然后改变控件的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
    }
    // 设置插值器,速度由快变慢
    animator.interpolator = DecelerateInterpolator()
    // 设置动画的持续时间
    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) {
                // 当前为隐藏状态,先显示
                // 把之前的延迟线程先取消
                handler.removeCallbacks(autoShowRunnable)
                autoShow()
                Toast.makeText(this, "手动显示控件", Toast.LENGTH_SHORT).show()
            } else {
                // 相应正常的事件
                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) {
                    // 交互结束,一定时间后自动显示,时间可以自由配置
                    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 {
                // 记录一下显示状态下的x坐标
                lastPositionX = it.x
                // 隐藏时的x坐标,留一点控件的边缘显示(示例中默认控件在屏幕右侧)
                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()
    }
}

效果如图:

以上就是Android 控件自动贴边实现实例详解的详细内容,更多关于Android 控件自动贴边的资料请关注脚本之家其它相关文章!

相关文章

  • Android线性布局与相对布局的实现

    Android线性布局与相对布局的实现

    大家好,本篇文章主要讲的是Android线性布局与相对布局的实现,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下
    2022-02-02
  • Android之Gallery使用例子

    Android之Gallery使用例子

    本篇文章主要介绍了Android之Gallery使用例子,Gallery用来显示图片列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • Android斩首行动接口预请求

    Android斩首行动接口预请求

    这篇文章主要为大家介绍了Android斩首行动之接口预请求实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Android仿微信加载H5页面进度条

    Android仿微信加载H5页面进度条

    这篇文章主要为大家详细介绍了Android仿微信加载H5页面进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Android WebView交互传递json字符串并解析的方法

    Android WebView交互传递json字符串并解析的方法

    这篇文章主要给大家介绍了关于Android中WebView交互传递json字符串并解析的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-05-05
  • Flutter自动路由插件auto_route使用详解

    Flutter自动路由插件auto_route使用详解

    这篇文章主要为大家介绍了Flutter自动路由插件auto_route的基本使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Android LitePal的使用详解

    Android LitePal的使用详解

    这篇文章主要介绍了Android LitePal的使用,帮助大家更好的进行Android开发,感兴趣的朋友可以了解下
    2020-12-12
  • Android Camera2实现最简单的预览框显示

    Android Camera2实现最简单的预览框显示

    这篇文章主要为大家详细介绍了Android Camera2实现最简单的预览框显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Flutter UI实现侧拉抽屉菜单

    Flutter UI实现侧拉抽屉菜单

    这篇文章主要为大家详细介绍了Flutter UI实现侧拉抽屉菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Android动态绘制饼状图的示例代码

    Android动态绘制饼状图的示例代码

    这篇文章主要介绍了Android动态绘制饼状图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论