CollapsingToolbarLayout et masquer la barre d'outils pendant le défilement

Question

J'essaye de créer une disposition combinée en utilisant CoordinatorLayout et aussi CollapsingToolbarLayout.

Dans le premier état, quand nous sur la page la plus haut, et n'a pas encore fait défiler, je veux la barre d'outils comme indiqué ci-dessous dépenser (oui, je l'ai fait):

dans le second état, quand on commence à défiler vers le bas, l'image et la barre d'outils devraient disparaître, comme indiqué ci-dessous (uniquement onglet affiche):

et dans le dernier état une fois que je suis à un moment donné dans le liste (mais pas le top de la liste) je veux commencer à faire défiler, une fois que je commence à faire défiler je veux que la barre d'outils (et non celle qui est dépensée avec l'image) commence à tourner, comme montré ci-dessous (si elle n'a pas atteint le haut de la liste, l'image ne sera pas affiché, seule la barre d'outils):

j'ai pu achive le premier état, mais l'autre 2 état sont problématiques, une fois la barre d'outils est mis en œuvre à l'intérieur CollapsingToolbarLayout, le flexability de ce que je peut faire avec lui en dehors du composant CollapsingToolbarLayout n'est pas clair. Je ne peux pas masquer la barre d'outils, si je le fais, elle ne sera affichée qu'une fois que j'aurai atteint le sommet.

Quoi qu'il en soit, mon XML actuel (ci-dessous) est dans l'état où la première image est implémentée, mais une fois que je commence à défiler, la barre d'outils reste en haut et ne se cache pas. Note: Je dois dire à la barre d'outils de rester "pin" car sinon je perds les informations dans la barre d'outils et seule une barre d'outils vide s'affiche (c'est pour un autre post, mais est-ce intéressant de savoir pourquoi?) .

ici est mon 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

J'ai résolu le problème, juste clerify, je voulais que ma barre d'outils pour pouvoir développer une image Paralex une fois atteint le sommet, mais j'ai aussi voulu la barre d'outils pour disparaître si défiler vers le bas, et se montrer à nouveau (sans l'image paralex) une fois que je fais défiler vers le haut. l'effet d'image paralex ne devrait s'afficher que si j'atteins le sommet.

Donc, fondamentalement, la solution est, changer le composant CollapsingToolbarLayout avec l'attribut suivant:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 

et aussi changer le composant de barre d'outils avec l'attribut suivant

android:minHeight="?attr/actionBarSize" 

en ce qui concerne mon image effet Paralex (qui est mon toolbar_search_container) Je ne devrais pas ajouter layout_scrollFlags à elle.

Alors, pourquoi ça marche? Pour le comprendre, vous devez savoir ce qui est enterAlwaysCollapsed, Les vues effets enterAlwaysCollapsed qui ont ajouté l'attribut minHeight.cela signifie que chaque enfant de CollapsingToolbarLayout ayant minHeight sera affecté par cet attribut. Donc ma barre d'outils sera affectée.

enterAlwaysCollapsed définition attrubute en termes simples:

est déclaré enterAlways En supposant et que vous avez spécifié un minHeight, vous pouvez également spécifier enterAlwaysCollapsed. Lorsque ce paramètre est utilisé, votre vue n'apparaîtra qu'à cette hauteur minimale. Seulement lors du défilement atteint vers le haut sera le point de vue d'élargir à sa hauteur ... »

Eh bien, est-ce pas exactement ce que nous voulons? (Ne répondez pas à cette question retorical;))

un chose à ajouter, le composant paralexed (toolbar_search_container) est dépend de la Tollbar à se développer, et parce que la barre d'outils se développera que lorsqu'elle atteint le sommet, alors cela est

travaille tout simplement génial! le nouveau code est :

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