效果1:

直接先上效果

cl_1.gif

看了效果再上代码

<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
    
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/ctl_test"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher" />
            
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_collapseMode="pin"
                app:title="不是默认" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/text"
            android:textSize="40sp" />
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

为什么字体颜色和xml中设置的不一样,因为在Activity中设置了一点点,如果不用改变的,Activity中也不用写

        ctl_test.setExpandedTitleColor(ContextCompat.getColor(this , R.color.white))
        ctl_test.setCollapsedTitleTextColor(ContextCompat.getColor(this , R.color.red))

标题颜色一定要设置在CollapsingToolbarLayout上,不然没用,设置这个标题也要设置在CollapsingToolbarLayout上,这样才有效果,xml中的只是默认设置

再说一说xml中比较重要的几个参数

CollapsingToolbarLayout:

1:app:layout_scrollFlags
    此属性里面必须至少启用scroll这个flag，这样这个View才会滚动出屏幕，否则它将一直固定在顶部。
    scroll：所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的View将会被固定在屏幕顶部。
    enterAlways：当滑动组件向下滚动时，标题栏会直接往下滚动。
    enterAlwaysCollapsed：当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩 大到完整高度。
    exitUntilCollapsed：当标题栏向上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应滑动组件的内部滑动事件。
2:app:layout_collapseMode：子布局折叠模式
    pin：固定模式，在折叠的时候最后固定在顶端
    parallax：视差模式，在折叠的时候会有个视差折叠的效果
3:app:contentScrim：指定CollapsingToolbarLayout折叠后的Toolbar颜色

CollapsingToolbarLayout中,必须有Toolbar,再在Toolbar中放东西比较好,我是这么试出来的

效果2

照样先上效果

cl_v2.gif

在上代码

<com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/ctl_test"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="290dp"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher" />
            
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:layout_gravity="bottom"
                app:layout_collapseMode="pin">
                
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:singleLine="true"
                    android:text="测试   测试  测试  测试  测试  测试  测试  测试  测试"
                    android:textColor="@color/red"
                    android:textSize="@dimen/txt_16" />
            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>

其他地方跟上面代码一样,我就不上了,也没有写Activity代码,就xml的运行起来的样式,这种能满足类似于顶部是banner,中间那块textview那块基本是tablayout,下面是列表的那种,根据自己需求来做

就先写这两个吧,后面再补充