Este documento contiene ejemplos de cómo usar MotionLayout.
Cada ejemplo incluye un video que demuestra el movimiento, junto con el código correspondiente para la escena y los diseños de movimiento.
Movimiento básico
En este ejemplo, se incluye una sola vista que puedes tocar y arrastrar para moverla horizontalmente.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Atributo personalizado: backgroundColor
Este ejemplo es similar al ejemplo de movimiento básico. Además del movimiento básico, el color de fondo de la vista cambia a medida que se mueve la vista.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
ImageFilterView: transición de imagen
En este ejemplo, se muestra cómo realizar la transición del valor de saturación de un ImageFilterView.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Posición del fotograma clave
En este ejemplo, se usa <KeyFrameSet> para modificar la posición Y de la vista durante el movimiento.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Interpolación del fotograma clave
Este ejemplo se basa en el ejemplo de Posición del fotograma clave y se agrega la rotación y el ajuste de la transición de vista.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Ciclo de fotogramas clave
En este ejemplo, se agregan elementos <KeyCycle> para aportar un movimiento de ondulación a la vista.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
CoordinatorLayout (1/2)
En este ejemplo, se agrega un MotionLayout a un AppBarLayout existente para sumar movimiento a la barra de la app. Este ejemplo se describe con más detalles en Introducción a MotionLayout (parte III).
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
CoordinatorLayout (2/2)
En este ejemplo, se agrega un MotionLayout a un AppBarLayout existente para sumar movimiento a la barra de la app.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
DrawerLayout (1/2)
En este ejemplo, se muestra cómo agregar movimiento a un DrawerLayout. Este ejemplo se describe con más detalle en Introducción a MotionLayout (parte III).
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
DrawerLayout (2/2)
En este ejemplo, se muestra cómo agregar movimiento a un DrawerLayout.
- Ver el XML de diseño.
- Consulta el XML de
MotionScenepara ver el contenido principal. - Ver el archivo XML de
MotionScenepara el menú.
Panel lateral
En este ejemplo, se indica cómo mostrar un panel lateral cuando se arrastra el área de contenido principal hacia la derecha.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Paralaje
En este ejemplo, se muestra un fondo con paralaje, en el que diferentes capas de fondo se mueven a diferentes velocidades.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
ViewPager
En este ejemplo, se muestra cómo puedes agregar movimiento cuando te deslizas entre las pestañas de ViewPager.
Este ejemplo se describe con más detalles en Introducción a MotionLayout (parte III).
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
ViewPager: Lottie
En este ejemplo, se muestra cómo puedes agregar movimiento cuando te deslizas entre las pestañas de ViewPager.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Movimiento complejo (1/3)
En este ejemplo, se combinan elementos de ejemplos anteriores para demostrar el movimiento complejo.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Movimiento complejo (2/3)
En este ejemplo, se combinan elementos de ejemplos anteriores para demostrar el movimiento complejo.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Movimiento complejo (3/3)
En este ejemplo, se combinan elementos de ejemplos anteriores para demostrar el movimiento complejo.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Transición entre fragmentos (1/2)
En este ejemplo, se muestra cómo puedes usar MotionLayout para la transición entre fragmentos.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Transición entre fragmentos (2/2)
En este ejemplo, se muestra cómo puedes usar MotionLayout para la transición entre fragmentos.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Movimiento similar a YouTube
En este ejemplo, se muestra la transición entre una vista compacta y una experiencia de pantalla completa con contenido adicional.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
KeyTrigger
En este ejemplo, se muestra cómo mostrar y ocultar un botón de acción flotante cuando la transición supera un umbral de progreso.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.
Multiestado
En este ejemplo, se muestra cómo usar el estado para determinar qué movimiento aplicar.
- Ver el XML de diseño.
- Consulta el archivo XML de
MotionScene.