web-dev-qa-db-fra.com

CollapsingToolbarLayout et masquer la barre d'outils lors du défilement

J'essaie de créer une disposition combinée à l'aide de CoordinatorLayout et également CollapsingToolbarLayout.

Dans le premier état, lorsque nous sommes sur la page la plus en haut et que nous n'avons pas encore fait défiler, je veux que la barre d'outils s'étende comme indiqué ci-dessous (oui, je l'ai fait):

enter image description here

Dans le deuxième état, lorsque vous commencez à faire défiler vers le bas, l'image et la barre d'outils devraient disparaître, comme indiqué ci-dessous (seul l'onglet apparaîtra):

enter image description here

Et dans le dernier état une fois que je suis à un certain point dans la liste (mais pas en haut de la liste) je veux commencer à faire défiler vers le haut, une fois que je commence à faire défiler vers le haut, je veux que la barre d'outils (et non celle qui est dépensée avec l'image) commencer à souffler, comme indiqué ci-dessous (si elle n'atteint pas le haut de la liste, l'image ne s'affichera pas, seule la barre d'outils):

enter image description here

J'ai pu obtenir le premier état, mais les 2 autres états sont problématiques, une fois que la barre d'outils est implémentée dans CollapsingToolbarLayout, la flexibilité de ce que je peux en faire en dehors du composant CollapsingToolbarLayout n'est pas claire. Je ne peux pas masquer la barre d'outils, si je le fais, elle ne sera affichée qu'une fois en haut.

Quoi qu'il en soit, mon XML actuel (affiché ci-dessous) est dans l'état où la première image est implémentée, mais une fois que je commence à faire défiler vers le bas, la barre d'outils reste en haut et ne se cache pas. Remarque: je dois dire à la barre d'outils de rester "épinglée" car si je ne le faisais pas, les informations à l'intérieur de la barre d'outils disparaissent, et seule une barre d'outils vide s'affichera (c'est pour un autre article, mais il est toujours intéressant de savoir pourquoi cela se produit?) .

voici mon xml actuel:

    <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
androidandroid-coordinatorlayoutandroid-collapsingtoolbarlayoutcoordinator-layout
21
winter

J'ai résolu le problème, juste pour clérifier, je voulais que ma barre d'outils puisse se développer avec une image paralex une fois qu'elle atteigne le haut, mais je voulais aussi que la barre d'outils disparaisse si vous faites défiler vers le bas et se montre à 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 de changer le composant CollapsingToolbarLayout avec l'attribut suivant:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

et également modifier le composant de la barre d'outils avec l'attribut suivant

Android:minHeight="?attr/actionBarSize"

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

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

Définition de l'attribut enterAlwaysCollapsed en mots simples:

en supposant que enterAlways est déclaré 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. Uniquement lorsque le défilement atteindra le sommet, la vue s'élargit à sa pleine hauteur ... "

Eh bien, n'est-ce pas exactement ce que nous voulons? (ne répondez pas à cette question rétorique;))

Une dernière chose à ajouter, le composant de parallaxe (toolbar_search_container) dépend de la barre d'outils à développer, et parce que la barre d'outils ne se développera que lorsqu'elle atteindra le haut, tout cela fonctionne très bien!

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