Android仿抖音右滑清屏左滑列表功能的实现代码

1
2
3
4
// 添加需要清屏的view
 fun addClearViews(vararg views: View?)
 // 添加需要滑入的view
 fun addSlideView(view: RightSlideLayout)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
    * 获取滑动距离
    */
    fun getScollYDistance(): Int {
    // 获取recyclerview 的layoutManager
        val layoutManager = recyclerView.layoutManager as LinearLayoutManager
        // 获取当前第一个可见View的位置
        val position = layoutManager.findFirstVisibleItemPosition()
        // 根据position 获取当前View
        val firstVisiableChildView = layoutManager.findViewByPosition(position)
        // 获取当前View 高度
        val itemHeight = firstVisiableChildView.height
        // 滑动距离
        return position * itemHeight - firstVisiableChildView.top
    }

1
recyclerView.scrollBy(0,scroll) //scroll 刚才计算的高度

1
2
3
4
5
6
7
8
// 带动画移动距离
public void smoothScrollBy(int dx, int dy)
// 带动画移动到position
public void smoothScrollToPosition(int position)
// 移动到adapter position ，由LayoutManager实现
public void scrollToPosition(int position)
// 空实现，无效
public void scrollTo(int x, int y)

1
2
3
4
5
6
7
8
9
10
mClearAnimator = ValueAnimator.ofFloat(0f, 1.0f).setDuration(300)
        mClearAnimator.addUpdateListener(ValueAnimator.AnimatorUpdateListener { valueAnimator ->
            val value = valueAnimator.animatedValue as Float
            translateClearChild((startX + value * (endX - startX)).toInt())
        })
        mClearAnimator.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator) {
                isCleared = !isCleared
            }
        })

1
2
3
4
5
6
7
8
/**
    * 移动清屏控件
    */
    private fun translateClearChild(translate: Int) {
        for (i in mClearViews.indices) {
            mClearViews[i].translationX = translate.toFloat()
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
mSlideInAnimator = ValueAnimator.ofFloat(0f, 1.0f).setDuration(500)
// 设置减速拦截器
mSlideInAnimator.interpolator = DecelerateInterpolator(3f)
mSlideInAnimator.addUpdateListener(ValueAnimator.AnimatorUpdateListener { valueAnimator ->
            val value = valueAnimator.animatedValue as Float
            translateSlideView((startX + value * (endX - startX)).toInt())
        })
mSlideInAnimator.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationStart(animation: Animator) {
                mSlideView!!.visibility = View.VISIBLE
                mBgColorView.isClickable = true
            }
            override fun onAnimationEnd(animation: Animator) {
                if (!isSlideShow && translateX == 0) {
                    isSlideShow = !isSlideShow
                } else if (isSlideShow && abs(translateX) == width - mSlideView!!.paddingLeft) {
                    isSlideShow = !isSlideShow
                }
                if (!isSlideShow) {
                    parent.requestDisallowInterceptTouchEvent(false)
                    mSlideView!!.visibility = View.GONE
                    removeView(mBgColorView)
                    addView(mBgColorView, childCount - 4)
                }
                isSliderGoning = false
            }
        })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
val x = event.rawX.toInt()
// 标记移动距离
val offsetX = x - mDownX
when (event.action) {
            MotionEvent.ACTION_MOVE -> {
                if ((isSlideShow) && offsetX > 0 && mSlideInAnimator.isRunning && !isSliderGoning) {
                    // 滑入情况下，向右滑一段松开，再向右滑，清除回弹动画，跟随手势
                    mSlideInAnimator.cancel()
                    translateSlideView(offsetX)
                }
                if ((isSlideShow) && offsetX > 0 && !mSlideInAnimator.isRunning) {
                    // 滑入情况下，向右滑，跟随手势
                    translateSlideView(offsetX)
                }
                return true
            }
      }

1
2
3
4
5
6
7
8
9
10
11
12
/**
    * 移动滑块儿
    */
    private fun translateSlideView(translate: Int) {
        val percent = (mSlideView!!.width.toFloat() - translate) / mSlideView!!.width
        // 根据百分比算出色值
val color = (MASK_DARK_COLOR * percent).toInt() shl 24
        // 动态设置背景色渐变
        mBgColorView.setBackgroundColor(color)
        translateX = translate
        mSlideView!!.translationX = translate.toFloat()
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/bg"
    tools:context=".MainActivity">
    <com.fxf.slide.SlideContainerLayout
        android:id="@+id/layout_slider_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:id="@+id/ll12"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="100dp"
            android:background="#00f"
            android:orientation="vertical">
            <TextView
                android:id="@+id/tv111"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="111111111"
                android:textColor="#fff" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="222222222"
                android:textColor="#fff" />
        </LinearLayout>
    </com.fxf.slide.SlideContainerLayout>
    <com.fxf.slide.RightSlideLayout
        android:id="@+id/layout_right_slider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="60dp"
        android:visibility="gone">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/shape_slider_background">
            <View
                android:id="@+id/live_slide_bar"
                android:layout_width="4.5dp"
                android:layout_height="90dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/shape_slider_dark_bar" />
            <FrameLayout
                android:id="@+id/list_fragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_toRightOf="@+id/live_slide_bar" />
        </RelativeLayout>
    </com.fxf.slide.RightSlideLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
override fun dispatchTouchEvent(event: MotionEvent): Boolean {
// 获取坐标，这里用rawX 相对屏幕绝对位置，不然随手势移动过程中父布局的移动，导致获取的坐标左右抖动，会出现移动过程中左右一直抖动现象
        val x = event.rawX.toInt()
        val y = event.rawY.toInt()
// X方向位移
        val offsetX = x - mDownX
        if (!mSlideContainerLayout.isSlideShow){
        // Container滑块儿没滑出来不分发事件
            return false
        }
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
            // 记录按下点坐标
                mDownX = x
                mDownY = y
                mSlideContainerLayout.setDownXY(mDownX,mDownY)
            }
            MotionEvent.ACTION_MOVE -> if (abs(x - mDownX) < abs(y - mDownY) && paddingLeft < x) { // 上下滑动情况处理
                if (isSlideHorizontal) {
                    return mSlideContainerLayout.dispatchTouchEvent(event)
                }
            } else if ( offsetX < 0 && mSlideContainerLayout.isAlignLeftSide()) {
            // 向左滑动，滑块儿已经靠最左边了，不分发
                return super.dispatchTouchEvent(event)
            } else if (abs(x - mDownX) > abs(y - mDownY)){
            // 水平方向移动，分发事件
                isSlideHorizontal = true
                    return mSlideContainerLayout.dispatchTouchEvent(event)// 事件传递给Container处理
            }
            MotionEvent.ACTION_UP,
            MotionEvent.ACTION_CANCEL ->{
            // 抬起时处理
                if (offsetX < 0 && mSlideContainerLayout.isAlignLeftSide()){
                    return super.dispatchTouchEvent(event)
                }
                if (abs(x - mDownX) > abs(y - mDownY) || isSlideHorizontal){
                    isSlideHorizontal = false
                    return mSlideContainerLayout.dispatchTouchEvent(event)
                }
                isSlideHorizontal = false
            }
        }
        return super.dispatchTouchEvent(event)
    }

1
2
3
if (!mSlideContainerLayout.isSlideShow){
 return false
 }

1
2
3
4
5
MotionEvent.ACTION_MOVE -> if (abs(x - mDownX) < abs(y - mDownY) && paddingLeft < x) {
                if (isSlideHorizontal) {
                    return mSlideContainerLayout.dispatchTouchEvent(event)
                }
            }

1
2
3
4
if (mClearAnimator.isRunning || mSlideInAnimator.isRunning || isSlideShow) {
              // 滑入情况下，禁止上下滑切换直播间
              parent.requestDisallowInterceptTouchEvent(true)
    }

1
2
3
4
5
6
7
8
MotionEvent.ACTION_MOVE -> {
                if (!mClearAnimator.isRunning && mDownY > 200 && abs(x - mDownX) > abs(y - mDownY)) {
                    // 清屏不在执行时 && 高度大于200dp（解决进入房间头像滑动冲突）&& 横向滑动时拦截事件
                    if (abs(x - mDownX) > 10) {
                        return true
                    }
                }
            }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
override fun onTouchEvent(event: MotionEvent): Boolean {
        mVelocityTracker!!.addMovement(event)
        val x = event.rawX.toInt()
        val offsetX = x - mDownX
        if (mLastOffsetList.size > 2){
            mLastOffsetList.removeFirst()
        }
        mLastOffsetList.add(offsetX)
        var slideRight = (offsetX - mLastOffsetList.first) > 0
        when (event.action) {
            MotionEvent.ACTION_MOVE -> {
                if ((isSlideShow) && offsetX > 0 && mSlideInAnimator.isRunning && !isSliderGoning) {
                    // 滑入情况下，向右滑一段松开，再向右滑，清除回弹动画，跟随手势
                    mSlideInAnimator.cancel()
                    translateSlideView(offsetX)
                }
                if ((isSlideShow) && offsetX > 0 && !mSlideInAnimator.isRunning) {
                    // 滑入情况下，向右滑，跟随手势
                    translateSlideView(offsetX)
                }
                return true
            }
            MotionEvent.ACTION_UP -> {
                mVelocityTracker!!.computeCurrentVelocity(10)
                if (isSlideShow && offsetX > 0 && abs(offsetX) > width / 3 && !isSliderGoning && mVelocityTracker!!.xVelocity >= 0) {
                    // 滑入情况下，向右滑距离超过宽度1/3，滑出滑块
                    startX = offsetX
                    endX = width - mSlideView!!.paddingLeft
                    isSliderGoning = true
                    mSlideInAnimator.start()
                    return true
                }
                if (abs(mVelocityTracker!!.xVelocity) > 1) {
                    if (isCleared && offsetX < 0) {
                        // 清屏情况下，左滑速度超过10个像素时 ===》滑入清屏控件
                        layerShowWithAnim()
                    } else if (!isCleared && offsetX > 0 && !isSlideShow && !mSlideInAnimator.isRunning) {
                        // 未清屏 && 向右速度 > 10 && 没滑入滑块 && 滑块动画没执行的时候 ===》清屏
                        layerGoneWithAnim()
                    } else if (isSlideShow && offsetX > 0 && slideRight) {
                        // 滑入情况下 && 向右速度 > 10 ===》滑出滑块
                        mSlideInAnimator.cancel()
                        isSliderGoning = true
                        startX = translateX
                        endX = width - mSlideView!!.paddingLeft
                        mSlideInAnimator.start()
                    } else if (isSlideShow && offsetX < 0 && translateX != 0) {
                        // 滑入情况下 && 向左速度 > 10 && 已经向右滑动了一段距离 ===》 滑块回弹
                        startX = translateX
                        endX = 0
                        mSlideInAnimator.start()
                    } else if (!isSlideShow && offsetX < 0 && !mSlideInAnimator.isRunning) {
                        // 没滑入情况下 && 向左滑速度 > 10 && 没右正在滑入情况下 ===》 滑入滑块
                        sliderShowWithAnim()
                    } else {
                        if (isSlideShow && translateX != 0) {
                            // 滑入情况下 && 已经向右滑动过，速度没达到松开 ===》回弹
                            startX = translateX
                            mSlideInAnimator.start()
                        }
                    }
                }else {
                    if (isSlideShow && translateX != 0) {
                        // 滑入情况下 && 已经向右滑动过，速度没达到松开 ===》回弹
                        startX = translateX
                        mSlideInAnimator.start()
                    }
                }
                return super.onTouchEvent(event)
            }
            MotionEvent.ACTION_CANCEL -> {
                if (isSlideShow) {
                    //取消事件时，滑入情况下回弹
                    startX = translateX
                    mSlideInAnimator.start()
                }
            }
        }
        return super.onTouchEvent(event)
    }