CollapsingToolbarLayout 介绍和简单使用

上次我们介绍了AppBarLayout,这一次我们介绍CollapsingToolbarLayout。

CollapsingToolbarLayout 介绍

顾名思义，这是一个可折叠的Toolbar；不过它的使用必须在AppBarLayout的基础之上，它必须作为AppBarLayout的直接子类元素使用；否则起不到应用的效果。

在Android Studio 里创建module/Activity时，就会提供一个ScrollActivity的模板，这个模板就使用了AppBarLayout 和 CollapsingToolbarLayout 实现了可折叠的Toolbar。这里就不在具体介绍如何去创建这个模板了。我们先看一下这个模板实现的大概效果：

ScrollingActivity模板效果

xml的设置如下：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

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

        </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:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

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

首先我们看一下AppBarLayout ,它设置了app:layout_scrollFlags=”scroll|exitUntilCollapsed”，关于’exitUntilCollapsed’，会涉及到minHeight；当发生向上滚动事件时，AppLayout向上滚动，直到我们设置的minHeight，然后我们的滑动View才开始滚动。就算我们滑动的view完全上滑完毕，我们的AppBarLayout也会一直保留我们设置的民Height显示在屏幕的上方。但是我们并没有去设置minHeight呀？从表面上看确实是这样的。我们去看一下CollapsingToolbarLayout的源码来一探究竟。在onLayout方法里我们可以看到这么一段代码：

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);

    // ……省略若干代码
    // Finally, set our minimum height to enable proper AppBarLayout collapsing
    if (mToolbar != null) {
        if (mCollapsingTitleEnabled && TextUtils.isEmpty(mCollapsingTextHelper.getText())) {
            // If we do not currently have a title, try and grab it from the Toolbar
            mCollapsingTextHelper.setText(mToolbar.getTitle());
        }
        if (mToolbarDirectChild == null || mToolbarDirectChild == this) {
            setMinimumHeight(getHeightWithMargins(mToolbar));
            mToolbarDrawIndex = indexOfChild(mToolbar);
        } else {
            setMinimumHeight(getHeightWithMargins(mToolbarDirectChild));
            mToolbarDrawIndex = indexOfChild(mToolbarDirectChild);
        }
    } else {
        mToolbarDrawIndex = -1;
    }
    updateScrimVisibility();
}

在上面代码里我们可以看到它Toolbar的高度作为minHeight了，当我们上滑时，滑到只剩下Toolbar高度时，CollapsingToolbarLayout 就不会再折叠了，会一直保持在屏幕的顶端。

app:layout_collapseMode

除此之外，我们还可以发下在Toolbar里还设置了app:layout_collapseMode="pin"，这里涉及到了折叠模式。我们依次了解一下.

none：这个是默认属性，Toolbar会正常显示，不会有折叠行为；
pin : Toolbar 折叠以后会放到屏幕顶端，固定不动；
parallax：意为视差，当我们上滑时会有视差效果，但是我们之前设置在Toolbar上的东西会滑出屏幕。

具体我们示例：

当我们把折叠模式设置为 pin 时：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

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

        </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:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

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

为了看Toolbar的效果，我在Toolbar上加了一个navigationIcon；效果如下：

这里ToolBar的标题会有折叠效果，但是Toolbar会一直在屏幕的顶端不动。

接下来我们看 parallax:

上代码：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax"
                app:title="标题"
                app:navigationIcon="@mipmap/ic_launcher"
                />

        </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:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

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

这里我们只改了一个app:layout_collapseMode，我们看一下效果：

这里只有折叠的效果，但是Toolbar会滑出屏幕。至于还有 none，就不在介绍了，没有任何效果。

app:contentScrim

不知道有有没有细心同学看到这个app:contentScrim属性。这个是用来设置折叠时Toolbar所在位置的颜色,并且在滑动的时候会有一定的过渡。

刚开始研究的时候，这个属性老是不起作用，后来发现，当CollapsingToolbarLayout里只有的一个Toolbar时，会使用Theme指定的值。当我们在CollapsingToolbarLayout里添加其它的控件，并且这个控件必须是在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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >
            <ImageView
                android:background="@drawable/header_bar"
                android:layout_width="match_parent"
                android:layout_height="260dp"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="标题"
                app:navigationIcon="@mipmap/ic_launcher"
                />

        </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:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

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

在Toolbar上面加了一个ImageView，然后在CollapsingToolbarLayout上设置了app:contentScrim=”?attr/colorAccent”,是一个粉红色。我们看效果：

这里写图片描述

关于CollapsingToolbarLayout的基本的几个点就差不多完了，我们需要注意的是：

app:layout_scrollFlags 要放到AppBarLayout的直接子控件上
app:contentScrim 要放到CollapsingToolbarLayout上
app:contentScrim 这个属性，需要我们在CollapsingToolbarLayout里添加其它的控件，并且这个控件必须是在Toolbar的上方时，这个属性才会起作用

作者：litengit 发表于2016/10/27 18:52:59 原文链接

阅读：28 评论：0 查看评论

CollapsingToolbarLayout 介绍和简单使用