Carrousel avec MotionLayout

Carousel est un un objet d'assistance au mouvement pour créer des vues de carrousel personnalisées qui affichent une liste d'éléments que l'utilisateur peut parcourir. Par rapport à d'autres méthodes de mise en œuvre cette option vous permet de créer rapidement des modifications complexes de mouvements et de dimensions. pour votre Carousel en profitant MotionLayout

<ph type="x-smartling-placeholder">

Le widget Carousel accepte les listes comportant un début et une fin, ainsi que des cercles ou des listes complètes.

Fonctionnement du carrousel avec MotionLayout

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

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édente
  • démarrer
  • Suivant

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

Prenons l'exemple des cinq vues de la figure 3 et supposons qu'au niveau de la propriété start les vues B, C et D sont visibles, et les vues A et E sont en dehors de l'écran. Définir l'état précédent de sorte que les positions A, B, C et D correspondent aux positions B, C, D et E, les vues se déplaçant de gauche à droite. Dans Suivant, l'état inverse, l'inverse doit se produire, B, C, D et E se déplaçant là où A, B, C et D l'étaient, et les vues se déplaçaient de droite à gauche. Ce processus est illustré dans la figure 4:

Il est essentiel que les vues finissent exactement là où les vues d'origine commencent. Carousel donne l'illusion d'une collection infinie d'éléments en en déplaçant les vues réelles là où elles se trouvaient, mais en les réinitialisant avec le nouveau contenu correspondant. Le schéma suivant illustre ce mécanisme. Payer attention sur "item #" ):

Transitions

Avec ces trois ensembles de contraintes définis dans votre fichier de scène d'animation, créez deux les transitions (avant et arrière) entre start et next ; et les états start (début) et previous (précédent). Ajoutez un OnSwipe pour déclencher les transitions en réponse à un geste, comme illustré ci-dessous Exemple:

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

Une fois cette scène de mouvement de base créée, ajoutez un assistant Carousel à la mise en page. et référencer les vues dans le même ordre que celui où vous implémentez les étapes précédentes et suivantes de l'animation.

Définissez les attributs suivants pour l'outil d'aide Carousel:

  • app:carousel_firstView: vue représentant le premier élément de la Carousel. Dans cet exemple, C.
  • app:carousel_previousState: ID ConstraintSet de l'élément précédent de l'état.
  • app:carousel_nextState: ID ConstraintSet de l'état next (suivant).
  • app:carousel_backwardTransition: le Transition ID appliqué entre l'état de début et l'état précédent.
  • app:carousel_forwardTransition: ID Transition appliqué entre les start et next.

Par exemple, votre fichier XML de mise en page doit ressembler à ceci:

    <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:

Kotlin

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.
            }
        })

Java

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 actuel "sélectionné" dans Carousel, les vues représentant les éléments avant ou après pourrait avoir besoin d'être masqué pour pour les valeurs Carousel début et fin. L'outil d'aide Carousel gère automatiquement. Par défaut, ces vues sont marquées comme View.INVISIBLE dans ces situations, afin que la mise en page globale ne change pas.

Il existe un autre mode, dans lequel l'outil d'aide Carousel marque à la place ces vues en tant que View.GONE. Vous pouvez définir ce mode à l'aide de la propriété suivante:

app:carousel_emptyViewsBehavior="gone"

Exemples

Pour plus d'exemples d'utilisation de l'outil d'aide Carrousel, consultez la exemples de projets sur GitHub.