Modification de la valeur alpha de l'arrière-plan de la barre d'outils lors du défilement avec CoordinatorLayout

Question

J'essaie actuellement d'utiliser la fonction CoordinatorLayout pour adapter un Toolbar l'opacité en fonction d'un ScrollView position de défilement. Je parviens à relier manuellement les deux vues, en écoutant le message d'alerte de l'opérateur. ScrollView les événements de défilement et de les rapporter sur la valeur alpha de mon Toolbar l'arrière-plan.

Le comportement recherché est :

La barre d'outils commence dans un transparent (à la fois le texte et l'arrière-plan) et se retrouver totalement fond blanc y texte en noir lorsqu'une vue est entièrement déroulée.

Le comportement est à peu près celui-ci : Vidéo sur Youtube .

Mise en œuvre actuelle

fichier de présentation (simplifié)

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <my.package.widgets.DetailsTop
                android:id="@+id/layout_details_top"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <my.package.widgets.DetailsBottom
                android:id="@+id/layout_details_bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </ScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00FFFFFF"/>
</RelativeLayout>

Mise en œuvre des fragments

public class SearchVehicleDetailsFragment extends BaseFragment<SearchContract.ParentView> {

    @Bind(R.id.layout_details_top) DetailsTop detailsTopLayout;
    @Bind(R.id.layout_details_bottom) DetailsBottom detailsBottomLayout;
    @Bind(R.id.scrollView) ScrollView scrollView;
    @Bind(R.id.toolbar) Toolbar toolbar;

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @Override
            public void onScrollChanged() {
                float alpha = (float) scrollView.getScrollY() / vehicleDetailsTopLayout.getHeight();
                toolbar.setBackgroundColor(getColorWithAlpha(alpha, getResources().getColor(R.color.white)));
                toolbar.setTitleTextColor(getColorWithAlpha(alpha, getResources().getColor(R.color.dark_grey)));
            }
        });
    }

    public static int getColorWithAlpha(float alpha, int baseColor) {
        int a = Math.min(255, Math.max(0, (int) (alpha * 255))) << 24;
        int rgb = 0x00ffffff & baseColor;
        return a + rgb;
    }
}

Problème

Cependant, même si les extraits précédents constituent une solution particulièrement simple qui semble fonctionner parfaitement, je ne comprends pas très bien pourquoi cela n'a pas fonctionné avec CoordinatorLayout . J'ai aussi trouvé un gars qui semble avoir réussi cette tâche avec un produit personnalisé. CoordinatorLayout.Behavior<android.support.v7.widget.Toolbar> la mise en œuvre.

Vous pouvez consulter son implémentation personnalisée de CoordinatorLayout.Behavior . Il donne également des précisions sur Moyen . Toutefois, en raison d'un grand nombre de <android.support.v7.widget.Toolbar .../> au lieu de l'ensemble des Toolbar et un manque flagrant de compréhension du fonctionnement de cette partie de la bibliothèque Support Design, je n'ai jamais pu la mettre en œuvre...

Question

J'aimerais comprendre comment CoordinatorLayout et toutes les classes qui l'entourent fonctionnent ensemble. Je serai donc probablement en mesure d'implémenter le comportement que je recherche, à savoir : lier la position de défilement d'un ScrollView à la valeur alpha de la couleur d'arrière-plan d'une barre d'outils.

Bien entendu, si vous savez également comment mettre en œuvre tout cela, je serai très heureux de voir votre extrait :)

Answer 1

J'ai expérimenté des comportements, je suis heureux que vous ayez trouvé mon article partiellement utile.

J'ai caviardé le code de la Toolbar chunk parce que ce n'était pas important. Simple Toolbar attributs, rien de particulier :

<android.support.v7.widget.Toolbar
   android:layout_height="?attr/actionBarSize"
   android:layout_width="match_parent"
   android:id="@+id/toolbar"
   app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"/>

J'aimerais comprendre comment CoordinatorLayout, et un qui l'entourent, fonctionnent ensemble. Ainsi, je serai probablement en mesure de mettre en œuvre le comportement que je recherche, à savoir : lier la position de défilement d'un ScrollView à la valeur alpha de la couleur de fond d'une barre d'outils.

Dans votre mise en page, il manque l'élément CoordinatorLayout comme étant le parent supérieur qui englobe tout. Au lieu d'utiliser ScrollView vous devez utiliser NestedScrollView il fonctionne de la même manière que ScrollView mais la différence est que NestedScrollView peut effectuer des défilements imbriqués dans l'ancienne version, contrairement à ScrollView qui n'a emboîté les rouleaux qu'après l'API 23.

Pour un CoordinatorLayout.Behavior travailler la vue cible doit être un descendant direct de la vue CoordinatorLayout . Comme vous pouvez le voir dans l'article, le Toolbar est un descendant direct du coordinateur. Dans le cas contraire, le comportement ne fonctionnera pas.

Dans l'exemple NestedScrollView a un comportement de mise en page de la barre d'application, de sorte que AppBarLayout peut s'étendre et s'effondrer, vous pouvez trouver de nombreux exemples à ce sujet.