Android Material Design控件之CollapsingToolbarLayout

Android Material Design Android官方控件学习目录

CollapsingToolbarLayout

• 折叠工具栏布局
• extends FrameLayout ,作为AppBarLayout的子布局,ToolbarLayout的父布局存在,用于包装Toolbar
• 所以通过app:layout_scrollFlags 五种组合模式 CollapsingToolbarLayout实现嵌套滚动
• 官方为我们实现了折叠Toolbar的效果,不用自己自定义或者使用第三方开源库来实现.

CollapsingToolbarActivity简单展示CollapsingToolbarLayout的折叠效果

• 设置app:layout_scrollFlags= "scroll|exitUntilCollapsed "实现折叠效果
• 需要一个最大值height和一个minHeight
• CollapsingToolbarLayout嵌套一个Toolbar和一个背景ImageView
• 当NestedScrollView向上滚动时,CollapsingToolbarLayout最先向上滚动,一般会折叠到Toolbar高度:Toolbar height 必须为固定值
• 当NestedScrollView向下滚动时,CollapsingToolbarLayout最后向下滚动,扩大到最大height,一般为背景ImageView的高度

布局如下

<?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"
    tools:context="com.wega.materialdesignwidget.CollapsingToolbarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/ll_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/CollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:l