Android UI Material Design交互设计(五)--CollapsingToolbarLayout 折叠布局

Material Design 交互设计在Android上的应用，Design Support Library 是在2015年
Google官方发布的一个全新兼容函数库，它使得开发这可以在Android2.1（API
7）及以上的设备中实现交互设计的效果。这个函数库提供了一些了的控件，主要包括：Snackbar
、NavigationView、FloatingActionButton、TextInputLayout、TabLayout、CollapsingToolbarLayout、AppBarLayout、CoordinatorLayout

Android UI Material Design交互设计(一)–BottomNavigationView底部菜单
Android UI Material Design交互设计(二)–Toolbar的基本使用与样式修改
Android UI Material Design交互设计（三）–SnackBar 详解
Android UI Material Design交互设计（四）–AppBarLayout 与Toolbar结合
Android UI Material Design交互设计(五)–CollapsingToolbarLayout 折叠布局
Android UI Material Design交互设计(六)–CoordinatorLayout之精髓Behavior 自定义Behavior

在使用Design Support Library之前，首先需要添加如下依赖

implementation 'com.android.support:design:28.0.0'

效果如下：

CollapsingToolbarLayout

CollapsingToolbarLayout折叠布局，想要了解CollapsingToolbarLayout布局最好先了解CoordinatorLayout，AppBarLayout，Toolbar这些控件，我们需要结合这些控件一起使用。

在上一片文章中：

Android UI Material Design交互设计（四）–AppBarLayout 与Toolbar结合
我们能做到如下效果（这块实现代码去AppBarLayout 与Toolbar结合]文章中查看）

我们就再这个基础上来实现刚开始展示的效果。这里就用到了CollapsingToolbarLayout，我们需要在AppBarLayout添加一个CollapsingToolbarLayout折叠布局，让该折叠布局包裹着Toolbar，并添加一个ImagView 来当背景图片。

布局代码如下：
⚠️这里去掉来Toolbar的背景颜色所以看上去是透明的。
⚠️CollapsingToolbarLayout上加来app:contentScrim="?attr/colorPrimary"属性导致动画最后Toolbar由透明变不透明

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode = "parallax"
                android:scaleType="centerCrop"
                android:adjustViewBounds="true"
                android:src="@drawable/poster"
                android:fitsSystemWindows="true"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="69dp"
                app:title="@string/app_name"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/icon_back"
                app:popupTheme="@style/OverflowMenuStyle"/>

        </android.support.design.widget.CollapsingToolbarLayout>



    </android.support.design.widget.AppBarLayout>


       <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_overlapTop="30dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="500dp"
            android:layout_margin="20dp"
            android:background="@color/colorAccent">

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

效果如下：

我们还可以给NestedScrollView加上一个属性：app:behavior_overlapTop="30dp"让它的子 view压在背景图上
代码如下：

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode = "parallax"
                android:scaleType="centerCrop"
                android:adjustViewBounds="true"
                android:src="@drawable/poster"
                android:fitsSystemWindows="true"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="69dp"
                app:title="@string/app_name"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/icon_back"
                app:popupTheme="@style/OverflowMenuStyle"/>

        </android.support.design.widget.CollapsingToolbarLayout>



    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_overlapTop="30dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            app:cardElevation="8dp"
            app:contentPadding="16dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lineSpacingExtra="8dp"
                android:text="sdfsdfsdf"/>

        </android.support.v7.widget.CardView>

    </android.support.v4.widget.NestedScrollView>

效果如下:

NestedScrollView 中的属性
app:behavior_overlapTop=“30dp”

是设置上图内容压着背景图的一部分。