Carrusel con MotionLayout

Carousel es un objeto de ayuda de movimiento para crear vistas de carrusel personalizadas que muestran una lista de elementos que el usuario pueda hojear. En comparación con otras formas de implementar de imágenes, este ayudante te permite crear rápidamente cambios complejos de movimiento y dimensión para su Carousel con las ventajas MotionLayout

El widget Carousel admite listas con un inicio y un final, así como con listas envolventes.

Cómo funciona Carousel con MotionLayout

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

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

Crea un objeto 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 En el estado next, los elementos Carousel se desplazan uno hacia la izquierda y a la derecha, respectivamente.

Por ejemplo, toma las cinco vistas de la figura 3 y supón que en el campo start estados, las vistas B, C y D son visibles, y A y E están fuera de la pantalla. Definir el estado anterior para que las posiciones de A, B, C y D sean donde B, C, D y E, y las vistas se movían de izquierda a derecha. En la siguiente debe suceder lo contrario: B, C, D y E se mueven hacia donde A, B, C y D, y las vistas se movían de derecha a izquierda. Esto se muestra en la figura 4)

Es fundamental que las vistas terminen exactamente donde comienzan las originales. Carousel brinda la ilusión de una colección infinita de elementos mediante moviendo las vistas reales de vuelta a donde estaban, pero reiniciarlas con el nuevo contenido coincidente. En el siguiente diagrama, se muestra este mecanismo. Pagar atención al "elemento #" valores):

Transiciones

Con estos tres conjuntos de restricciones definidos en tu archivo de escena en movimiento, crea dos las transiciones (adelante y hacia atrás) entre start y next y los estados start y previous. Agrega un 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 consulta las vistas en el mismo orden en que implementas la vista anterior y la siguiente animación.

Configura los siguientes atributos para el ayudante Carousel:

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

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

    <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 “seleccionado” actual En Carousel, las vistas que representen los elementos anteriores o posteriores podrían necesitar ocultarse para cuenta del inicio y el final de Carousel. Los controladores auxiliares Carousel automáticamente. De forma predeterminada, esas vistas se marcan como View.INVISIBLE en estas situaciones, para que el diseño general no cambie.

Hay un modo alternativo disponible en el que el ayudante Carousel marca, en su lugar, esas vistas como View.GONE. Puedes configurar este modo con la siguiente propiedad:

app:carousel_emptyViewsBehavior="gone"

Ejemplos

Para ver otros ejemplos sobre cómo usar el asistente de carrusel, consulta la proyectos de ejemplo en GitHub.