Implementar TabLayout con ViewPager en Jetpack Compose | Autor: Mr. Umbrella | Junio de 2021
Deslizar el dedo entre páginas es muy común para las IU, como comenzar, configurar guías, etc. Creo que ya sabe cómo usar el deslizamiento de página ViewPager. Si buscas alternativas ViewPager En Redactar, te sugiero que eches un vistazo a este Pager Biblioteca.
Esta biblioteca es actualmente experimental.Todas las API están marcadas como @ExperimentalPagerApi, Pero puede manejar bien la función del buscapersonas central.
En este artículo, veamos cómo usar un buscapersonas con pestañas para deslizarse entre páginas con una animación suave y un buen efecto de bucle infinito.
Primero, Consulte el sitio web de Pager para obtener la última versión.
Luego agregue lo siguiente a su aplicación build.gradle:
dependencies
implementation "com.google.accompanist:accompanist-pager:0.12.0"
Para implementar pestañas, usaremos dos componentes HorizontalPager con PagerState.
HorizontalPager Es el ViewPager en el entorno de redacción, lo que permite a los usuarios deslizarse horizontalmente entre las páginas. No es necesario crear todas las páginas a la vez, porque hacerlo consumirá mucha memoria y el usuario nunca actualizará todas las páginas. defecto, HorizontalPager Solo se crean la página actual y las páginas fuera de la pantalla a la izquierda y a la derecha de la página actual. Se eliminarán las páginas que superen este límite.
¿Cuál es la solución a este problema?
Sí hay: PagerState
Este es un estado HorizontalPager Queremos mantener obras cruzadas. Echemos un vistazo a la firma del método. PagerState:
Podemos ver que hay 5 atributos disponibles que se pueden pasar a rememberPagerState Características:
pageCount: Número de páginas. Esto es requerido.initialPage: La página inicial, el valor predeterminado es 0.initialPageOffset: El desplazamiento de página inicial.initialOffscreenLimit: Defina el número de páginas que deben permanecer a cada lado de la página actual. Este valor requiere al menos 1 página fuera de la pantalla. Debe prestar mucha atención a la gestión de la memoria.Si hay muchos elementos, como imágenes y animaciones, si los almacena en caché todos, esto puede causar Error de memoria insuficiente.infiniteLoop: Atributos convenientes. Si es cierto, puede pasar de la primera página a la última página en un solo paso.
Teniendo en cuenta estas propiedades, podemos crear un PagerState Y pasarlo a HorizontalPager.
Echemos un vistazo a la firma del método. HorizontalPager:
Podemos ver que hay 9 atributos disponibles que se pueden pasar a HorizontalPager Características:
state: EstoPagerStateLo creamos arriba. Esto es requerido.modifier: Modificador aplicado al buscapersonas.reverseLayout: Cuando el proyecto real estará compuesto de principio a fin.itemSpacing: El espacio horizontal que se agregará entre elementos.dragEnabled: Cuando es falso, el usuario no puede deslizarse entre páginas.flingBehavior: Describe la lógica del comportamiento de lanzamiento.verticalAlignment,horizontalAlignment: Ayuda a alinear los elementos secundarios del diseño.content: Utilice otra función de Composable para crear una página.
Puede consultar este enlace para ver mi artículo sobre cómo implementar pestañas en jetpack compose.
Creemos una pantalla con 4 pestañas y un enlace de buscapersonas a ellas. Configuré el fuera de pantalla en 2, abro el bucle infinito y la página inicial está en la segunda. Al hacer clic en la pestaña, aparecerá una animación que desliza la página hacia la pestaña. Aquí está el código:
Si encuentra un problema al ejecutar fragmentos de código, consulte el repositorio de GitHub Tab-Compose para obtener ayuda.
