Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Código de Una Aplicación Android de Galería de Imágenes Con Picasso

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Picasso es una biblioteca popular de Android open source para la carga de imágenes locales y remotas. Aprender a utilizar fácilmente para el manejo de la imagen de las necesidades de carga.

1. ¿Qué es Picasso?

Picasso (nombre inspirado por el famoso artista Pablo Picasso) es una biblioteca de Android open source muy popular para cargar imágenes en su aplicación para Android. Según la documentación oficial, se afirma:

... Picasso se permite para cargar en la aplicación la imagen sin problemas, a menudo en una línea de código!

Tenga en cuenta que Picasso utiliza OkHttp (biblioteca de red del mismo desarrollador) bajo el capó para cargar las imágenes en internet.

2. Entonces, ¿Por qué Utilizar a Picasso?

Ahora que has aprendido lo que es Picasso, la siguiente pregunta que cabría preguntarse ¿por qué es utilizar?

Desarrollo de su propia funcionalidad media carga y pantalla en Java o Kotlin puede ser un dolor real: usted tiene que cuidar de almacenamiento en caché, descifrar, administrar conexiones de red, threading, manejo de excepciones y más. Picasso es una biblioteca fácil de usar, bien planeada, bien documentada y bien probada que puede ahorrar un montón de tiempo precioso y ahorrarte algunos dolores de cabeza.

Aquí están muchos de los errores comunes de cargar imágenes en Android que se tratan de usted por Picasso, según la documentación oficial:

  • manejo de reciclaje y descargar cancelación de ImageView en un adaptador
  • transformaciones de imagen compleja con el uso de memoria mínima
  • memoria automática y almacenamiento en caché de disco

Agregar imágenes a su aplicación puede hacer que tu aplicación Android cobran vida. Así que en este tutorial, aprenderemos sobre Picasso 2 mediante la construcción de una aplicación de galería de imágenes sencillo. Cargar las imágenes a través de internet y mostrar como miniaturas en un RecyclerView, y cuando un usuario hace clic en una imagen, se abrirá una actividad detalle que contiene la imagen.

Un proyecto de muestra (en Kotlin) para este tutorial se puede encontrar en nuestro repositorio de GitHub para que pueda seguir fácilmente a lo largo.

Copia de buenos artistas, grandes artistas roban. — Pablo Picasso

3. Requisitos Previos

Para poder seguir este tutorial, necesitará:

Fuego Android Studio y cree un nuevo proyecto (lo que puede sea PicassoDemo) con una actividad vacía llamada MainActivity. Asegúrese de comprobar también la casilla de verificación incluir Kotlin apoyo.

Android Studios Add an Activity to Mobile dialog

4. Declarar las Dependencias

Después de crear un nuevo proyecto, especifique las siguientes dependencias en su build.gradle. En el momento de la escritura, la última versión de Picasso es 2.71828.

O con Maven:

Asegúrese de que sincronizar su proyecto después de la adición de Picasso y los artefactos de RecyclerView v7.

5. Añadir Permisos de Internet

Porque Picasso se va a realizar una petición de red para cargar imágenes a través de internet, tenemos que incluir el permiso de INTERNET en nuestro AndroidManifest.xml.

Así que ir hacerlo ahora!

Tenga en cuenta que esto sólo es necesario si vas a cargar imágenes desde internet. Esto no es necesario si sólo está cargando imágenes localmente en el dispositivo.

6. Crear el Diseño

Empezaremos creando nuestro RecyclerView dentro del archivo de diseño de activity_main.xml.

Crear el Diseño de Elementos Personalizados

A continuación, vamos a crear el diseño XML (item_image.xml) que se utilizarán para cada artículo (ImageView) dentro de la RecyclerView.

Ahora que hemos creado los diseños necesarios para nuestra aplicación Galería simple, el siguiente paso es crear el adaptador RecyclerView para rellenar datos. Antes de hacer eso, sin embargo, vamos a crear nuestro modelo de datos simple.

7. Crear un Modelo de Datos

Vamos a definir un modelo de datos simple para nuestro RecyclerView. Este modelo implementa Parcelable para transporte de alto rendimiento de datos de un componente a otro en Android. En nuestro caso, los datos se transportará desde SunsetGalleryActivity a SunsetPhotoActivity.

Tenga en cuenta que este modelo SunsetPhoto tiene solamente un solo campo llamado url (para propósitos de demostración), pero usted puede tener más si quieres. Esta clase implementa Parcelable, que significa que tenemos que reemplazar algunos métodos.

Podemos hacer uso de Android Studio IDEA para generar estos métodos para nosotros, pero la desventaja de esto es mantenimiento. ¿Cómo? En cualquier momento agregamos los campos nuevos a esta clase, podemos olvidar actualizar explícitamente el constructor y los métodos writeToParcel, que pueden conducir a algunos errores si no actualizamos los métodos.

Ahora, para evitar actualizar o escribir estos métodos estándar, Kotlin 1.1.14 introdujo la anotación @Parcelize. Esta anotación nos ayudará a generar los métodos writeToParcel, writeFromParcel y describeContents automáticamente bajo el capó para nosotros.

¡Ahora bien, nuestro código SunsetPhoto clase es apenas dos líneas! ¡Impresionante!

Recuerde agregar el siguiente código a tu aplicación módulo build.gradle:

Además, incluí un compañero objeto (o método static en Java) getSunsetPhotos() en la clase de modelo de SunsetPhoto que simplemente devolverá un ArrayList de SunsetPhoto cuando llama.

8. Crear el Adaptador

Vamos a crear un adaptador para rellenar nuestra RecyclerView con los datos. También implementamos un oyente haga clic en para abrir la actividad detalle — SunsetPhotoActivity — pasar una instancia de SunsetPhoto como un intento extra. La actividad de detalle muestra un primer plano de la imagen. Vamos a crear en una sección posterior.

Aviso que hemos utilizado la función de extensión de aplicar a un objeto como adicional a la intención. Como recordatorio, la función de aplicar devuelve el objeto pasado como argumento (es decir, el objeto receptor).

9. Carga de Imágenes Desde una URL

Vamos a necesitar Picasso para hacer su trabajo en esta sección, no para pintar nosotros una obra de arte, sino para traer imágenes desde internet y mostrarlos. A disponemos de estas imágenes individualmente en sus respectivas ImageViews dentro de nuestro método de onBindViewHolder() de RecyclerView como el usuario desplaza de la aplicación.

Paso a paso, esto es lo que están haciendo las llamadas a Picasso:

Método Get()

Esto devuelve la instancia mundial de Picasso (instancia de singleton) inicializada con las siguientes configuraciones por defecto:

  • Caché de memoria LRU 15% RAM la aplicación disponible.
  • Caché de disco de almacenamiento de 2% de espacio de hasta 50MB pero no menos de 5MB. Nota: esto sólo está disponible en la API 14+.
  • Tres descargar hilos para el acceso de disco y red.

Tenga en cuenta que si estas opciones no cumplen los requisitos de su aplicación, usted es libre de construir su propia instancia de Picasso con el control total de estas configuraciones mediante el uso de Picasso.Builder.

Por último, se llama al método build() para usted devolver una instancia de Picasso con sus propias configuraciones.

Se recomienda que hace esto en su Application.onCreate y luego establecerla como la instancia del singleton con Picasso.setSingletonInstance en ese método — para asegurarse de que la instancia de Picasso es el global.

El  Método load()

load(String path) inicia una solicitud de imagen utilizando la ruta de acceso especificada. Esta ruta puede ser una URL remota, recursos de archivo, recursos contenidos o recursos Android.

  • placeholder(int placeholderResId): un identificador de recursos de marcador de posición local o drawable durante la imagen está siendo cargado y luego aparece. Sirve como una experiencia de usuario buena para mostrar una imagen de marcador de posición mientras está descargando la imagen.

Tenga en cuenta que Picasso primero comprueba si la imagen solicita está en la caché de memoria, y si es así, muestra la imagen a partir de ahí (que analizaremos en caché en el Picasso más en una sección posterior).

Otros Métodos

  • error(int errorResId): un dibujable a utilizar si no se pudo cargar la imagen solicitada, probablemente porque el sitio está abajo.
  • noFade(): Picasso siempre se desvanece en la imagen que se mostrará en el ImageView. Si no desea que esta animación fade-in, simplemente llame al método noFade().
  • into(ImageView imageView): la vista de la imagen objetivo en el cual se colocará la imagen.

Redimensionamiento de Imágenes y la Tansformación

Si el servidor de que está solicitando la imagen no da la imagen que necesita en la talla correspondiente, usted puede fácilmente cambiar el tamaño de esa imagen con resize (int targetWidth, int targetHeight). Llamar a este método cambia el tamaño de la imagen y luego la muestra en el ImageView. Observe que las dimensiones en píxeles (px), no dp.

Puede pasar en un recurso de dimensión Android para la anchura y la altura usando el método resizeDimen (int targetWidthResId, int targetHeightResId). Este método será convertir el tamaño de la dimensión en píxeles crudos y luego llamar resize() bajo el capó, pasando a los tamaños se puede convertir (en píxeles) como argumentos.

Nota que estos redimensionar métodos no respeta relación de aspecto. En otras palabras, su relación de aspecto de imagen puede ser distorsionada.

Afortunadamente, Picasso nos ofrece algunos métodos útiles para resolver este problema:

  • centerCrop(): escala uniformemente la imagen (mantener relación de aspecto de la imagen) para que la imagen llena el área determinada, como gran parte de la proyección de imagen como sea posible. Si es necesario, se pueden recortar la imagen horizontal o verticalmente para ajustarse. Llamar a este método recorta una imagen dentro de los límites especificados por resize().
  • centerInside(): escala de la imagen por lo que ambas dimensiones son iguales a o menos de los límites solicitados. Este centro de una imagen dentro de los límites especificados por resize().
  • onlyScaleDown(): solo redimensionar una imagen, si el tamaño de la imagen original es más grande que el tamaño de destino especificado por resize().
  • Fit(): intenta cambiar el tamaño de la imagen para caber exactamente en los límites de objetivo ImageView.

Rotación de Imagen

Picasso tiene un API fácil para rotar una imagen y luego mostrar esa imagen. El método rotate(float degrees) permite girar la imagen los grados especificados.

En el ejemplo anterior, esto sería girar la imagen 90 grados. El método rotate(float degrees, float pivotX, float pivotY) gira la imagen de los grados especificados alrededor de un punto de pivote.

Aquí vamos a girar la imagen por 30 grados alrededor del punto pivote 200, 100 píxeles.

Transformación

Aparte de sólo manipular una imagen girando, Picasso también nos da la opción de aplicar una transformación personalizada a una imagen antes de mostrarla.

Simplemente creas una clase que implementa la interfaz de la Transformation de Picasso. Entonces debe reemplazar dos métodos:

  • Bitmap transform(Bitmap source): esto transforma el mapa de bits de origen en un nuevo mapa de bits.
  • String key(): devuelve una clave única para la transformación, utilizada para fines de almacenamiento en caché.

Después de que termines creando su transformación personalizada, usted simplemente ejecutarlo mediante la invocación de transform(Transformation transformation) en su instancia de Picasso. Tenga en cuenta que también puede pasar una lista de Transformation a transform().

Aquí, solicité una transformación de cultivos círculo a la imagen de la biblioteca de Android de código abierto de Transformaciones de Picasso. Esta librería tiene muchas transformaciones se pueden aplicar a una imagen con Picasso, incluyendo transformaciones para desenfocar o una imagen de escala de gris. Ir a comprobar hacia fuera si usted quiere aplicar algunas transformaciones frescas a tus imágenes.

10. Inicializar el Adaptador

Aquí, simplemente creamos nuestro RecyclerView con GridLayoutManager como el administrador de diseño, inicializar nuestro adaptador y vincularla a la RecyclerView.

11. Creación de la Actividad Detallada

Crear una actividad nueva y asígnele el nombre SunsetPhotoActivity. Tenemos el SunsetPhoto extra y cargar la imagen — en onStart() — con Picasso como hicimos antes.

Detallar el Diseño

Aquí es un diseño para mostrar la actividad de detalle. Sólo muestra un ImageView que mostrará la versión de resolución completa de la imagen cargada.

12. Almacenamiento en Caché Mecanismo en Picasso

Si observa cuidadosamente, se dará cuenta de que cuando usted revisar una imagen que se cargó anteriormente, carga incluso más rápido que antes. ¿Lo que hace más rápida? Es mecanismo de almacenamiento en caché de Picasso, que es lo que.

Aquí es lo que está sucediendo bajo el capó. Después de que una imagen se ha cargado una vez de internet, Picasso almacenará en caché lo tanto en memoria como en disco, ahorro de repetidas peticiones de red y que permite recuperación más rápida de la imagen. Cuando esa imagen es necesario otra vez, Picasso primero comprobará si la imagen está disponible en la memoria, y si los hay, devolverá inmediatamente. Si esa imagen no está en memoria, Picasso comprobará el disco siguiente, y si existe, devuelve. Si no está allí, Picasso finalmente hacer una petición de la red para que la imagen y mostrarla.

En Resumen, aquí es lo que pasa (debajo de la campana) para una solicitud de imagen: memoria-> disco-> red.

Dependiendo de la aplicación, sin embargo, puede evitar el almacenamiento en caché, por ejemplo, si se muestran las imágenes es probable que cambie a menudo y no se vuelve a cargar.

Así Que ¿Cómo Desactivar Almacenamiento En Caché?

Usted puede evitar memoria caché llamando al memoryPolicy(MemoryPolicy.NO_CACHE). Esto simplemente saltará la búsqueda caché de memoria al procesar una solicitud de imagen.

Tenga en cuenta que hay otro enum: MemoryPolicy.NO_STORE. Esto es útil si usted está muy seguro de que sólo se solicite una imagen una vez. Aplicando esto también no almacenará la imagen en la memoria caché — así no forzar a otros mapas de bits de la memoria caché.

Pero ser muy conscientes de que la imagen siendo que en caché en el disco, para evitar que también, usan networkPolicy (@NonNull NetworkPolicy política, @NonNull NetworkPolicy... adicional), que tiene uno o más de los siguientes valores de enumeración:

  • NetworkPolicy.NO_CACHE: omite la comprobación de la caché de disco y las fuerzas de carga a través de la red.
  • NetworkPolicy.NO_STORE: Salta almacenar el resultado en la caché de disco.
  • NetworkPolicy.OFFLINE: las fuerzas de la solicitud a través de la caché de disco, salto a la red.

Para evitar tanto memoria como disco de almacenamiento en caché en conjunto, sólo llame a ambos métodos uno tras otro:

13. Solicitud de Oyentes

Picasso, puede implementar un oyente o devolución de llamada para supervisar el estado de la solicitud que a medida que carga la imagen. Sólo uno de estos métodos se llamarán si implementa la interfaz de Target en una petición.

  • void onBitmapFailed(e: Exception?, errorDrawable: Drawable?): activa cuando la imagen no se pudo cargar correctamente. Aquí, podemos acceder a la excepción que se produce.
  • void onBitmapLoaded(Bitmap bitmap, LoadedFrom from): dispararon cuando una imagen se ha cargado con éxito. Aquí tenemos el mapa de bits para mostrar al usuario.
  • void onPrepareLoad(Drawable placeHolderDrawable): invoca derecho antes de su solicitud.

Aquí usted también podría mostrar y ocultar entonces un cuadro de diálogo de progreso si tuvieras uno.

Hay otro oyente de devolución de llamada que puede implementar si lo desea, llamada Callback. Esta interfaz tiene dos métodos: onSuccess() y onError (exception e). El primero se llama cuando la carga de la solicitud de imagen era acertada, y más adelante se llama cuando hay un error en la tramitación de la solicitud.

Volviendo a nuestra aplicación de galería de la imagen (dentro de SunsetPhotoActivity), vamos a modificar la pantalla un poco utilizando un objeto de devolución de Callback que se establece el mapa de bits en el ImageView y también cambiar el color de fondo del esquema extrayendo el color oscuro y vibrante de nuestra imagen utilizando la API de Android.

Así son el artefacto de paleta en build.gradle del módulo aplicación:

Vamos a implementar ahora la interfaz de devolución de Callback en nuestra petición de Picasso.

14. Probando la Aplicación

Por último, puede ejecutar la aplicación. Haga clic en una miniatura para obtener una versión de tamaño completo de la imagen.

Final app result

15. Dar Prioridad a las Solicitudes

Si desea cargar imágenes diferentes al mismo tiempo en la misma pantalla tienes la opción de orden que es más importante que el otro. En otras palabras, se pueden cargar imágenes importantes primero.

Simplemente llame a priority() en su Picasso instancia de solicitud y paso en cualquiera de las enumeraciones: Priority.LOW, Priority.NORMAL o Priority.HIGH.

16. Etiquetar las Solicitudes

Por etiquetar sus peticiones de Picasso, puede reanudar, pausar o cancelar las solicitudes que se asocian con etiquetas específicas. Dependiendo de su caso, puede etiquetar sus peticiones con una cadena o los objetos que deben definir el alcance de la solicitud como un Context, una Activity, o un Fragment. Fácilmente puede etiquetar una petición de Picasso llamando tag (@NonNull etiqueta Object) en uno. Pasar una instancia del objeto que sirve como la etiqueta.

Aquí están las siguientes operaciones que se pueden realizar en Tags peticiones de Picasso:

  • pauseTag (etiqueta de objeto): pausa todas las solicitudes asociadas con la etiqueta determinada.
  • resumeTag (etiqueta de objeto): reanudar pide pausa con la etiqueta determinada.
  • cancelTag (etiqueta de objeto): cancelar las solicitudes existentes con la etiqueta determinada.

Etiquetado aunque sus peticiones le da cierto control sobre sus peticiones, usted debe tener mucho cuidado cuando utilice etiquetas debido al potencial de pérdidas de memoria. Esto es lo que dice la documentación oficial:

Picasso mantendrá una referencia a la etiqueta como esta etiqueta está en pausa o solicitudes activas. Busque fugas potenciales.

Carga Desde el Sistema de Archivos

Es muy fácil cargar imágenes localmente en su aplicación.

Conclusión

¡Buen trabajo! En este tutorial, has construido una aplicación de galería de la imagen completa con Picasso, y a lo largo de la manera que has aprendido cómo funciona la biblioteca y cómo se puede integrar en su propio proyecto.

También ha aprendido cómo mostrar imágenes tanto locales como remotas, selección de las solicitudes, dando prioridad a las solicitudes y cómo aplicar las transformaciones de la imagen como tamaño. No sólo eso, pero has visto lo fácil que es habilitar y deshabilitar almacenamiento en caché, control de errores y oyentes de la petición de encargo.

Para saber más sobre Picasso, puede consultar la documentación oficial. Para obtener más información acerca de codificación para Android, revisa algunos de nuestros otros cursos y tutoriales aquí en Envato Tuts+!

Advertisement
Advertisement
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.