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):

在最后一个状态中，一旦我到达列表中的某个位置(但不是列表的顶部)，我就想开始向上滚动，一旦我开始向上滚动，我就希望工具栏(而不是带有扩展名的工具栏)图片)以开始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:

    <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图像).仅当我到达顶部时，才显示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屋！