仿京东首页右侧广告位,上下可拖动,伴随页面滚动显示与隐藏

自定义控件继承AppCompatImageButton

控件可上下滑动需要处理控件的onTouchEvent事件 canSlide控制是否可滑动,控件隐藏不可上下滑动


    override fun onTouchEvent(event: MotionEvent): Boolean {
        super.onTouchEvent(event)
        val y = event.y.toInt()
        // 是否可滑动
        if (canSlide) {
            when (event.action) {
                MotionEvent.ACTION_DOWN -> {
                    lastTop = top
                    lastX = event.x.toInt()
                    lastY = event.y.toInt()
                }
                MotionEvent.ACTION_MOVE -> {
                    val offsetY = y - lastY
                    var realTop = 0
                    var realBottom = 0
                    if (top + offsetY <= 0) {
                        realTop = 0
                        realBottom = mViewHeight
                    } else if (bottom + offsetY >= parentHeight) {
                        realTop = parentHeight - mViewHeight
                        realBottom = parentHeight
                    } else {
                        realTop = top + offsetY
                        realBottom = bottom + offsetY
                    }
                    layout(left, realTop, right, realBottom)
                }

                MotionEvent.ACTION_UP -> {
                    if (top == lastTop) {
                        clickCallBack?.invoke()
                    }
                }

            }
            return true
        } else {
            return false
        }
    }

显示与隐藏 并伴随着动画效果

/**
     * 隐藏
     */
    private fun hideButton() {
        showAnim(
            parentWith - mVieWidth * 1.0f,
            parentWith - mVieWidth * extrudeSize,
            false,
            1f,
            alphaData
        )
        showButton = false
    }

    /**
     * 显示
     */
    private fun showButton() {
        showAnim(
            parentWith - mVieWidth * extrudeSize,
            parentWith - mVieWidth * 1.0f,
            true,
            alphaData,
            1f
        )
        showButton = true
    }

    /**
     * 执行动画
     */
    private fun showAnim(
        from: Float,
        to: Float,
        enableSlide: Boolean,
        fromAlpha: Float,
        toAlpha: Float
    ) {
        val animator = ObjectAnimator.ofFloat(
            this,
            "x",
            from,
            to
        ).apply {
            interpolator = DecelerateInterpolator()
            duration = animTime.toLong()
            start()
            addListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator?) {
                    super.onAnimationEnd(animation)
                    setEnableSlide(enableSlide)
                }
            })
        }
        val alphaAnimator = ObjectAnimator.ofFloat(
            this,
            "alpha",
            fromAlpha,
            toAlpha
        ).apply {
            duration = animTime.toLong()
            start()
        }

        val animatorSet = AnimatorSet()
        animatorSet.playTogether(animator, alphaAnimator)

    }

绑定滚动控件 可以是recyclerView 和NestScrollView

 /**
     * 绑定滚动的view
     */
    fun bindView(view: View?): GyMovedImageButton {
        if (view != null) {
            if (view is RecyclerView) {
                view.addOnScrollListener(object : RecyclerView.OnScrollListener() {
                    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                        super.onScrolled(recyclerView, dx, dy)
                        if (dy > 0) {
                            if (showOrHide) {
                                hideButton()
                                showOrHide = !showOrHide
                            }

                        } else {
                            if (!showOrHide) {
                                showButton()
                                showOrHide = !showOrHide
                            }
                        }
                    }
                })
            } else if (view is NestedScrollView) {
                view.setOnScrollChangeListener { v: NestedScrollView?, scrollX: Int, scrollY: Int, oldScrollX: Int, oldScrollY: Int ->
                    var dy = scrollY - oldScrollY
                    if (dy > 0) {
                        if (showOrHide) {
                            hideButton()
                            showOrHide = !showOrHide
                        }

                    } else {
                        if (!showOrHide) {
                            showButton()
                            showOrHide = !showOrHide
                        }
                    }

                }
            } else {
                throw Throwable("请添加绑定的View,可以是RecyclerView和NestedScrollView")
            }
        } else {
            throw Throwable("请添加绑定的View,可以是RecyclerView和NestedScrollView")
        }
        return this
    }

支持自定义属性,隐藏时控件的透明度,控件隐藏显示百分比,执行动画的时长

<declare-styleable name="GyMovedImageButton">
        <attr name="alpha" format="float" />
        <attr name="extrudeSize" format="float" />
        <attr name="animTime" format="integer" />
    </declare-styleable>

全部自定义控件代码

package com.example.myapplication.widget

import android.animation.Animator
import android.animation.AnimatorListenerAdapter
import android.animation.AnimatorSet
import android.animation.ObjectAnimator
import android.annotation.SuppressLint
import android.content.Context
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import android.view.animation.DecelerateInterpolator
import androidx.appcompat.widget.AppCompatImageButton
import androidx.core.widget.NestedScrollView
import androidx.recyclerview.widget.RecyclerView
import com.bumptech.glide.Glide
import com.example.myapplication.R

/**
 *
 *  @author wangjun
 *  @date  2021/7/27 9:47
 *  @Des  :可上下移动拖拽的广告button
 *  注意点:一定不要设置View的点击事件
 *
 */
class GyMovedImageButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatImageButton(context, attrs, defStyleAttr) {
    private var lastX: Int = 0
    private var lastY: Int = 0

    /**
     * 按下时的距离父控件的距离
     */
    private var lastTop: Int = 0

    /**
     * 透明度值
     */
    private var alphaData = 0.5f

    /**
     * view突出所占百分比
     */
    private var extrudeSize = 0.5f

    /**
     * 动画执行时长
     */
    private var animTime = 400

    /**
     * 当前控件的高度/宽度
     */
    private var mViewHeight: Int = 0
    private var mVieWidth: Int = 0

    /**
     * 父控件的高度/宽度
     */
    private var parentHeight: Int = 0
    private var parentWith: Int = 0

    /**
     * 是否可以滑动
     */
    private var canSlide: Boolean = true
    private var showButton: Boolean = true

    /**
     * 显示与隐藏
     */
    private var showOrHide = true

    init {
        val ta = context.obtainStyledAttributes(attrs, R.styleable.GyMovedImageButton)
        alphaData =
            ta.getFloat(
                R.styleable.GyMovedImageButton_alpha,
                0.5f
            )
        extrudeSize =
            ta.getFloat(
                R.styleable.GyMovedImageButton_extrudeSize,
                0.5f
            )
        animTime =
            ta.getInt(
                R.styleable.GyMovedImageButton_animTime,
                400
            )
        ta.recycle()
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        mViewHeight = measuredHeight
        mVieWidth = measuredWidth
        if (parent is ViewGroup) {
            parentHeight = (parent as ViewGroup).measuredHeight
            parentWith = (parent as ViewGroup).measuredWidth
        }
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        super.onTouchEvent(event)
        val y = event.y.toInt()
        // 是否可滑动
        if (canSlide) {
            when (event.action) {
                MotionEvent.ACTION_DOWN -> {
                    lastTop = top
                    lastX = event.x.toInt()
                    lastY = event.y.toInt()
                }
                MotionEvent.ACTION_MOVE -> {
                    val offsetY = y - lastY
                    var realTop = 0
                    var realBottom = 0
                    if (top + offsetY <= 0) {
                        realTop = 0
                        realBottom = mViewHeight
                    } else if (bottom + offsetY >= parentHeight) {
                        realTop = parentHeight - mViewHeight
                        realBottom = parentHeight
                    } else {
                        realTop = top + offsetY
                        realBottom = bottom + offsetY
                    }
                    layout(left, realTop, right, realBottom)
                }

                MotionEvent.ACTION_UP -> {
                    if (top == lastTop) {
                        clickCallBack?.invoke()
                    }
                }

            }
            return true
        } else {
            return false
        }
    }

    /**
     * 设置是否可以上下滑动
     */
    private fun setEnableSlide(canSlide: Boolean) {
        this.canSlide = canSlide
    }

    /**
     * 隐藏
     */
    private fun hideButton() {
        showAnim(
            parentWith - mVieWidth * 1.0f,
            parentWith - mVieWidth * extrudeSize,
            false,
            1f,
            alphaData
        )
        showButton = false
    }

    /**
     * 显示
     */
    private fun showButton() {
        showAnim(
            parentWith - mVieWidth * extrudeSize,
            parentWith - mVieWidth * 1.0f,
            true,
            alphaData,
            1f
        )
        showButton = true
    }

    /**
     * 执行动画
     */
    private fun showAnim(
        from: Float,
        to: Float,
        enableSlide: Boolean,
        fromAlpha: Float,
        toAlpha: Float
    ) {
        val animator = ObjectAnimator.ofFloat(
            this,
            "x",
            from,
            to
        ).apply {
            interpolator = DecelerateInterpolator()
            duration = animTime.toLong()
            start()
            addListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator?) {
                    super.onAnimationEnd(animation)
                    setEnableSlide(enableSlide)
                }
            })
        }
        val alphaAnimator = ObjectAnimator.ofFloat(
            this,
            "alpha",
            fromAlpha,
            toAlpha
        ).apply {
            duration = animTime.toLong()
            start()
        }

        val animatorSet = AnimatorSet()
        animatorSet.playTogether(animator, alphaAnimator)

    }

    /**
     * 绑定滚动的view
     */
    fun bindView(view: View?): GyMovedImageButton {
        if (view != null) {
            if (view is RecyclerView) {
                view.addOnScrollListener(object : RecyclerView.OnScrollListener() {
                    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                        super.onScrolled(recyclerView, dx, dy)
                        if (dy > 0) {
                            if (showOrHide) {
                                hideButton()
                                showOrHide = !showOrHide
                            }

                        } else {
                            if (!showOrHide) {
                                showButton()
                                showOrHide = !showOrHide
                            }
                        }
                    }
                })
            } else if (view is NestedScrollView) {
                view.setOnScrollChangeListener { v: NestedScrollView?, scrollX: Int, scrollY: Int, oldScrollX: Int, oldScrollY: Int ->
                    var dy = scrollY - oldScrollY
                    if (dy > 0) {
                        if (showOrHide) {
                            hideButton()
                            showOrHide = !showOrHide
                        }

                    } else {
                        if (!showOrHide) {
                            showButton()
                            showOrHide = !showOrHide
                        }
                    }

                }
            } else {
                throw Throwable("请添加绑定的View,可以是RecyclerView和NestedScrollView")
            }
        } else {
            throw Throwable("请添加绑定的View,可以是RecyclerView和NestedScrollView")
        }
        return this
    }

    /**
     * 设置数据
     */
    fun setImageData(img: String): GyMovedImageButton {
        Glide.with(context).load(img).into(this)
        return this
    }

    /**
     * 设置view的收起透明度
     */
    fun setBtnAlpha(alpha: Float): GyMovedImageButton {
        this.alphaData = alpha
        return this
    }

    /**
     * 设置控件突出百分比
     */
    fun setExtrudeSize(extrudeSize: Float): GyMovedImageButton {
        this.extrudeSize = extrudeSize
        return this
    }

    /**
     * 设置动画执行时长
     */
    fun setAnimTime(animTime: Int): GyMovedImageButton {
        this.animTime = animTime
        return this
    }

    private var clickCallBack: (() -> Unit)? = null

    @SuppressLint("ClickableViewAccessibility")
    fun setClickListen(block: () -> Unit) {
        this.clickCallBack = block
        this.setOnTouchListener { _, _ ->
            if (!showButton) {
                showOrHide = true
                showButton()
            }
            false
        }
    }


}

使用:

布局中:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mParentView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.core.widget.NestedScrollView
        android:id="@+id/scrollView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@color/teal_700" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@color/colorAccent" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@color/purple_500" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@color/teal_700" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

    <com.example.myapplication.widget.GyMovedImageButton
        android:id="@+id/floatButton"
        android:layout_width="100dp"
        android:layout_height="70dp"
        android:background="@color/teal_200"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:alpha="0.3"
        app:extrudeSize="0.3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

支持recyclerView和NestScrollView的联动

代码调用

floatButton.bindView(rv).setClickListen {
            Toast.makeText(this@MoveButtonActivity,"点击跳转", Toast.LENGTH_SHORT).show()
        }

!!!注意使用 一定不要自已调用控件的点击事件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值