CollapsingToolbarLayout 并在滚动时隐藏工具栏

Posted 2023-02-23

【中文标题】CollapsingToolbarLayout 并在滚动时隐藏工具栏

【英文标题】：CollapsingToolbarLayout and hide toolbar while scrolling

【发布时间】：2016-05-13 05:11:07

【问题描述】：

我正在尝试使用 CoordinatorLayout 和 CollapsingToolbarLayout 创建一些组合布局。

在第一种状态下，当我们在最顶部的页面上，并且还没有滚动时，我希望工具栏如下所示展开（是的，我做到了）：

在第二种状态下，当开始向下滚动时，图像和工具栏应该会消失，如下图（只有tab会显示）：

在最后一个状态下，一旦我在列表中的某个位置（但不是列表顶部），我想开始向上滚动，一旦我开始向上滚动，我想要工具栏（而不是用image) 启动 whowing，如下图（如果没有到达列表顶部，则图像不会显示，只有工具栏）：

我能够达到第一个状态，但其他 2 个状态有问题， 一旦在 CollapsingToolbarLayout 内部实现了工具栏，我在 CollapsingToolbarLayout 组件之外可以用它做什么的灵活性就不清楚了。 我无法隐藏工具栏，如果我这样做了，那么只有在我到达顶部时才会显示它。

无论如何，我当前的 XML（如下所示）处于实现第一张图片的状态，但是一旦我开始向下滚动，工具栏就会停留在顶部并且不会隐藏。注意：我必须告诉工具栏保持“固定”，因为如果我不这样做，工具栏内的信息就会消失，只会显示一个空的工具栏（这是另一篇文章，但知道为什么会发生这种情况仍然很有趣？） .

这是我当前的 xml：

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

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

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

            <include
                android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                android:layout_
                android:layout_
                app:layout_collapseMode="parallax"

                />

            <include
                android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                android:layout_
                android:layout_
                app:contentScrim="?attr/colorPrimary"

                />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/benefit_tab_layout"
            android:layout_
            android:layout_
            android:background="@color/primaryColor"
            app:tabIndicatorColor="@color/accentColor"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/black"
            app:tabIndicatorHeight="4dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/benefit_pager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        android:layout_
        android:layout_
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />
</android.support.design.widget.CoordinatorLayou

【参考方案1】：

我已经解决了这个问题，只是为了澄清，我希望我的工具栏在到达顶部后能够以视差图像展开，但我也希望工具栏在向下滚动时消失，并再次显示（没有视差图像）一旦我向上滚动。只有当我到达顶部时才会显示视差图像效果。

所以基本上解决方案是，用以下属性更改组件CollapsingToolbarLayout：

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

并使用以下属性更改工具栏组件

android:minHeight="?attr/actionBarSize"

关于我的视差效果图像（这是我的toolbar_search_container），我不应该在其中添加任何layout_scrollFlags。

那么它为什么有效呢？ 要理解它，你需要知道enterAlwaysCollapsed是什么， enterAlwaysCollapsed 影响添加了 minHeight 属性的视图。这意味着，具有minHeight 的CollapsingToolbarLayout 的每个孩子都将受到此属性的影响。 这样我的工具栏就会生效。

enterAlwaysCollapsed属性定义简单来说：

假设声明了 enterAlways 并且您指定了 minHeight，您还可以指定 enterAlwaysCollapsed。使用此设置时，您的视图将仅显示在此最小高度。只有当滚动到顶部时，视图才会展开到其全高..."

嗯，这不正是我们想要的吗？ （不要回答这个反问；））

还要补充一点，视差组件（toolbar_search_container）是依赖工具栏展开的，因为工具栏只有在到达顶部时才会展开，所以这一切都很好！

新代码是：

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

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

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

            <include
                android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                android:layout_
                android:layout_
                app:layout_collapseMode="parallax"
                />

            <include
                android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                android:layout_
                android:layout_
                android:minHeight="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                android:fitsSystemWindows="true"
                />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/benefit_tab_layout"
            android:layout_
            android:layout_
            android:background="@color/primaryColor"
            app:tabIndicatorColor="@color/accentColor"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/black"
            app:tabIndicatorHeight="4dp" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/benefit_pager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        android:layout_
        android:layout_
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />
</android.support.design.widget.CoordinatorLayout>

【讨论】：

非常感谢！！！我发现这个答案太难了，因为很难向谷歌解释这个问题。我已经尝试了几乎所有的可能性，但错过了使用所有 3 个属性。应该让更多人知道答案！！

我按照你说的做了，但是当我向上滚动时，我的 CollapsingToolbarLayout 直到我向上滚动到顶部才会出现。你有什么建议吗？

嘿冬天！你能在这里发布你的完整xml吗？没有 - 标签？谢谢！！！

我已经搜索这个多年了。谢谢你，真的。为了使其更流畅，添加 snap scrollFlags，以及 app:contentScrim 以在未完全展开时更改工具栏颜色。

【参考方案2】：

将这行代码添加到您的 CollapsingToolbarLayout

app:layout_scrollFlags="scroll|snap|enterAlways|enterAlwaysCollapsed"