web-dev-qa-db-fra.com

Comment garder la barre d'outils fixe en haut lorsque AppBar est réduit/développé

Vue d'ensemble

J'essaie d'implémenter l'une des techniques de défilement , espace flexible avec un contenu qui se chevauche, décrit dans la conception des matériaux.

Espace flexible avec contenu superposé

Le contenu peut chevaucher la barre d'applications.

Comportement:

La position de départ de la barre d’application doit être située derrière le contenu . Lors du défilement vers le haut, la barre d’applications devrait défiler plus rapidement que le contenu, jusqu'à ce que le contenu ne le recouvre plus. Une fois ancré en place, le La barre d'applications se soulève pour permettre au contenu de défiler en dessous.

https://www.google.co.in/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling

Problème

Toutefois, le problème réside dans le fait que Le titre de ma barre d’application défile vers le bas lorsqu’il est développé et se cache sous le contenu qui se chevauche.

Ici, ma barre d’outils est cachée sous le CardView superposé .  When appbar expanded

Lorsque la barre d’application est réduite, la barre d’outils et donc le titre glissent vers le haut .  When collapsed

Code

Voici mon code:

activité-main.xml

<Android.support.design.widget.CoordinatorLayout 
    ...
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="200dp"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <Android.support.design.widget.CollapsingToolbarLayout
            ...
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                Android:layout_gravity="top"
                Android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        ...

J'ai également ajouté ces éléments dans la fonction onCreate de ma MainActivity.

    setSupportActionBar(toolbar);

    collapsingToolbarLayout.setTitle("App Name");

Je souhaite que la barre d’outils (avec la vignette et les autres contenus, que j’ajouterai plus tard) reste en haut, que la barre d’application soit développée ou réduite.

J'ai lu les documentations, parcouru de nombreux articles et tutoriels, visionné beaucoup de vidéos mais je n'ai pas réussi à trouver une solution qui marche ou une solution connexe.

Si quelqu'un a une idée sur la façon de résoudre ce problème, veuillez le suggérer. Merci pour ton aide.

androidmaterial-designandroid-appbarlayout
22
abhi

Je cherchais moi-même une solution lorsque j'ai trouvé la réponse dans les commentaires sur un rapport de problème similaire. 

Fondamentalement, vous appelez setTitleEnabled() sur votre CollapsingToolbarLayout comme ceci:

CollapsingToolbarLayout.setTitleEnabled(false);

Vous pouvez aussi le faire en XML, en ajoutant ceci à votre CollapsingToolbarLayout:

app:titleEnabled="false"

En le configurant sur false, vous obtiendrez le comportement souhaité. Le titre reste fixe en haut de l'écran.

La Toolbar elle-même était déjà en haut, mais le titre reste là aussi, au lieu de traduire entre le bas de CollapsingToolbarLayout et la Toolbar.

56
G.deWit

J'ai atteint cet objectif en ajoutant le code ci-dessous dans la balise Toolbar.

app:layout_collapseMode="pin"
3
SriMaharshi Manchem

Dans mon cas, je devais ajouter app:titleEnabled="false" à la CollapsingToolbarLayoutETapp:layout_collapseMode="pin" à la Android.support.v7.widget.Toolbar

Désormais, la barre d’outils reste épinglée en haut de l’écran, que l’utilisateur défile ou non.

2
CHarris

Pour conserver le titre en haut , mettez cet attribut dans votre CollapsingToolbarLayout:

app:expandedTitleGravity="top"
0
Francis