在上一節(jié)中呻征，所演示的最終效果圖如下：

56.gif

這張圖中，頂部標(biāo)題欄是一個(gè)標(biāo)題為"權(quán)威發(fā)布"的文本（TextView），Google官方推出一個(gè)專門做為標(biāo)題的控件饺蔑。

[Toolbar]

Android 5.0之后巍耗，Google推出新的標(biāo)題控件秋麸，舊的標(biāo)題控件ActionBar已被Toolbar替代。

首先看一下以下布局：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:orientation="vertical"
        app:elevation="0dp">

        <ImageView
            android:id="@+id/imageview"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="center"
            app:layout_scrollFlags="scroll"
            android:src="@mipmap/top_pic" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior=".MyBehavior"/>


    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#C49797"
        app:title="我是Toolbar"
        app:titleTextColor="@color/colorPrimary"
        app:navigationIcon="@mipmap/back"
        app:layout_collapseMode="parallax"
        app:layout_behavior=".MyBehavior2"
        app:layout_collapseParallaxMultiplier="0.7"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

在Toolbar控件上添加了MyBehavior2行為炬太，MyBehavior2的代碼請(qǐng)查看上一篇文章

http://www.reibang.com/p/f2eb80a44dd9

效果如下：

57.gif

所以灸蟆，這里將TextView換成Toolbar是沒有任何問題的。

[CollapsingToolbarLayout]

這個(gè)控件可以讓Toolbar具有折疊特效亲族，也是許多App的常用手段炒考。

先貼一下布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:orientation="vertical"
        app:elevation="0dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:collapsedTitleTextAppearance="@style/toolbarTitle"
            app:expandedTitleTextAppearance="@style/toolbarTitle"
            app:collapsedTitleGravity="left"
            app:expandedTitleGravity="bottom|center"
            app:title="美團(tuán)外賣"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:id="@+id/imageview"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="center"
                app:layout_scrollFlags="scroll"
                android:src="@mipmap/top_pic" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent"
                app:title="我是Toolbar"
                app:titleTextColor="@color/colorPrimary"
                app:navigationIcon="@mipmap/back"
                app:layout_collapseMode="pin"
                app:layout_collapseParallaxMultiplier="0.7"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior=".MyBehavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

效果如下：

58.gif

總之可缚，完成Toolbar的折疊特效需要的控件是：CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar。

另外斋枢，CollapsingToolbarLayout控件有一些屬性需要系統(tǒng)了解一下帘靡，可以在網(wǎng)上查找一些資料：

可折疊式標(biāo)題欄 -- CollapsingToolbarLayout 的屬性

toolbarTitle是文字樣式，定義文字的大小和顏色

<style name="toolbarTitle" >
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">#ffffff</item>
</style>

[本章完...]