CollapsingToolbarLayout 并在滚动时隐藏工具栏 [英] CollapsingToolbarLayout and hide toolbar while scrolling

问题描述

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

I am trying to create some combined layout using CoordinatorLayout and also CollapsingToolbarLayout.

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

In the first state, when we on the most top page, and didn't scrolled yet, I want the toolbar to expend as shown below (yes, i did it):

在第二种状态下，当开始向下滚动时，图像和工具栏应该消失，如下所示(仅显示选项卡):

In the second state, when starting to scroll down, the image and toolbar should disappear, as shown below (only tab will show):

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

And in the last state once I am at some point in the list (but not the top of the list) I want to start scrolling up, once I start scrolling up I want the toolbar (and not the expended one with the image) to start whowing, as shown below (if didn't reaches the top of the list, the image will not show, only the toolbar):

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

I was able to achive the the first state, but the other 2 state are problematic, once toolbar is implemented inside CollapsingToolbarLayout, the flexability of what I can do with it outside of CollapsingToolbarLayout component is not clear. I can't make the toolbar hide, if I do so, then it will only be shown once I reaches the top.

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

Anyways, my current XML (showing below) is in state where the first picture is implemented, but once I start scrolling down, the toolbar stay at the top and do not hide. Note: I must tell the toolbar to stay "pin" because if I didn't then the information inside the toolbar disappear, and only an empty toolbar will show (that's for another post, but it still interesting to know why this happen?).

这是我当前的 xml:

here is my current xml:

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

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

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

            <include
                android:id="@+id/toolbar_search_container"
                layout="@layout/search_box"
                android:layout_height="192dp"
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"

                />

            <include
                android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentScrim="?attr/colorPrimary"

                />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/benefit_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />
</android.support.design.widget.CoordinatorLayou

推荐答案

我已经解决了这个问题，只是为了澄清，我希望我的工具栏能够在到达顶部时使用平行光图像进行扩展，但我也希望如果向下滚动，工具栏会消失，一旦我向上滚动，工具栏就会再次显示出来(没有 paralex 图像).只有当我到达顶部时，才会显示 paralex 图像效果.

I have fixed the issue, just to clerify, I wanted my Toolbar to be able to expand with a paralex image once it reaches the top, but I also wanted the toolbar to disappear if scrolling down, and show itself again (without the paralex image) once I scroll up. the paralex image effect should only displayed if I reaches the top.

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

So basically the solution is, change the component CollapsingToolbarLayout with the following attribute:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

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

and also change toolbar component with the following attribute

android:minHeight="?attr/actionBarSize"

关于我的 paralex 效果图像(这是我的 toolbar_search_container)，我不应该向它添加任何 layout_scrollFlags.

regarding my paralex effect image (which is my toolbar_search_container) I shouldn't add any layout_scrollFlags to it.

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

So why is it working? To understand it, you need to know what is enterAlwaysCollapsed, The enterAlwaysCollapsed effects views that added the minHeight attribute. this means, every child of CollapsingToolbarLayout which have minHeight will be effected by this attribute. So my toolbar will be effected.

enterAlwaysCollapsed 简单的属性定义:

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

Assuming enterAlways is declared and you have specified a minHeight, you can also specify enterAlwaysCollapsed. When this setting is used, your view will only appear at this minimum height. Only when scrolling reaches to the top will the view expand to its full height..."

好吧，这不正是我们想要的吗?(不要回答这个反驳的问题；))

Well, isn't this exactly what we want? (do not answer this retorical question ;) )

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

One more thing to add, the parallax component (toolbar_search_container) is depends on the toolbar to expand, and because the toolbar will expand only when it reaches the top, then this is all just working great!

新代码是:

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

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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_height="192dp"
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"
                />

            <include
                android:id="@+id/toolbar_benefit"
                layout="@layout/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                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_width="match_parent"
            android:layout_height="wrap_content"
            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_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <include
        layout="@layout/floating_btn_benefits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />
</android.support.design.widget.CoordinatorLayout>

这篇关于CollapsingToolbarLayout 并在滚动时隐藏工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！