Android CoordinatorLayout进阶教程-CollapsingToolbarLayout+FloatingActionButton

CollapsingToolbarLayout简介

CollapsingToolbarLayout 实现 Toolbar 的折叠效果， CollapsingToolbarLayout 通常被设计用于 AppBarLayout 的子布局，从而实现一些滚动特性的交互动画效果
下面我先来看一个简单的示例

我们来看一下这个示例的布局代码

<?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">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collsping_Toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/blue"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/green"
            app:title="测试"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@mipmap/ghsy" />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:id="@+id/rv_demo1_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:layout_width="match_parent"
            android:text="@string/geci"
            android:textSize="20sp"
            android:layout_height="wrap_content"/>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

AppBarLayout中添加一个CollapsingToolbarLayout布局，CollapsingToolbarLayout布局中添加头部背景图片以及Toolbar，在上拉滑动时Toolbar中的标题会跟随手势实现一个动画效果最终悬停顶部，下面我重点看一下CollapsingToolbarLayout相关属性

CollapsingToolbarLayout属性

app:contentScrim：当Toolbar收缩到一定程度时的所展现的主体颜色。即Toolbar的颜色。
app:title:当titleEnable设置为true的时候，在toolbar展开的时候，显示大标题，toolbar收缩时，显示为toolbar上面的小标题。
app:scrimAnimationDuration：该属性控制toolbar收缩时，颜色变化的动画持续时间。即颜色变为contentScrim所指定的颜色进行的动画所需要的时间
app:collapsedTitleTextAppearance：指定toolbar收缩时，标题字体的样式。
app:collapsedTitleGravity : 指定toolbar收缩时的标题文字对齐方式。
app:expandedTitleTextAppearance : 指定toolbar展开后的标题文字字体。
app:expandedTitleGravity：指定toolbar展开时，title所在的位置。类似的还有expandedTitleMargin、collapsedTitleGravity这些属性。
app:expandedTitleMargin : 指定展开后的标题四周间距。

添加FloatingActionButton按钮

先来看一下动画效果

看一下布局代码

<?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">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collsping_Toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/blue"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/green"
            app:title="测试"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@mipmap/ghsy" />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:id="@+id/rv_demo1_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:layout_width="match_parent"
            android:text="@string/geci"
            android:textSize="20sp"
            android:layout_height="wrap_content"/>
    </androidx.core.widget.NestedScrollView>


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/bt_float"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_set"
        app:rippleColor="#ffe5e5e5"
        app:backgroundTint="#ffffffff"
        app:elevation="1dp"
        app:pressedTranslationZ="6dp"
        app:fabSize="mini"
        app:borderWidth="0dp"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right"
        android:layout_margin="10dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

在CoordinatorLayout中添加一个FloatingActionButton， app:layout_anchor="@id/appbar"这一行属性是关键，表示依附于AppBarLayout动画的属性，点击事件也是和我们的Button点击事件一样，这里就不展示了

最后附上项目Demo
[点击获取项目源码