高级UI<第四十九篇>：NestedScrolling之标题栏优

在上一节中，所演示的最终效果图如下：

56.gif

这张图中，顶部标题栏是一个标题为"权威发布"的文本（TextView），Google官方推出一个专门做为标题的控件。

[Toolbar]

Android 5.0之后，Google推出新的标题控件，旧的标题控件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的代码请查看上一篇文章

https://www.jianshu.com/p/f2eb80a44dd9

效果如下：

57.gif

所以，这里将TextView换成Toolbar是没有任何问题的。

[CollapsingToolbarLayout]

这个控件可以让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="美团外卖"
            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控件有一些属性需要系统了解一下，可以在网上查找一些资料：

可折叠式标题栏 -- CollapsingToolbarLayout 的属性

toolbarTitle是文字样式，定义文字的大小和颜色

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

[本章完...]