Androidx CoordinatorLayout 和 AppBarLayout 实现折叠效果(通俗的说是粘性头效果)

Androidx  CoordinatorLayout 和 AppBarLayout 实现折叠效果 或者 说是粘性头效果

先看下面是不是你需要的结果  大致顺序是先滚动整体,然后折叠 在滚动list ,下滑的时候list 滚动到顶部之后

在滚动整体的

androidx 里面首先先引入库 :

implementation 'com.google.android.material:material:1.0.0'

代码基本都是xml 代码如下,如果着急使用直接复制过去然后修改内容即可

<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"
            android:background="@android:color/holo_red_dark"
            app:elevation="0dp">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="vertical"
                android:minHeight="50dp"
                app:layout_scrollFlags="scroll">

            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="头部"
                    android:textSize="32sp" />


            <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="10dp"
                    android:scaleType="fitXY"
                    android:src="@mipmap/three" />

            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="尾部"
                    android:textSize="32sp" />

        </LinearLayout>


    </com.google.android.material.appbar.AppBarLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:background="@android:color/white"
                android:orientation="horizontal">


            <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="推荐"
                    android:textSize="32sp" />

            <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="推荐"
                    android:textSize="32sp" />


            <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="推荐"
                    android:textSize="32sp" />

        </LinearLayout>

        <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

需要注意的地方:

1 在 AppBarLayout 下面 使用

app:layout_behavior="@string/appbar_scrolling_view_behavior" 这个没啥说的

2  就是  app:layout_scrollFlags="scroll" 设置折叠的地方了, 这里没有没有特殊的要求就设置scroll 就行了

下面主要说下其他的几种情况

app:layout_scrollFlags设置,对应的值为:scroll,enterAlways,enterAlwaysCollapsed,exitUntilCollapsed,snap;

一般情况app:layout_scrollFlags 设置scroll 就行了,就是上面图的效果

第一个: enterAlways

使用必须要和scroll 结合 一起,单独使用没有效果,

使用方法:app:layout_scrollFlags="scroll|enterAlways"

这个效果个人感觉很不好,先说下这个效果是整体一起滑动,折叠之后底部list 继续滑动,当在往下滑动的时候,先滑动整体,当整体滑动完之后再滑动下面的list ,这个效果感觉不常用,假如底部的list 很靠近底部的时候,就等下list 滑动上去之后滑动不下来了, 具体效果如下

 代码就不贴了 app:layout_scrollFlags="scroll|enterAlways" 这句话替代上面代码里面就行了

第二个: enterAlwaysCollapsed

这个使用必须要和scroll|enterAlways 结合在一起才有效果,单独使用没有效果

具体代码如下:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

这个效果对下拉滑动的时候如果折叠部分项目中使用最低高度的使用的,如果折叠区域没有使用最低高度,就不用设置这个效果了, 这个的效果就是 当向下滑动的时候先显示折叠区域的最低高度然后在 滑动向上的list ,list滑动完之后再滑动整体,具体效果如下

第三个:snap 

使用 必须要和scroll 一起使用才有效果

整体代码如下:

app:layout_scrollFlags="scroll|snap"

这个效果有点类似viewpager 滑动一点不滑动了,松开之后会回退过去,滑动区域大于一般不滑动,松开之后会自动展开折叠的区域 ,这个很好理解

具体效果如下

第四个:exitUntilCollapsed

这个使用需要和scroll 结合在一起使用,

整体如下:app:layout_scrollFlags="scroll|exitUntilCollapsed"

这个效果就是这折叠区域有一个最小的区域不会被折叠  具体效果如下

好了以上就是全部内容,有不懂的地方可以留言,谢谢

猜你喜欢

转载自blog.csdn.net/qq_33210042/article/details/107688881
今日推荐