CollapsingToolbarLayout 並在滾動時隱藏工具欄

Question

我正在嘗試使用 CoordinatorLayout 和 CollapsingToolbarLayout 創建一些組合布局。

在第一種狀態下，當我們位於最頂部且尚未滾動時，我希望工具欄如下所示展開（是的，我做到了）：

在第二種狀態下，當開始向下滾動時，圖像和工具欄應該消失，如下所示（僅顯示選項卡）：

在最后一個狀態中，一旦我在列表中的某個點（但不是列表的頂部）我想開始向上滾動，一旦我開始向上滾動，我想要工具欄（而不是帶有圖像的工具欄）到開始whowing，如下圖（如果沒有到達列表頂部，則不會顯示圖像，只有工具欄）：

我能夠實現第一個狀態，但其他 2 個狀態有問題，一旦在 CollapsingToolbarLayout 內部實現了工具欄，我在 CollapsingToolbarLayout 組件之外可以用它做什么的靈活性就不清楚了。 我無法隱藏工具欄，如果我這樣做，它只會在我到達頂部時顯示。

無論如何，我當前的 XML（如下所示）處於實現第一張圖片的狀態，但是一旦我開始向下滾動，工具欄就會停留在頂部並且不會隱藏。 注意：我必須告訴工具欄保持“固定”狀態，因為如果我不這樣做，那么工具欄中的信息就會消失，並且只會顯示一個空的工具欄（這是另一篇文章，但知道為什么會發生這種情況仍然很有趣？） .

這是我當前的 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 圖像效果。

所以基本上解決方案是，使用以下屬性更改組件CollapsingToolbarLayout ：

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

並使用以下屬性更改工具欄組件

android:minHeight="?attr/actionBarSize"

關於我的 paralex 效果圖像（這是我的toolbar_search_container ），我不應該向它添加任何layout_scrollFlags 。

那么它為什么有效呢？ 要理解它，您需要知道什么是enterAlwaysCollapsed ，添加minHeight屬性的enterAlwaysCollapsed效果視圖。 這意味着，具有minHeight的CollapsingToolbarLayout每個子項都將受此屬性影響。 這樣我的工具欄就會生效。

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>

Answer 2

將此行代碼添加到您的 CollapsingToolbarLayout

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