关于使用CoordinatorLayout配合AppBarLayout、CollapsingToolbarLayout达到的吸顶效果。

最新推荐文章于 2025-09-10 17:14:31 发布

原创最新推荐文章于 2025-09-10 17:14:31 发布 · 595 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#gitee

文章介绍了如何在Android中实现吸顶效果，主要涉及CoordinatorLayout、AppBarLayout和CollapsingToolbarLayout的使用。通过设置layout_scrollFlags和app:layout_behavior属性，可以实现布局随滚动隐藏或显示。示例中提到了NestedScrollView作为滚动内容容器的使用情况。

目前市面上大多数APP基本都设计到吸顶效果，网上找了一些资料，做下记录，可能你会遇到没办法达到效果的情况，不要着急，好好看看布局文件的代码，一定可以实现的。

先上个效果图

吸顶效果

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:binding="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <data>
        <import type="android.view.View" />
        <import type="androidx.recyclerview.widget.LinearLayoutManager"/>
        <import type="me.goldze.mvvmhabit.binding.viewadapter.recyclerview.LayoutManagers" />
        <import type="me.goldze.mvvmhabit.binding.viewadapter.recyclerview.LineManagers" />
        <variable
            name="viewModel"
            type="com.timenote.universityservice.function.home.pagerhome.model.RecommmendPagerfourViewModel" />

    </data>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--appbarlayout里边的东西可以隐藏 -->
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:titleEnabled="false"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/iv_image"
                    app:layout_collapseMode="pin"
                    android:scaleType="centerCrop"
                    android:src="@drawable/img_default_head"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"/>

            </com.google.android.material.appbar.CollapsingToolbarLayout>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:gravity="center"
                android:text="设置标题"
                android:textAlignment="center"
                android:textSize="20sp" />

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

        <!--设置layout behavior让可以滑动的控件和scrollview联动 -->
        <!-- scrollview不行  nestedScrollview可以 为啥？ -->
        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="400dp"
                    android:background="@color/blue">

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="400dp"
                    android:background="@color/gray">

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="400dp"
                    android:background="#4DC0A4">

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="400dp"
                    android:background="@color/gray">

                </LinearLayout>

            </LinearLayout>

        </androidx.core.widget.NestedScrollView>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</layout>

里面的CollapsingToolbarLayout是用来放你不想被吸顶的布局的，里面可以放多布局，自己替换就好了，CollapsingToolbarLayout下面的TextView就是准备吸顶的控件，也可以是多布局。需要哪个控件吸顶，就写什么布局。app:layout_scrollFlags="scroll|exitUntilCollapsed"，这个属性不要忘记加了！！！

AppBarLayout外面一般是放的RecyclerView，也可以是我上面写的NestedScrollView（你不用列表控件的时候），具体用什么视情况而定。注意！！！，这个控件里面的父布局一定要加app:layout_behavior="@string/appbar_scrolling_view_behavior"这个属性，不然无法达到效果，

最后，最外层布局最好是CoordinatorLayout！！！