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>