Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Android SDK
Code

Agregar Gestos Pase a RecyclerViews

by
Difficulty:AdvancedLength:MediumLanguages:

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Una gran parte del Material Design es los usuarios de manera interactuar con los elementos visuales de una aplicación. Por lo tanto, además de grifos y prensas de largo, una aplicación para Android bien hecha hoy se espera que más complejos gestos touch como golpes y fricciones. Esto es especialmente importante si la aplicación utiliza listas para mostrar sus datos.

Mediante el widget de RecyclerView y algunos otros componentes de Android Jetpack, puede manejar una amplia variedad de gestos de pase de lista relacionadas con sus aplicaciones. Además, en sólo unas pocas líneas de código, puede asociar animaciones de movimiento de Material con los gestos.

En este tutorial te mostraré cómo agregar unos gestos swipe común, completos con animaciones intuitivas, a sus listas.

Requisitos Previos

Para poder aprovechar al máximo este tutorial, necesitará:

  • Android Studio 3.2.1 o superior
  • un teléfono o tablet funcionando a nivel de API Android 23 o superior

1. Creación de una Lista

Para mantener este corto tutorial, vamos a usar una de las plantillas disponibles en Android Studio para generar la lista.

Comenzar con el lanzamiento de Android Studio y crear un nuevo proyecto. En el Asistente para la creación del proyecto, asegúrese de que elegir la opción de Actividad Vacía.

Project creation wizard

En lugar de la biblioteca de soporte, utilizaremos Jetpack Android en este proyecto. Así, una vez que se ha generado el proyecto, vaya a Refactorizar > Migrar a AndroidX. Cuando se le solicite, pulse Migrate.

Confirmation prompt for proceeding with migration

A continuación, para añadir una lista al proyecto, vaya a archivo > Nueva > fragmento > fragmento (lista). En el cuadro de diálogo que aparece, vaya por delante y pulse el botón Finalizar sin realizar ningún cambio en los valores por defecto.

List fragment creation wizard

En este punto, Android Studio creará un nuevo fragmento que contiene un widget de RecyclerView totalmente configurado. También generará datos ficticios para mostrar en el widget. Sin embargo, todavía tendrás que agregar manualmente el fragmento a su actividad principal.

Para ello, primero agregue la interfaz OnListFragmentInteractionListener a su actividad principal y aplicar el único método que contiene.

A continuación, incrustar el fragmento dentro de la actividad mediante la adición de los siguientes <fragment> etiqueta en el archivo activity_main.xml:

En este punto, si se ejecuta la aplicación, debería poder ver una lista que se ve así:

App displaying a simple list

2. Agregar el Gesto de Golpe para Remover

Utilizando la clase ItemTouchHelper, rápidamente puede añadir de golpe y arrastre gestos a cualquier widget de RecyclerView. La clase también proporciona animaciones por defecto que se ejecutan automáticamente cuando se detecta un gesto válido.

La clase de ItemTouchHelper necesita una instancia de la clase abstracta ItemTouchHelper.Callback ser capaces de detectar y manejar gestos. Aunque puede utilizar directamente, es mucho más fácil usar una clase de contenedor llamada SimpleCallback en su lugar. Es demasiado abstracto, pero tendrás menos métodos para anular.

Crear una nueva instancia de la clase SimpleCallback dentro del método onCreateView() de la clase ItemFragment. Como argumento para su constructor, debe pasar la dirección del pase que desea manejar. Por ahora, pase RIGHT a él por lo que se maneja el gesto golpe de derecha.

La clase tiene dos métodos abstractos, que debe reemplazar: el método onMove(), que detecta los arrastres, y el método onSwiped(), que detecta los golpes. Debido a no se manejar cualquier gestos de arrastrar hoy, asegúrese de que usted devuelva false dentro del método onMove().

Dentro del método onSwiped(), puede utilizar la propiedad adapterPosition para determinar el índice del elemento de la lista que fue birlado. Porque estamos aplicando el gesto de golpe para quitar ahora, pasar el índice para el método removeAt() de la lista ficticia para quitar el elemento.

Además, debe pasar el mismo índice para el método notifyItemRemoved() del adaptador del widget de RecyclerView para asegurarse de que el artículo no se representa ya. Hacerlo además con la animación de eliminación de elemento por defecto.

En este punto, el objeto SimpleCallback está listo. Todo lo que necesitas hacer ahora es crear un objeto ItemTouchHelper con él y el widget de RecyclerView a éste.

Si ejecuta la aplicación ahora, usted será capaz a los artículos de golpe fuera de la lista.

3. Revelar una Vista de Fondo

Aunque el gesto del pase de quitar es muy intuitivo, algunos usuarios pueden no ser seguro de lo que sucede cuando se realiza el gesto. Por lo tanto, directrices de diseño de Material dicen que el gesto debe revelar también progresivamente una visión ocultada detrás el artículo, que indica claramente lo que va a ocurrir a continuación. Generalmente, la vista de fondo es simplemente un icono mostrando un cubo de basura.

Para agregar el icono de cubo de basura a tu proyecto, ve a archivo > Nuevo > Vector activo y seleccione el icono llamado eliminar.

Icon selection dialog

Ahora puede obtener una referencia al icono en el código de Kotlin llamando al método getDrawable(). Así que agregue la siguiente línea para el método onCreateView() de la clase ItemFragment:

Muestra una vista detrás de un elemento de lista es un poco complicado porque necesita dibujar manualmente mientras también asegurándose de que sus límites coinciden con los límites de la región que se revela progresivamente.

Reemplace el método onChildDraw() de la implementación de SimpleCallback para empezar a dibujar.

En el código anterior la llamada al método onChildDraw() de la superclase es importante. Sin él, los elementos de la lista no se moverá cuando pasa.

Porque estamos manejando solamente el gesto golpe de derecha, las coordenadas X de las izquierda y la parte inferior izquierda las esquinas superiores de la vista de fondo siempre será cero. Las coordenadas X de la parte superior derecha y las esquinas derecha inferior, por el contrario, deben ser iguales al parámetro dX, que indica cuánto del elemento de la lista se ha movido por el usuario.

Para determinar las coordenadas de Y de todos los rincones, tendrás que utilizar las propiedades top y botton de uno de los puntos de vista presentes dentro del objeto viewHolder.

Usando estas coordenadas, se puede definir ahora una región de recorte rectangular. El código siguiente muestra cómo utilizar el método clipRect() del objeto Canvas para hacerlo:

Aunque usted no tiene que, es una buena idea para hacer la región de recorte visible por lo que le da un color de fondo. Aquí es cómo usted puede utilizar el método drawColor() para hacer el gris de la región de clip cuando la distancia de golpe es pequeño y rojo cuando es más grande.

Ahora tendrás que especificar los límites del icono de cubo de basura. Estos límites deben incluir un margen que coincide con la del texto que aparece en los elementos de lista. Para determinar el valor del margen en píxeles, utilice el método getDimension() y pase text_margin a él.

Puede volver a utilizar las coordenadas de la esquina superior izquierda de la región de recorte como las coordenadas de la esquina superior izquierda del icono. Sin embargo, debe compensar por el textMargin. Para determinar las coordenadas de su esquina inferior derecha, utilice su intrínseca anchura y altura. Aquí está cómo:

Por último, dibujar el icono llamando a su método draw().

Si vuelva a ejecutar la aplicación, podrá ver el icono cuando pase para quitar un elemento de lista.

4. Agregar el Gesto de Pase a Actualizar

El gesto de pase a refresh, también conocido como el gesto de tirar a actualizar, se ha convertido en tan popular estos días que Android Jetpack tiene un componente dedicado para él. Se llama SwipeRefreshLayout, y le permite asociar rápidamente el gesto con cualquier widget RecyclerView, ListView y GridView.

Para apoyar el gesto de pase a actualizar en el widget de RecyclerView, usted debe hacer un niño de un widget de SwipeRefreshLayout. Así que abrir el archivo fragment_item_list.xml, agregue una etiqueta <SwipeRefreshLayout> que y mueva la etiqueta <RecyclerView> en su interior. Después de hacerlo, contenido del archivo debe como esto:

El fragmento de la lista se supone que el widget de RecyclerView es el elemento raíz de su trazado. Porque esto ya no es cierto, usted necesita hacer algunos cambios en el método onCreateView() de la clase ItemFragment. En primer lugar, cambie la primera línea del método, que se infla el diseño, con el siguiente código:

A continuación, cambie la última línea del método para devolver el widget SwipeRefreshLayout en vez del widget de RecyclerView.

Si intenta ejecutar la aplicación ahora, usted será capaz de realizar un gesto de barrido vertical y obtener retroalimentación visual. No cambia el contenido de la lista. Para realmente actualizar la lista, debe asociar un objeto OnRefreshListener con el widget de SwipeRefreshLayout.

En el oyente, eres libre de modificar los datos de que la lista muestra basados en sus requerimientos. Por ahora, porque estamos trabajando con datos ficticios, vamos a sólo vaciar la lista de objetos dummy y cargar con 25 nuevos artículos del maniquí. El código siguiente muestra cómo hacerlo:

Después de actualizar los datos, usted debe recordar llamar al método notifyDataSetChanged() para que el adaptador del widget RecyclerView sepa que debe volver a dibujar la lista.

Por defecto, tan pronto como el usuario realiza el gesto de pase a actualizar el widget de SwipeRefreshLayout muestra un indicador de progreso animada. Por lo tanto, han actualizado la lista, usted debe recordar quitar el indicador estableciendo la propiedad isRefreshing del widget en false.

Si ejecutar ahora la aplicación, quitar algunos elementos de la lista y realizar el gesto de pase a actualizar, verás que la lista se resetea.

Conclusión

Diseño de materiales ha sido alrededor por algunos años ahora, y la mayoría de usuarios estos días esperamos que manejar muchos de los gestos que menciona. Afortunadamente, hace no toma demasiado esfuerzo. En este tutorial, aprendió a implementar dos gestos muy comunes de golpe. También aprendió a revelar progresivamente una visión ocultada detrás de un elemento de la lista se pasa.

Puede aprender más acerca de gestos y movimiento de Material consultando la Guía de Diseño de Gesto.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.