如何在 CollapsingToolbarLayout 中使用带有 Toolbar 的 TabLayout？

Posted

技术标签:

【中文标题】如何在 CollapsingToolbarLayout 中使用带有 Toolbar 的 TabLayout？【英文标题】：How to use a TabLayout with Toolbar inside CollapsingToolbarLayout? 【发布时间】：2015-08-21 05:56:50 【问题描述】：

我正在查看chrisbanes/cheesesquare，我正在尝试将带有工具栏的 TabLayout 放在 CollapsingToolbarLayout 中，这是我的代码

<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:layout_
    android:layout_
    android:fitsSystemWindows="true">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_
            android:layout_
            android:background="@color/primary_dark"
            android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_
                android:layout_
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                android:layout_gravity="top"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_
                android:layout_
                android:layout_gravity="bottom"/>

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

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

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

当 CollapsingToolbar 打开时，这会出现这样的情况，这正是我要寻找的：

但是当我折叠它时（通过拉起图像）我得到了这样的东西

这是由于我将工具栏设置为 110dip 的原因，如果我保留选项卡和工具栏标题重叠的默认设置。所以我正在寻找正确的方法来做到这一点，以便工具栏的标题在 appbar 上得到正确的位置，并且 tablayout 在它下面。有没有办法做到这一点？

【问题讨论】：

我不确定，因为我自己刚刚开始玩设计库，但TabLayout上不应该有app:layout_collapseMode="pin"吗？ @XaverKapeller 是的，我已经尝试过了，这是合乎逻辑的起点，但不是这样，也许他们还没有完全实现 pin/parallax 功能：/ 我还想尝试将TabLayout 放在AppBarLayout 中而不是CollapsingToolbarLayout 中。 【参考方案1】：

经过整整 2 天的尝试，找到了一个纯 Android 解决方案，这就是我的解决方案。

目标：工具栏下的标签，两个视图后面都有图像背景

（TL；DR：见附件 XML）

我想要实现的行为是将 CollapsingToolbarLayout 和 TabLayout 放在图像顶部，当“标题”向上滚动（超出屏幕）然后显示 ActionBar（工具栏）及其下方的 TabLayout。

问题：

由于 CollapsingToolbarLayout 将在折叠时隐藏所有子视图，除了 Toolbar 视图，因此 TabLayout 必须放置在 之外CollapsingToolbarLayout 但在 AppBarLayout 内，因此它“停靠”在屏幕顶部和 Toolbar 下方。现在的问题是放置在 CollapsingToolbarLayout 内的 ImageView 将不在 TabLayout 下方，而是在其垂直上方。

解决方案：

为了解决这个问题，我们需要让 ImageView 更高，这样如果我们将 TabLayout 放在 CollapsingToolbarLayout 内，它就会覆盖它。但是因为我们将 TabLayout 放在 CollapsingToolbarLayout 之外，所以我们需要确保 ImageView 被绘制，即使它的父视图 (CollapsingToolbarLayout ) 更短。 clipChildren="false" 来救援！ clipChildren 告诉 ViewGroup 如果它们的子视图大于它的大小，则不要剪辑它们，所以基本上现在我们可以使 ImageView 更高，它仍然会被绘制在标签布局。这样我们就可以在一个漂亮的图像上方同时拥有 CollapsingToolbarLayout 和 TabLayout！

我的布局 xml：

<?xml version="1.0" encoding="utf-8"?>


<android.support.design.widget.AppBarLayout
    android:layout_
    android:layout_
    android:clipChildren="false" /////IMPORTANT!!!!!!
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_
        android:layout_
        android:clipChildren="false"  /////IMPORTANT!!!!!!
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

        <ImageView
            android:layout_
            android:layout_
            android:scaleType="centerCrop"
            android:src="@drawable/poster"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.CollapsingToolbarLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/main_tabs"
        android:layout_
        android:layout_
        app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>


<include layout="@layout/content_main" />

【讨论】：

@PhoenixWang 请随时提供适用于 scrimContent 的解决方案 很好的答案，但要解决 contentScrim 的问题，我所做的是使用半透明颜色 #88000000 作为应用程序：tabBackground="@ color/black_overlay_dark" 和 app:contentScrim="@color/black_overlay_dark" 看起来很酷耶！！【参考方案2】：

这是我设法做到这一点的方法，我认为这不是最好的解决方案，但如果有人找到更好的方法，请随时发布答案。

<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:layout_
    android:layout_
    android:fitsSystemWindows="true">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_
            android:layout_
            android:background="@color/primary_dark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="20dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_
                android:layout_
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_
            android:layout_
            app:tabGravity="center"
            app:tabMode="scrollable"
            android:gravity="bottom"/>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

【讨论】：

这行得通，但内容似乎不想在隐藏后向后滚动。 这是正确的答案，并且提到的错误JMRboosties 已在22.2.1 中修复。 code.google.com/p/android/issues/detail?id=178656 如何设置图像视图？我无法将单个图像设置为工具栏和选项卡的背景？有什么提示吗？ 我认为，这是更好且可行的解决方案：blog.grafixartist.com/… 显然，这不是最好的解决方案。 OP，和我，希望标签在图片上。 @Tomas 您的解决方案也不完整。在其中，标题没有移动。【参考方案3】：

原来由于AppBarLayout扩展了LinearLayout，所以里面可以有两个CollapsingToolBarLayout（扩展FrameLayout）。我所做的是让第一个 CollapsingToolBarLayout 容纳我想要消失的内容，并给它 AppBarLayout 标志：

app:layout_scrollFlags="scroll|exitUntilCollapsed"

对于实际上有标签的第二个 CollapsingToolbarLayout，我将它的滚动标志设置为：

app:layout_scrollFlags="scroll|enterAlways"

最终的 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:layout_
        android:layout_>

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_
            android:layout_
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="@dimen/quadruple_margin"
            app:layout_collapseParallaxMultiplier="0.7"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                android:id="@+id/header_view"
                android:layout_
                android:layout_
                android:animateLayoutChanges="true"
                android:background="@color/black_40">

                <!-- YOUR CONTENT HERE -->

            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/action_bar"
                android:layout_
                android:layout_
                app:contentInsetLeft="@dimen/triple_margin"
                app:contentInsetStart="@dimen/triple_margin"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.AppCompat.NoActionBar"
                app:theme="@style/Theme.AppCompat.NoActionBar" />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_
            android:layout_
            app:layout_scrollFlags="scroll|enterAlways">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_
                android:layout_
                android:layout_gravity="bottom"
                android:layout_marginTop="@dimen/half_margin"
                app:layout_scrollFlags="enterAlways"
                app:tabBackground="@color/transparent"
                app:tabGravity="center"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/white"
                app:tabTextColor="@color/grey_400" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

【讨论】：

这也是个好主意:) 这工作正常。但在第二个 CollapsingToolbarLayout 中没有得到 app:tabBackground="@color/transparent" @AthiraSanthosh @color/transparent 是您必须在 res/values/colors.xml 中定义的颜色，如下所示：#00000000 我用过这个。但是我在第二个 CollapsingToolbarLayout 中获得了第一个 CollapsingToolbarLayout 背景色 看起来很烂。这是Android可以做到的最好的吗？怀疑。【参考方案4】：

我创建了这个sample 项目，在其中使用了 CollapsingToolbarLayout 中的 TabLayout

在 API 14-23 上测试。工作没有任何问题。

【讨论】：

【参考方案5】：

我找到了一个简单的解决方案，使其适用于透明 TabLayout 背景：

在CollapsingToolbarLayout 中使用expandedTitleMarginBottom 以避免扩展标题重叠TabLayout 将layout_height 设置为TabLayout 为常数值 将layout_marginBottom 添加到Toolbar 与TabLayout 相同的值layout_height 
<android.support.design.widget.AppBarLayout
    android:layout_
    android:layout_>

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_
        android:layout_
        app:expandedTitleMarginBottom="70dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <YourMagicViewWithBackgroundImageTextAndOtherStuff
            android:layout_
            android:layout_
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:layout_
            android:layout_
            android:layout_marginBottom="50dp"
            app:layout_collapseMode="pin" />

        <android.support.design.widget.TabLayout
            android:layout_
            android:layout_
            android:layout_gravity="bottom" />

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

【讨论】：

这是最直接最简单的解决方案。它适用于 scrimContent 并且应该是公认的答案。谢谢！ 像魅力一样工作。【参考方案6】：

使用带有源代码的新材料设计支持库示例的带有标签的折叠工具栏

我使用了新材料设计支持库的官方折叠工具栏功能。

此处折叠视图高度为 256dp，标签高度为 56dp

我创建了以下路径，我将图像分成两部分，一部分用于折叠视图，另一部分用于选项卡。

我根据dp to pixel 尺寸用高分辨率drawable xxxhdpi 剪切图像并放入drawable 文件夹，以便它可以调整到所有屏幕尺寸

我有 2000x1246 的图像

顶部图像 256dp= 2000x1024 像素

底部标签图像 56dp= 2000x224 像素

这是source code的完整示例

【讨论】：

好主意，虽然我想，没有视差。【参考方案7】：

使用此代码 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_
android:layout_
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:layout_
    android:layout_
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_
        android:layout_
        android:fitsSystemWindows="true"
        app:contentScrim="@color/PrimaryColor"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/img"
            android:layout_
            android:layout_
            android:background="@drawable/background_material"
            android:fitsSystemWindows="true"
            android:scaleType="fitXY"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:gravity="top"
            android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleMarginTop="15dp"/>



        <android.support.design.widget.TabLayout
            android:id="@+id/tabsInLogin"
            android:layout_
            android:layout_
            android:layout_gravity="bottom"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="@android:color/white" />

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

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

<android.support.v4.view.ViewPager
    android:id="@+id/viewpagerDetail"
    android:layout_
    android:layout_
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Java 代码

  collapsingToolbarLayout =    (CollapsingToolbarLayout)findViewById(R.id.collapse_toolbar);
    collapsingToolbarLayout.setTitleEnabled(false);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(cheeseName);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

【讨论】：

setDisplayHomeAsUpEnabled 正在使用 23 sdk 或更高版本【参考方案8】：

这是我的想法。

我将标签布局放置在 AppBar 之外，并用垂直线性布局将其包裹起来，并像这样设置位置

<LinearLayout
    android:layout_
    android:layout_
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tabDetail"
    android:layout_
    android:layout_
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

如果您不使用另一个两倍高度的布局包装 TabLayout。当你将 layout_anchor 设置为 AppBar 时，只有一半的 TabLayout 会在 AppBar 中。

这是我的整个 XML 文件。

<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:layout_
android:layout_
android:fitsSystemWindows="true">

<android.support.v4.view.ViewPager
    android:id="@+id/viewpagerDetail"
    android:layout_
    android:layout_
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_
    android:layout_
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_
        android:layout_
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginBottom="54dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_
            android:layout_
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

<LinearLayout
    android:layout_
    android:layout_
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tabDetail"
    android:layout_
    android:layout_
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

我不确定这组 dp 值是否适合您的屏幕尺寸，但它适合我的。如果有人有更好的答案，请分享。

对不起，如果我的代码或英语有误。谢谢！！

【讨论】：

【参考方案9】：

我遇到了类似的问题，我的解决方案非常简单。我所要做的就是将工具栏设置为支持操作栏（我使用的是Theme.NoActionBar 样式库）

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

【讨论】：

【参考方案10】：

下面的代码实现了展开/折叠工具栏的操作。

基本上我们会有一个CoordinatorLayout（FrameLayout）AppBarLayout（实现了很多东西设计功能的垂直线性布局），CollapsingToolbarLayout（是工具栏的包装器） ImageView 和工具栏

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_
    android:layout_
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_
        android:layout_
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            android:id="@+id/header"
            android:layout_
            android:layout_
            android:background="@drawable/logo"
            android:minHeight="300dp"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin" />


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


<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_
            android:layout_
            app:tabGravity="center"
            app:tabMode="scrollable"
            android:gravity="bottom"/>

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


    <FrameLayout
        android:id="@+id/fr_container_home"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

Observation
- FrameLayout is necessary app: layout_behavior = "@string/appbar_scrolling_view_behavior"
-TOOLBAR Not need backgroud, insert the color in the attribute app:contentScrim = "?Attr/ColorPrimary" from our CollapsingToolbarLayout

在你的课堂上

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("YourTitle");
setSupportActionBar(toolbar);

【讨论】：

【参考方案11】：

我将 TabLayout 放在 AppBarLayout 之外，并将 ViewPager 和 TabLayout 一起包裹在 LinearLayout 中。

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_
    android:layout_
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="@color/profile_header_bg_color"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_
        android:layout_
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        android:background="@color/profile_header_bg_color">

        <ImageView
            android:layout_
            android:paddingTop="60dp"
            android:layout_
            android:background="@color/profile_header_bg_color"
            android:id="@+id/user_details"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            app:theme="@style/ThemeOverlay.AppCompat.Light"
            android:background="@color/profile_header_bg_color"
            app:layout_collapseMode="pin"/>

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

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

<LinearLayout
    android:layout_
    android:layout_
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_
        android:layout_ />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_
        android:layout_ />
</LinearLayout>

【讨论】：

【参考方案12】： 

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_
    android:layout_
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_
        android:layout_
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        android:minHeight="?attr/actionBarSize" >

        <include layout="@layout/YOUR-CONTENT-LAYOUT" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            android:fitsSystemWindows="false"
            app:contentScrim="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<LinearLayout
    android:layout_
    android:layout_
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:orientation="vertical" >

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_
        android:layout_
        app:layout_scrollFlags="scroll"
        android:background="@color/primary_color" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_
        android:layout_ />
</LinearLayout>

【讨论】：

【参考方案13】： 
<?xml version="1.0" encoding="utf-8"?>
<ui.screen.ProfileView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/content"
        android:layout_
        android:layout_
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/profile_viewpager"
            android:layout_
            android:layout_
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.AppBarLayout
            android:id="@+id/profile_appbar_layout"
            android:layout_
            android:layout_
            android:background="@android:color/transparent"
            app:elevation="2dp">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_
                android:layout_
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:expandedTitleTextAppearance="@android:color/transparent"
                app:elevation="2dp">

                <LinearLayout
                    android:id="@+id/profile_user_layout"
                    android:layout_
                    android:layout_
                    android:background="?attr/colorPrimary"
                    android:clipChildren="false"
                    android:clipToPadding="false"
                    android:orientation="vertical"
                    android:paddingBottom="24dp"
                    android:paddingLeft="24dp"
                    android:paddingRight="24dp"
                    android:paddingTop="64dp"
                    app:layout_collapseMode="parallax">

                    <LinearLayout
                        android:layout_
                        android:layout_
                        android:clipChildren="false"
                        android:orientation="horizontal">

                        <FrameLayout
                            android:layout_
                            android:layout_
                            android:clipChildren="false">

                            <de.hdodenhof.circleimageview.CircleImageView
                                android:id="@+id/profile_user_photo"
                                android:layout_
                                android:layout_
                                android:src="@mipmap/ic_launcher"
                                app:border_
                                app:border_color="@color/white" />

                            <View
                                android:id="@+id/profile_user_medal"
                                android:layout_
                                android:layout_
                                android:background="@drawable/medal"
                                android:layout_marginRight="6dp"
                                android:layout_marginTop="2dp"
                                android:layout_gravity="top|right" />

                        </FrameLayout>

                        <LinearLayout
                            android:id="@+id/profile_user_details"
                            android:layout_
                            android:layout_
                            android:layout_weight="1"
                            android:orientation="vertical"
                            android:layout_marginLeft="16dp">

                            <TextView
                                android:id="@+id/profile_user_name"
                                android:layout_
                                android:layout_
                                android:text="Kateřina Bíla"
                                android:textColor="@color/white"
                                android:textSize="24sp" />

                            <TextView
                                android:id="@+id/profile_user_completed_activities"
                                android:layout_
                                android:layout_
                                android:text="Dokoncene 4 z 5"
                                android:textColor="@color/white"
                                android:textSize="16sp" />

                            <LinearLayout
                                android:layout_
                                android:layout_
                                android:orientation="horizontal">

                                <TextView
                                    android:id="@+id/profile_user_progress_text"
                                    android:layout_
                                    android:layout_
                                    android:textSize="20sp"
                                    android:textColor="@color/white"
                                    android:text="50%" />

                                <com.rey.material.widget.ProgressView
                                    android:id="@+id/profile_user_progress_bar"
                                    android:layout_
                                    android:layout_
                                    android:visibility="visible"
                                    android:layout_gravity="center_vertical"
                                    android:layout_marginLeft="8dp"
                                    android:paddingRight="16dp"
                                    app:pv_progressMode="determinate"
                                    app:pv_circular="false"
                                    app:pv_autostart="true"
                                    app:lpd_strokeSize="3dp"
                                    app:lpd_strokeColor="@color/red"
                                    app:lpd_strokeSecondaryColor="@color/white"
                                    app:lpd_maxLineWidth="62dp"
                                    app:lpd_minLineWidth="31dp"
                                    app:pv_progressStyle="@style/ProfileTotalProgressBar"
                                    app:pv_progress="0.5" />


                            </LinearLayout>


                        </LinearLayout>
                    </LinearLayout>


                </LinearLayout>

                <include layout="@layout/toolbar" />

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

            <FrameLayout
                android:layout_
                android:layout_
                app:elevation="2dp">

                <android.support.design.widget.TabLayout
                    android:id="@+id/profile_tab_layout"
                    android:layout_
                    android:layout_
                    android:layout_gravity="top"
                    android:background="?attr/colorPrimary"
                    app:tabTextColor="@color/white_87"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="@color/white"
                    app:tabIndicatorHeight="4dp"
                    app:tabMode="fixed"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextAppearance="@style/TabTextAppearance"
                    app:elevation="2dp" />

            </FrameLayout>

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

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

</ui.screen.ProfileView>

这对我有用，但仅适用于 api 19+ 的设备

【讨论】：

【参考方案14】：

正如之前有人指出的那样，看起来这是因为（来自文档）：

导航按钮在工具栏的 最小高度（如果已设置）。

因此，根据初始布局，您可以执行以下操作：

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_
            android:layout_
            android:background="@color/primary_dark"
            android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_
                android:layout_
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

             <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_
                android:layout_
                android:layout_
                android:layout_gravity="bottom"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                android:layout_gravity="top"
                app:titleMarginTop="13dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

其中 app:titleMarginTop 是工具栏大小减去 TabLayout 大小减去文本大小所需的间距，它应该很好地对齐。

【讨论】：

【参考方案15】：

以上所有代码都只折叠“CollapsingtoolbarLayout”组件。这意味着如果我们滚动“ViewPager”内容的页面，它就不起作用。

我现在将“ViewPager”替换为“FrameLayout”，正如我们所期望的那样。

我期待，如果滚动 Viewpager 的页面，那么应该听“CollapsingToolbarLayout”。为此，我使用了“NestedScrollView”。但问题是“ViewPager”在“NestedScrollView”中不起作用。

所以最后我用 FrameLayout 实现了。

但问题是“tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() " 被贬低了

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_>

    <!--<android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />-->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_
        android:fitsSystemWindows="true"
        >

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

            <ImageView
                android:id="@+id/backdrop"
                android:layout_
                android:layout_
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:visibility="gone"
                android:src="@drawable/srl_mallikaarjuna_lrg"
                app:layout_collapseMode="parallax"

                />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                >
                <RelativeLayout
                    android:layout_
                    android:layout_>
                    <TextView
                        android:layout_
                        android:layout_
                        android:gravity="center_horizontal|center_vertical"
                        android:text="Calendar"/>
                </RelativeLayout>

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

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_
                android:layout_
                android:layout_gravity="bottom"
              >

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

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

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

    android:layout_
    android:layout_
    android:background="#fefefe"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

  <FrameLayout
      android:layout_
      android:layout_
      android:id="@+id/frame_container">

  </FrameLayout>

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


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

在没有 ViewPager 的情况下创建 Tablayout：http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-android-without-viewpager

【讨论】：

【参考方案16】：

Toolbar> 将底部边距设置为 48dp，将 layout_height 设置为 ?attr/actionBarSize

<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:layout_
android:layout_
android:fitsSystemWindows="true">

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_
    android:layout_
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_
    android:layout_
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_
        android:layout_
        android:background="@color/primary_dark"
        android:minHeight="150dip"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginBottom="60dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_
            android:layout_
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:layout_gravity="top"
            android:layout_marginBottom="38dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_
            android:layout_
            android:layout_gravity="bottom"/>

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

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

【讨论】：

【参考方案17】：

我可以通过将 TabLayout 放在第二个 CollapsingToolbarLayout 中并设置滚动标志进入 Always Collapsed 来完成这项工作。

<android.support.design.widget.AppBarLayout
    android:id="@+id/event_guide_appbar"
    android:layout_
    android:layout_>

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/event_guide_collapsingToolbarLayout"
        android:layout_
        android:layout_
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginBottom="80dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/event_guide_banner_image"
            android:layout_
            android:layout_
            android:background="@drawable/darkened_placeholder"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/event_guide_toolbar"
            android:layout_
            android:layout_
            android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin" />
    </android.support.design.widget.CollapsingToolbarLayout>

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_
        android:layout_
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

        <android.support.design.widget.TabLayout
            android:id="@+id/event_guide_tabbar"
            android:layout_
            android:layout_
            android:background="?attr/colorPrimary"
            android:theme="@style/BaseTheme"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" />

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

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/event_guide_swipe_refresh"
    android:layout_
    android:layout_
    android:background="@color/light_gray"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.meetball.activity.EventGuideActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/event_guide_recycler_view"
        android:layout_
        android:layout_
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

【讨论】：

【参考方案18】：

尝试将Toolbar 与app:layout_collapseMode="pin" 放在CollapsingToolbar 内，将TabLayout 与app:layout_scrollFlags="enterAlways" 放在外面

【讨论】：

以上是关于如何在 CollapsingToolbarLayout 中使用带有 Toolbar 的 TabLayout？的主要内容，如果未能解决你的问题，请参考以下文章

在QGIS中如何添加天地图的WMTS

如何在表单提交后保留文本（如何在提交后不删除自身？）

如何在异步任务中调用意图？或者如何在 onPostExecute 中开始新的活动？

在 Avkit 中如何使用这三行代码，以及如何将音乐静音”

如何在 JDBC 中启动事务？

如何在 Fragment 中调用 OnActivityResult 以及它是如何工作的？