使用 CollapsingToolbarLayout 折叠工具栏下方的内容

Question

您好，我一直在尝试以稍微不同的方式使用代码折叠工具栏。让我给你看看我的布局

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

    <android.support.design.widget.TabLayout
            android:id="@+id/tabControl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorHeight="4dp"
            app:tabMaxWidth="500dp">

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


    <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <FrameLayout
                android:id="@+id/headerContainer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="none"/>

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

    <LinearLayout
            android:id="@+id/topLayout"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:orientation="vertical"
            android:visibility="gone"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
        android:id="@+id/tabContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

基本上我想折叠 headerContainer 保持 tabControl 就位。然而真正发生的是 headerContainer 永远不会折叠并与 tabControl 一起保持在顶部。

我不知道为什么这不起作用，因为当我将 headerContainer 放在 tabControl 上方时，headerContainer 会按应有的方式折叠。

只是当我把它放在 tabControl 下面的 headerContainer 时，东西不再折叠了。 我尝试了不同的解决方案，但似乎都不起作用，布局似乎是正确的，它应该被折叠但它不是。

我已经为此苦苦挣扎了两天，因此感谢您的帮助！谢谢！

Answer 1

如果我理解你的意思，你想在屏幕截图中进行垂直滚动时的行为吗？

<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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ScrollingActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <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"
        app:toolbarId="@+id/toolbar">

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

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:tabIndicatorHeight="4dp"
                app:tabMaxWidth="500dp"/>

        </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.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

同样在activity中设置工具栏：setSupportActionBar(toolbar)

Answer 2

我不知道为什么这不起作用，因为我把 headerContainer 在 tabControl 上方，headerContainer 按原样折叠。

你已经设置了：

app:layout_collapseMode="none"

在headerContainer 所以，试试这个（在headerContainer FrameLayout）：

app:layout_collapseMode="parallax"

---

另外，在您的layout 中看不到任何Toolbars。里面只有一个TabLayout。