Carrousel avec MotionLayout

Fonctionnement du carrousel avec MotionLayout

Supposons que vous souhaitiez créer une vue Carousel horizontale, avec l'élément central agrandi :

Cette mise en page de base contient plusieurs vues représentant les éléments Carousel :

Créez un MotionLayout avec les trois états suivants et attribuez-leur des ID :

• précédent
• démarrer
• Suivant

Si l'état start correspond à la mise en page de base, dans l'état previous et l'état next, les éléments Carousel sont décalés d'un cran vers la gauche et vers la droite, respectivement.

Par exemple, prenons les cinq vues de la figure 3 et supposons que dans l'état start, les vues B, C et D sont visibles, et que les vues A et E sont hors écran. Configurez l'état précédent de sorte que les positions de A, B, C et D soient celles de B, C, D et E, avec les vues se déplaçant de gauche à droite. Dans l'état suivant, l'inverse doit se produire : B, C, D et E doivent se déplacer là où se trouvaient A, B, C et D, et les vues doivent se déplacer de droite à gauche. C'est ce que décrit la figure 4 :

Il est essentiel que les vues se terminent exactement là où les vues d'origine commencent. Carousel donne l'illusion d'une collection infinie d'éléments en replaçant les vues réelles à leur position initiale, mais en les réinitialisant avec le nouveau contenu correspondant. Le schéma suivant illustre ce mécanisme. Faites attention aux valeurs "item #" (numéro d'article) :

Transitions

Une fois ces trois ensembles de contraintes définis dans votre fichier de scène de mouvement, créez deux transitions (avant et arrière) entre les états start et next, et entre les états start et previous. Ajoutez un gestionnaire OnSwipe pour déclencher les transitions en réponse à un geste, comme indiqué dans l'exemple suivant :

    <Transition
        motion:constraintSetStart="@id/start"
        motion:constraintSetEnd="@+id/next"
        motion:duration="1000"
        android:id="@+id/forward">
        <OnSwipe
            motion:dragDirection="dragLeft"
            motion:touchAnchorSide="left" />
    </Transition>

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/previous"
        android:id="@+id/backward">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorSide="right" />
    </Transition>

Ajouter le carrousel

Une fois cette scène de mouvement de base créée, ajoutez un helper Carousel à la mise en page et référencez les vues dans le même ordre que celui dans lequel vous implémentez votre animation précédente et suivante.

Définissez les attributs suivants pour le helper Carousel :

• app:carousel_firstView : vue qui représente le premier élément de Carousel (C dans cet exemple).
• app:carousel_previousState : ID ConstraintSet de l'état précédent.
• app:carousel_nextState : ID ConstraintSet de l'état suivant.
• app:carousel_backwardTransition : ID Transition appliqué entre les états start et previous.
• app:carousel_forwardTransition : ID Transition appliqué entre les états start et next.

Par exemple, vous avez quelque chose comme ceci dans votre fichier XML de mise en page :

    <androidx.constraintlayout.motion.widget.MotionLayout ... >

        <ImageView  android:id="@+id/imageView0" .. />
        <ImageView  android:id="@+id/imageView1" .. />
        <ImageView  android:id="@+id/imageView2" .. />
        <ImageView  android:id="@+id/imageView3" .. />
        <ImageView  android:id="@+id/imageView4" .. />

        <androidx.constraintlayout.helper.widget.Carousel
            android:id="@+id/carousel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:carousel_forwardTransition="@+id/forward"
            app:carousel_backwardTransition="@+id/backward"
            app:carousel_previousState="@+id/previous"
            app:carousel_nextState="@+id/next"
            app:carousel_infinite="true"
            app:carousel_firstView="@+id/imageView2"
            app:constraint_referenced_ids="imageView0,imageView1,imageView2,imageView3,imageView4" />

    </androidx.constraintlayout.motion.widget.MotionLayout>

Configurez un adaptateur Carousel dans le code :

carousel.setAdapter(object : Carousel.Adapter {
            override fun count(): Int {
              // Return the number of items in the Carousel.
            }

            override fun populate(view: View, index: Int) {
                // Implement this to populate the view at the given index.
            }

            override fun onNewItem(index: Int) {
                // Called when an item is set.
            }
        })

carousel.setAdapter(new Carousel.Adapter() {
            @Override
            public int count() {
                // Return the number of items in the Carousel.
            }

            @Override
            public void populate(View view, int index) {
                // Populate the view at the given index.
            }

            @Override
            public void onNewItem(int index) {
                 // Called when an item is set.
            }
        });

Remarques supplémentaires

En fonction de l'élément "sélectionné" dans Carousel, les vues représentant les éléments avant ou après peuvent devoir être masquées pour tenir correctement compte des débuts et fins de Carousel. L'assistant Carousel gère cela automatiquement. Par défaut, il marque ces vues comme View.INVISIBLE dans ces situations, de sorte que la mise en page globale ne change pas.

Un autre mode est disponible, dans lequel l'assistant Carousel marque plutôt ces vues comme View.GONE. Vous pouvez définir ce mode à l'aide de la propriété suivante :

app:carousel_emptyViewsBehavior="gone"

Exemples

Pour obtenir d'autres exemples d'utilisation du helper Carousel, consultez les exemples de projets sur GitHub.