如何使用Toolbar与AppBarLayout开发自定义头部布局？

嗨，我来帮你一步步实现基于Toolbar和AppBarLayout的自定义头部布局！其实很简单，因为Toolbar本身就是一个ViewGroup，你可以直接在它内部嵌入任意自定义XML内容，再结合AppBarLayout的特性还能实现滚动折叠这类高级效果。下面分两种常见场景来讲解：

1. 静态自定义头部（不涉及滚动折叠） #

如果你只需要一个固定样式的自定义头部，直接在你的Toolbar标签内部添加自定义视图就行。比如你想加一个居中标题、左侧返回按钮和右侧图标，示例代码如下：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:supportsRtl="false"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <!-- 这里开始添加你的自定义XML内容 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="center_vertical">

            <!-- 左侧返回按钮 -->
            <ImageView
                android:id="@+id/iv_back"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:padding="12dp"
                android:src="@drawable/ic_back_arrow"/>

            <!-- 居中标题 -->
            <TextView
                android:id="@+id/tv_title"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="我的自定义标题"
                android:textSize="18sp"
                android:textColor="@color/white"
                android:gravity="center"/>

            <!-- 右侧操作图标 -->
            <ImageView
                android:id="@+id/iv_menu"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:padding="12dp"
                android:src="@drawable/ic_menu"/>

        </LinearLayout>
        <!-- 自定义内容结束 -->

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

然后在你的Activity里，记得隐藏默认ActionBar，并把Toolbar绑定（如果需要保留ActionBar的菜单特性）：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = findViewById(R.id.toolbar);
    // 隐藏默认标题，改用自定义标题
    toolbar.setTitle("");
    setSupportActionBar(toolbar);

    // 给自定义按钮设置点击事件
    findViewById(R.id.iv_back).setOnClickListener(v -> onBackPressed());
}

2. 可滚动折叠的自定义头部（高级场景） #

如果你的页面需要滚动时头部折叠的效果，就需要在AppBarLayout里嵌套CollapsingToolbarLayout，把Toolbar和自定义视图放在其中。示例代码：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="@color/primary_color"
        app:titleEnabled="false">

        <!-- 自定义折叠区域内容（比如背景大图、副标题） -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/header_bg"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"/>

        <!-- 折叠后固定在顶部的Toolbar -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:supportsRtl="false"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_collapseMode="pin">

            <!-- Toolbar内的自定义内容 -->
            <TextView
                android:id="@+id/tv_collapsed_title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="折叠标题"
                android:textSize="18sp"
                android:textColor="@color/white"
                android:gravity="center_vertical"/>

        </android.support.v7.widget.Toolbar>

    </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">

    <!-- 页面滚动内容 -->
</android.support.v4.widget.NestedScrollView>

这里的关键属性说明：

• app:layout_scrollFlags="scroll|exitUntilCollapsed"：控制滚动时头部的折叠行为，scroll表示跟随滚动，exitUntilCollapsed表示折叠到Toolbar高度后停止
• app:layout_collapseMode：设置视图折叠模式，parallax是视差滚动效果，pin是固定在顶部

最后补充几个注意点：

• 如果你不需要ActionBar的默认特性，也可以不用调用setSupportActionBar(toolbar)，直接把Toolbar当作普通ViewGroup自定义交互
• 自定义视图时要注意Toolbar的高度（?android:attr/actionBarSize），避免内容超出或布局错乱

内容的提问来源于stack exchange，提问作者Adil