CollapsingToolbarLayout並滾動時隱藏工具欄

Question

我想創建一些使用CoordinatorLayout和CollapsingToolbarLayout的組合佈局。

在第一狀態下，當我們最頂級的網頁上，卻沒有滾動，我希望工具欄花費如下所示（是的，我做到了）：

在第二個狀態，開始向下滾動時，圖像和工具欄將會消失，如下圖所示（僅標籤會顯示）：

而且在最後的狀態，一旦我在一些點列表（但不是頂部）我想開始向上滾動，一旦我開始向上滾動，我想要工具欄（而不是擴展的圖像）開始播放，如下所示（如果沒有到達列表的頂部，圖像將無法顯示，只有工具欄）：

我能才達到的第一狀態，但其他2狀態是有問題的， 一旦工具欄裏面CollapsingToolbarLayout實施的flexability的我可以在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

我有固定的問題，只是爲了clerify，我想我的工具欄能夠與一旦到達頂部的paralex圖像擴大，但我也想如果向下滾動，工具欄會消失，並且一旦向上滾動，就會再次顯示自己（不包含自由曲面圖像）。只有當我到達頂部時，纔會顯示倒置圖像效果。

所以基本上解決的辦法是，改變組件CollapsingToolbarLayout具有以下屬性：

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 

，並具有以下屬性

android:minHeight="?attr/actionBarSize" 

改變對我的paralex效果圖像工具欄組件（這是我的toolbar_search_container）我不應該添加任何layout_scrollFlags它。

那麼，爲什麼它工作？ 要理解它，你需要知道什麼是enterAlwaysCollapsed， 的enterAlwaysCollapsed將添加的了minHeight屬性後果的意見。這意味着，中每個孩子CollapsingToolbarLayout具有了minHeight將通過這個屬性來實現。 所以我的工具欄將會生效。

enterAlwaysCollapsed簡單的話 attrubute定義：

假設enterAlways聲明並且已指定一個了minHeight，你也可以指定enterAlwaysCollapsed。使用此設置時，您的視圖將僅出現在此最小高度處。滾動到達頂端只有將視圖擴展到完全高度......」

那麼，是不是這正是我們想要的嗎？（不回答這個問題retorical;））

一個還有一點要補充的paralexed組件（toolbar_search_container）是依賴於tollbar擴大，因爲只有當它到達頂部的工具欄將擴大，那麼這一切只是偉大的工作！

新代碼：

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