最简单实现悬窗按钮

package com.example.hellokotlin.view

import android.content.Context
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.animation.LinearInterpolator
import android.widget.LinearLayout
import com.example.hellokotlin.uitils.ExtensionCommon.deviceHeight
import com.example.hellokotlin.uitils.ExtensionCommon.deviceWidth


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

    private var downX = 0f
    private var downY = 0f
    private var isMove = false
    private val scrollThresholdValue = 20
    private val deviceHeight by lazy {
        context.deviceHeight()
    }
    private val deviceWidth by lazy {
        context.deviceWidth()
    }

    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
        when (event.action and MotionEvent.ACTION_MASK) {
            MotionEvent.ACTION_DOWN -> {
                isMove = false
                downX = event.rawX
                downY = event.rawY
            }

            MotionEvent.ACTION_MOVE -> {
                val deltaX = event.rawX - downX
                val deltaY = event.rawY - downY
                if(deltaX > scrollThresholdValue || deltaY > scrollThresholdValue){
                    isMove = true
                    downX = event.rawX
                    downY = event.rawY
                }
            }
        }

        return isMove || super.onInterceptTouchEvent(event)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action and MotionEvent.ACTION_MASK) {
            MotionEvent.ACTION_DOWN -> {
                downX = event.rawX
                downY = event.rawY
            }

            MotionEvent.ACTION_MOVE -> {
                val deltaX = event.rawX - downX
                val deltaY = event.rawY - downY
                updateViewLocation(deltaX,deltaY)
                downX = event.rawX
                downY = event.rawY
            }

            MotionEvent.ACTION_UP -> {
                attachSideAnimation()
            }

        }
        return true
    }

    //不足屏幕一半,左。否则右
    private fun attachSideAnimation(){
        if(x < deviceWidth / 2f){
            animate()
                .setInterpolator(LinearInterpolator())
                .setDuration(500)
                .x(0f)
                .start()
        }else{
            animate()
                .setInterpolator(LinearInterpolator())
                .setDuration(500)
                .x(deviceWidth.toFloat() - width)
                .start()
        }
    }

    private fun updateViewLocation(deltaX: Float, deltaY: Float) {
//        val params = layoutParams
//        if(params is MarginLayoutParams){
//            params.topMargin = (params.topMargin + deltaY).toInt()
//            params.marginStart = (params.marginStart + deltaX).toInt()
//        }
//        layoutParams = params
        x += deltaX
        y += deltaY
    }

}

布局代码:

<com.example.hellokotlin.view.ViewMoveFloatVip
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/iv_float_icon_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:src="@mipmap/float_vip_close" />
</com.example.hellokotlin.view.ViewMoveFloatVip>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个前端开发的问题,我会尽力回答你。 首先,你需要在 Vue 组件中使用 Element UI 中的 Dialog 组件来实现弹出口。在你的组件中,你需要引入 Dialog 组件,创建一个按钮,然后在按钮的点击事件中,调用 Dialog 组件的打开方法。 接下来,你需要使用 CSS 来自由移动和调整大小口,同时确保口不影响背景页面的查看。你可以使用绝对定位和 z-index 属性来实现这一点。 最后,你需要监听背景页面的 TAB 页切换事件,并随着 TAB 页的切换来移动口。你可以使用 Vue 的 watch 属性来监听 TAB 页的切换事件,并在回调函数中更新口的位置。 下面是一个简单的示例代码,供你参考: ```vue <template> <div> <el-button type="primary" @click="openDialog">新标签</el-button> <el-dialog title="新标签" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false" :custom-class="'dialog-style'" > <p>这是一个新标签</p> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, dialogX: 0, dialogY: 0, dialogWidth: 400, dialogHeight: 300, }; }, methods: { openDialog() { this.dialogVisible = true; }, closeDialog() { this.dialogVisible = false; }, handleMove(e) { this.dialogX = e.clientX - this.offsetX; this.dialogY = e.clientY - this.offsetY; }, handleResize(e) { this.dialogWidth = e.clientX - this.dialogX; this.dialogHeight = e.clientY - this.dialogY; }, }, watch: { '$route': function (newVal, oldVal) { if (this.dialogVisible) { // 移动口到新的 TAB 页 this.dialogX += (oldVal.index - newVal.index) * 100; } } }, mounted() { // 初始化口的位置和大小 this.dialogX = window.innerWidth / 2 - this.dialogWidth / 2; this.dialogY = window.innerHeight / 2 - this.dialogHeight / 2; // 绑定口的移动和调整大小事件 this.$nextTick(() => { const dialogTitle = document.querySelector('.dialog-style .el-dialog__header'); dialogTitle.addEventListener('mousedown', e => { this.offsetX = e.clientX - this.dialogX; this.offsetY = e.clientY - this.dialogY; document.addEventListener('mousemove', this.handleMove); }); document.addEventListener('mouseup', () => { document.removeEventListener('mousemove', this.handleMove); }); const dialogResize = document.querySelector('.dialog-style .el-dialog__footer'); dialogResize.addEventListener('mousedown', e => { this.offsetX = e.clientX - this.dialogWidth; this.offsetY = e.clientY - this.dialogHeight; document.addEventListener('mousemove', this.handleResize); }); document.addEventListener('mouseup', () => { document.removeEventListener('mousemove', this.handleResize); }); }); } }; </script> <style scoped> .dialog-style { position: absolute; z-index: 9999; top: {{ dialogY }}px; left: {{ dialogX }}px; width: {{ dialogWidth }}px; height: {{ dialogHeight }}px; } </style> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值