Carrusel con MotionLayout

Carousel es un objeto auxiliar de movimiento que se usa para crear vistas de carrusel personalizadas que muestran una lista de elementos que el usuario puede consultar rápidamente. En comparación con otras formas de implementar esas vistas, este asistente te permite crear rápidamente cambios complejos de movimiento y dimensión para tu Carousel aprovechando MotionLayout.

El widget Carousel admite listas con inicio y fin, así como listas envolventes circulares.

Cómo funciona Carousel con MotionLayout

Supongamos que deseas compilar una vista horizontal Carousel con el elemento central ampliado:

Este diseño básico contiene varias vistas que representan los elementos Carousel:

Crea un MotionLayout con los siguientes tres estados y asígnales los IDs:

  • anterior
  • iniciar
  • siguiente

Si el estado start corresponde al diseño base, en el estado previous y en el estado next, los elementos Carousel se desplazan uno hacia la izquierda y hacia la derecha, respectivamente.

Por ejemplo, toma las cinco vistas de la figura 3 y supone que, en el estado start, las vistas B, C y D son visibles, y A y E están fuera de la pantalla. Configura el estado anterior para que las posiciones de A, B, C y D estén donde estaban B, C, D y E, con las vistas que se desplazan de izquierda a derecha. En el estado siguiente, debe suceder lo contrario, donde B, C, D y E se mueven a donde estaban A, B, C y D, y las vistas se mueven de derecha a izquierda. Esto se muestra en la figura 4:

Es fundamental que las vistas terminen exactamente donde comienzan las vistas originales. Carousel genera la ilusión de una colección infinita de elementos. Para ello, mueve las vistas reales a donde estaban, pero las reinicia con el nuevo contenido coincidente. En el siguiente diagrama, se muestra este mecanismo. Presta atención a los valores de "item #"):

Transiciones

Con estos tres conjuntos de restricciones definidos en el archivo de escena en movimiento, crea dos transiciones (hacia adelante y hacia atrás) entre los estados start y next, y los estados start y previous. Agrega un controlador OnSwipe para activar las transiciones en respuesta a un gesto, como se muestra en el siguiente ejemplo:

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

Después de crear esta escena de movimiento básica, agrega un ayudante Carousel al diseño y haz referencia a las vistas en el mismo orden en el que implementas la animación anterior y la siguiente.

Configura los siguientes atributos para el ayudante Carousel:

  • app:carousel_firstView: Es la vista que representa el primer elemento de Carousel; en este ejemplo, C.
  • app:carousel_previousState: El ID de ConstraintSet del estado anterior.
  • app:carousel_nextState: El ID de ConstraintSet del siguiente estado
  • app:carousel_backwardTransition: El ID Transition aplicado entre los estados inicio y anterior
  • app:carousel_forwardTransition: Es el ID de Transition que se aplica entre los estados start y next.

Por ejemplo, tienes algo como lo siguiente en tu archivo en formato XML de diseño:

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

Configura un adaptador Carousel en el código:

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

Notas adicionales

Según el elemento actual "seleccionado" en Carousel, es posible que las vistas que representan los elementos antes o después deban ocultarse para tener en cuenta correctamente el inicio y el final de Carousel. El ayudante Carousel controla esto automáticamente. De forma predeterminada, marca esas vistas como View.INVISIBLE en esas situaciones, por lo que el diseño general no cambia.

Existe un modo alternativo en el que el ayudante Carousel marca esas vistas como View.GONE. Puedes configurar este modo con la siguiente propiedad:

app:carousel_emptyViewsBehavior="gone"

Ejemplos

Para obtener más ejemplos sobre el uso del auxiliar de carrusel, consulta los proyectos de ejemplo en GitHub.