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>
Agrega el carrusel
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 deCarousel
; en este ejemplo, C.app:carousel_previousState
: El ID deConstraintSet
del estado anterior.app:carousel_nextState
: El ID deConstraintSet
del siguiente estadoapp:carousel_backwardTransition
: El IDTransition
aplicado entre los estados inicio y anteriorapp:carousel_forwardTransition
: Es el ID deTransition
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.