CoordinateLayout与AppBarLayout 实现顶部伸缩

一、基本组成

CoordinatorLayout与AppbarLayout和实现了NestedScrollView的布局或控件配合实现顶部伸缩的效果.

常规用法:

在整个父布局CoordinatorLayout下面,有2个子布局

AppbarLayout

NestedScrollView

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abl_AppBarLayout"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        >
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/ctl_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll"
            >

            <ImageView
                android:id="@+id/iv_cover"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/iv_parents_mode"
                android:scaleType="centerCrop"
                />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tb_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:title="Title"
                app:layout_collapseMode="pin"
                >
            </androidx.appcompat.widget.Toolbar>

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


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

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nsl_test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_str"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

注意点:

a、 CoordinatorLayout 协调者布局,继承自viewgroup,但是使用类似于framLayout,有层次结构,后面的布局会覆盖在前面的布局之上。它用于协调内部直接子View的滑动事件。

必须作为根ViewGroup,内部包含一个AppBarLayout和一个NestedScrollView。通过监听NestedScrollView的滚动事件,使AppBarLayout中的直接子View跟随NestedScrollView一起滑动。

b、 AppBarLayout是LinearLayout的子类,是一种支持响应滚动手势的app bar布局，本身响应了CoordinatorLayout的layout_behavior属性。

其内部直接子View可以通过设置app:layout_scrollFlags 来实现根据滚动布局一起滚动的不同的效果。

c、CollapsingToolbarLayout作为AppBarLayout的直接子View,是专门用来实现子布局内不同元素响应滚动细节的布局.

通过app:layout_collapseMode属性可以设置View的折叠效果(pin|parallax)

d、滚动布局需要设置app:layout_behavior属性

与AppbarLayout组合的滚动布局(RecyclerView, NestedScrollView等),需要设置 app:layout_behavior = "@string/appbar_scrolling_view_behavior" 没有设置的话, AppbarLayout将不会响应滚动布局的滚动事件.

二、AppBarLayout

AppBarLayout 可以监听滚动View的滑动事件,通过一定的策略传递给AppBarLayout的子View

AppbarLayout下的子View,可以添加app:layout_scrollFlags来设置各子View执行的动作.

scrollFlags可以设置的动作如下:

(1) scroll: 值设为scroll的View会跟随滚动事件一起发生移动。就是当指定的ScrollView发生滚动时，该View也跟随一起滚动，就好像这个View也是属于这个ScrollView一样。

(2) enterAlways: 值设为enterAlways的View,当任何时候ScrollView往下滚动时，该View会直接往下滚动。而不用考虑ScrollView是否在滚动到最顶部还是哪里.
app:layout_scrollFlags="scroll|enterAlways"

(3) exitUntilCollapsed：值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView的内部滑动事件。

怎么理解呢？简单解释：在ScrollView往上滑动时，首先是View把滑动事件“夺走”，由View去执行滑动，直到滑动最小高度后，把这个滑动事件“还”回去，让ScrollView内部去上滑。

enterAlwaysCollapsed：是enterAlways的附加选项，一般跟enterAlways一起使用，它是指，View在往下“出现”的时候，首先是enterAlways效果，当View的高度达到最小高度时，View就暂时不去往下滚动，直到ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束

也可以在代码中通过addOnOffsetChangedListener接口直接监听AppBarLayout的滚动偏移,对AppBarLayout的子View做一些过渡变化特效


        ablAppBarLayout = findViewById(R.id.abl_AppBarLayout)
        ablAppBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener{appBarLayout, verticalOffset ->
            Log.d("feifei","OffsetChanged - verticalOffset:${verticalOffset}")
        })

三、CollapsingToolbarLayout

CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View

（1）视差滚动子View(Parallax scrolling children):
以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点）。将布局参数app:layout_collapseMode设为parallax

（2）将子View位置固定(Pinned position children)：子View可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。将app:layout_collapseMode设为pin。

（3）折叠Title（Collapsing title）：当布局内容全部显示出来时，title是最大的，但是随着View逐步移出屏幕顶部，title变得越来越小。你可以通过调用setTitle方法来设置title。

四、参考文章

https://www.jianshu.com/p/bbc703a0015e

https://segmentfault.com/a/1190000015340856