滚动时CollapsingToolbarLayout并隐藏工具栏

Question

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

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

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

在最后一个状态,一旦我在列表中的某个点(但不是列表的顶部),我想开始向上滚动,一旦我开始向上滚动,我想要工具栏(而不是图片中消耗的工具栏)开始哇哇,如下图所示(如果没有到达列表的顶部,图像将不会显示,只有工具栏):

我能够实现第一个状态,但另一个状态是有问题的,一旦工具栏在CollapsingToolbarLayout中实现,我在CollapsingToolbarLayout组件之外可以用它做的灵活性不明确.我无法隐藏工具栏,如果我这样做,那么只有在我到达顶部时它才会显示.

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

这是我当前的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

Answer 1

我已经修复了这个问题,只是为了修复,我希望我的工具栏能够在到达顶部后用paralex图像进行扩展,但我还希望工具栏在向下滚动时消失,并再次展示自己(没有paralex图像)一旦我向上滚动.只有当我到达顶部时,才会显示paralex图像效果.

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

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

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

android:minHeight="?attr/actionBarSize"

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

那它为什么有效呢？要理解它,您需要知道什么是添加属性enterAlwaysCollapsed的enterAlwaysCollapsed效果视图minHeight.这意味着,每个孩子CollapsingToolbarLayout都minHeight将受到这个属性的影响.所以我的工具栏将受到影响.

enterAlwaysCollapsed 简单的单词属性定义:

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

那么,这不正是我们想要的吗？(不要回答这个修辞问题;))

还有一件事要添加,视差组件(toolbar_search_container)取决于要扩展的工具栏,并且因为工具栏只有在到达顶部时才会展开,所以这一切都很有效!

新代码是:

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