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。
