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 vista única que puedes tocar y arrastrar para moverla horizontalmente.
- Consulta el XML de diseño.
- Consulta el 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.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
ImageFilterView: transición de imagen
En este ejemplo, se muestra cómo hacer la transición del valor de saturación de un ImageFilterView.
- Consulta el XML de diseño.
- Consulta el 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.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
Interpolación del fotograma clave
Este ejemplo se basa en el ejemplo de posición del fotograma clave, pero se agrega la rotación y el ajuste de la transición de vista.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
Ciclo de fotogramas clave
En este ejemplo, se agregan elementos <KeyCycle> para aportar un movimiento de ondulación a la vista.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
CoordinatorLayout (1/2)
En este ejemplo, se agrega un MotionLayout a un AppBarLayout existente para aportar movimiento a la barra de la app. Este ejemplo se describe con más detalles en Introducción a MotionLayout (parte III).
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
CoordinatorLayout (2/2)
En este ejemplo, se agrega un MotionLayout a un AppBarLayout existente para aportar movimiento a la barra de la app.
- Consulta el XML de diseño.
- Consulta el 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 detalles en Introducción a MotionLayout (parte III).
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
DrawerLayout (2/2)
En este ejemplo, se muestra cómo agregar movimiento a un DrawerLayout.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScenepara el contenido principal. - Consulta el XML de
MotionScenepara el menú.
Panel lateral
En este ejemplo, se muestra cómo mostrar un panel lateral cuando se arrastra el área del contenido principal hacia la derecha.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
Paralaje
En este ejemplo, se muestra un fondo de paralaje, en el que diferentes capas de fondo se mueven a diferentes velocidades.
- Consulta el XML de diseño.
- Consulta el 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).
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
ViewPager: Lottie
En este ejemplo, se muestra cómo puedes agregar movimiento cuando te deslizas entre las pestañas de ViewPager.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
Movimiento complejo (1/3)
En este ejemplo, se combinan elementos de ejemplos anteriores para demostrar el movimiento complejo.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
Movimiento complejo (2/3)
En este ejemplo, se combinan elementos de ejemplos anteriores para demostrar el movimiento complejo.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
Movimiento complejo (3/3)
En este ejemplo, se combinan elementos de ejemplos anteriores para demostrar el movimiento complejo.
- Consulta el XML de diseño.
- Consulta el 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.
- Consulta el XML de diseño.
- Consulta el 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.
- Consulta el XML de diseño.
- Consulta el 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.
- Consulta el XML de diseño.
- Consulta el 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.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.
Multiestado
En este ejemplo, se muestra cómo usar el estado para determinar qué movimiento aplicar.
- Consulta el XML de diseño.
- Consulta el XML de
MotionScene.