CollapsingToolbarLayout et masquer la barre d'outils pendant le défilement
Je suis en train de créer quelques combiné la mise en page à l'aide de CoordinatorLayout et aussi CollapsingToolbarLayout.
Dans le premier état, quand nous sommes sur le plus haut sommet de la page, et ne pas défiler encore, je veux que la barre d'outils de dépenser, comme indiqué ci-dessous (oui, je l'ai fait):
Dans le second état, lorsque vous commencez à faire défiler vers le bas, l'image et la barre d'outils devrait disparaître, comme indiqué ci-dessous (uniquement onglet):
Et dans le dernier état une fois que je suis à un certain point dans la liste (mais pas le haut de la liste), je veux commencer à faire défiler vers le haut, une fois que je commence à défiler, je veux la barre d'outils (et pas dépensé un avec l'image) pour démarrer whowing, comme indiqué ci-dessous (si elle n'a pas atteint le haut de la liste, l'image ne sera pas le montrer, seule la barre d'outils):
J'ai été en mesure de réaliser les le premier état, mais les 2 autres de l'état sont problématiques,
une fois que la barre d'outils est mis en œuvre à l'intérieur de CollapsingToolbarLayout, la flexibilité de ce que je peux faire avec elle en dehors de CollapsingToolbarLayout composant n'est pas clair.
Je ne peux pas faire la barre d'outils cacher, si je le fais, alors il ne sera affiché une fois que j'ai atteint le sommet.
De toute façon, mon XML en cours (ci-dessous) est dans l'état où la première photo est mis en œuvre, mais une fois que j'ai lancer le défilement vers le bas, la barre d'outils de rester au sommet et ne s'en cachent pas. Note: je dois dire à la barre d'outils pour rester "pin" parce que si je n'avais pas l'information à l'intérieur de la barre d'outils disparaissent, et seulement un vide de la barre d'outils va montrer (c'est pour un autre post, mais il reste intéressant de savoir pourquoi cela se produit?).
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
Vous devez vous connecter pour publier un commentaire.
J'ai résolu le problème, seulement de clerify, je voulais que ma Barre d'outils pour être en mesure de développer avec un paralex image une fois qu'il atteint le sommet, mais je voulais aussi la barre d'outils à disparaître si le défilement vers le bas, et de se montrer à nouveau (sans le paralex image) une fois que j'ai faites défiler vers le haut. le paralex effet d'image devrait ne s'affiche que si j'ai atteint le sommet.
Donc, fondamentalement, la solution est de changer le composant
CollapsingToolbarLayout
avec l'attribut suivant:et aussi modifier de la barre d'outils du composant avec l'attribut suivant
concernant mon paralex effet de l'image (ce qui est mon
toolbar_search_container
) je ne devrais pas ajouter delayout_scrollFlags
à elle.Alors pourquoi est-ce que ça marche?
Pour le comprendre, vous devez savoir qu'est-ce que
enterAlwaysCollapsed
,Le
enterAlwaysCollapsed
effets vues ajoutée leminHeight
attribut. cela signifie que, chaque enfant deCollapsingToolbarLayout
qui ontminHeight
sera effectué par cet attribut.Donc, ma barre d'outils sera effectuée.
enterAlwaysCollapsed
attribut définition en termes simples:En supposant enterAlways est déclarée et que vous avez spécifié un minHeight, vous pouvez également spécifier
enterAlwaysCollapsed
. Lorsque ce paramètre est utilisé, votre point de vue ne comparaître à cette hauteur minimale. Seulement lors du défilement atteint à la tête de la vue de développer à sa pleine hauteur..."Bien, n'est-ce pas exactement ce que nous voulons? (ne pas répondre à cette retorical question 😉 )
Une chose de plus à ajouter, la parallaxe composant (
toolbar_search_container
) dépend de la barre d'outils à développer, et parce que la barre d'outils vous développez seulement quand il a atteint le sommet, c'est tout simplement génial de travailler!Le nouveau code est :