Material Design - CollapsingToolbarLayout

关键字：CollapsingToolbarLayout、材料设计
项目地址：AboutMaterialDesign

安卓材料设计中，这是最后一个用于布局中的类 -- CollapsingToolbarLayout。CollapsingToolbarLayout 是继承自 FramenLayout 的子类，它为我们提供了滑动渐变的效果。除此之外，并没有其他功能，因此使用的场景其实非常单一，而且明白了主要的参数，就可以驾驭它所提供的功能。。我们先看看基本效果：

GIF.gif

下面先说注意点：

1.建议使用最新的 design 包，因为版本在不断更新，越新的版本 bug 越少。比如这次测试的时候，我在三星手机上发现 Toolbar 的展示位置不对，后来更新了 design 包的版本，问题就没了。
2.通常使用 CollapsingToolbarLayout 时，结构都是固定的，即： CoordinatorLayout - AppBarLayout - CollapsingToolbarLayout - ToolbarLayout && ImageView。且 Toolbar 外部的容器和 ImageView 都需要有 fitSystemWindow="true" 属性才能达到上图效果
3.Toolbar的高度必须固定，不能设置为"wrap_content"，否则Toolbar不会滑动，也没有折叠效果
4.CoordinatorLayout的直接子View必须是一个可滑动的控件，并且内部有内容可以滑动。同时需要设置app:layout_behavior
5.当效果出现重叠或者其他不如意的效果，那一般都和你在用的 CollapsingToolbarLayout 没有关系，仔细检查一下 Toolbar 和 AppBarLayout 的属性设置对不对，因为 CollapsingToolbarLayout 可以设置的东西真的不多。

一、我就是列一下属性

下面介绍一下 CollapsingToolbarLayout 的属性：

contentScrim                        -- 折叠后内容的显示颜色
statusBarScrim                      -- 折叠后菜单的显示颜色
expandedTitleGravity                -- 展开时 Toolbar title 的显示位置
collapsedTitleGravity               -- 折叠时 Toolbar title 的显示位置
expandedTitleMargin                 -- 对应的有四个 上下左右
expandedTitleTextAppearance         -- 展开 title 样式
collapsedTitleTextAppearance        -- 折叠 title 样式
scrimVisibleHeightTrigger           -- 设置收起多少高度时，显示ContentScrim的内容
layout_collapseMode                 -- 折叠模式
                                        -none 跟随滚动的手势进行折叠。
                                        -parallax 视差滚动，搭配layout_collapseParallaxMultiplier（视差因子）使用。
                                        -pin 固定不动。
layout_collapseParallaxMultiplier   -- 视差因子，范围：0-1，默认0.5

二、我就是贴一下代码

附上开头第二张动态图的布局代码：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:fitsSystemWindows="true" ----------------------------------------------- ***
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:fitsSystemWindows="true" ------------------------------------------- ***
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:fitsSystemWindows="true" --------------------------------------- ***
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/detail_backdrop_height"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" --------------------- ***
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:fitsSystemWindows="true" ------------------------------------ ***
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" /> ------------------------------- ***

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" /> ------------------------------------ ***

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

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

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">
        </LinearLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_down"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

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

参考：
1.CheeseDemo
2.StackOverFlow

Material Design - CollapsingToolbarLayout

一、我就是列一下属性

二、我就是贴一下代码

推荐阅读更多精彩内容