Android使用Coordinatorlayout以及自定义Behavior实现滑动折叠效果

最终效果

相关源码

布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="知乎首页"
            app:titleTextColor="@color/white" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rlv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="70dp"
        app:layout_behavior="com.crystal.view.TranslationBehavior"
        android:src="@drawable/home_menu_setting"
        app:layout_scrollFlags="scroll|enterAlways|snap" />


    <!--底部item-->
    <LinearLayout
        android:id="@+id/bottom_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:layout_gravity="bottom"
        android:background="@color/white"
        app:layout_behavior="@string/bottom_sheet_behavior">
        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"
            />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:src="@mipmap/ic_launcher"
            android:layout_weight="1"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:src="@mipmap/ic_launcher"
            android:layout_weight="1" />
    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
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

相关Activity

package com.crystal.view

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView


/**
 *  CoordinatorLayout使用以及自定义behavior
 * on 2022/10/20
 */
class BehaviorActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_behavior)

        val rlv = findViewById<RecyclerView>(R.id.rlv)
        rlv.layoutManager = LinearLayoutManager(this)
        rlv.adapter = object : RecyclerView.Adapter<ViewHolder>() {
            override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
                val itemView = LayoutInflater.from(this@BehaviorActivity)
                    .inflate(R.layout.item_behavior, parent, false)
                return ViewHolder(itemView)
            }

            override fun onBindViewHolder(holder: ViewHolder, position: Int) {

            }

            override fun getItemCount(): Int {
                return 100
            }

        }

    }

    private class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

}
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

自定义Behavior

package com.crystal.view

import android.content.Context
import android.util.AttributeSet
import android.view.View
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.view.ViewCompat
import com.google.android.material.floatingactionbutton.FloatingActionButton

/** 自定义Behavior实现FloatingActionButton滑动效果
 * on 2022/11/1
 */
class TranslationBehavior : FloatingActionButton.Behavior {
    constructor() : super()
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)

    //标志是否已经往下走
    private var isOut = false


    override fun onStartNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: FloatingActionButton,
        directTargetChild: View,
        target: View,
        axes: Int,
        type: Int
    ): Boolean {
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL
    }

    /**
     * 垂直滚动时，向上滚动时显示，向下滚动进行隐藏
     */
    override fun onNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: FloatingActionButton,
        target: View,
        dxConsumed: Int,
        dyConsumed: Int,
        dxUnconsumed: Int,
        dyUnconsumed: Int
    ) {
        // dyConsumed 向下滚动为正值，向上滚动为负值 向上滑动时立刻显示FloatingActionButton
        if (dyConsumed > 0) {
            if (!isOut) {
                val translationY =
                    (child.layoutParams as CoordinatorLayout.LayoutParams).bottomMargin + child.measuredHeight
                child.animate().translationY(translationY / 1f).setDuration(500).start()
                isOut = true
            }
        } else {
            if (isOut) {
                //往下滑动
                child.animate().translationY(0f).setDuration(500).start()
                isOut = false
            }
        }
    }
}
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

小结

通过对Coordinatorlayout以及behavior的使用，一些好看的效果可以通过原生控件来实现，这大大节省自定义View花费的时间。

结语

如果以上文章对您有一点点帮助，希望您不要吝啬的点个赞加个关注，您每一次小小的举动都是我坚持写作的不懈动力！ღ( ´･ᴗ･` )