En este artículo veremos la guía completa para implementar Volley en una aplicación Android de ejemplo llamada MySocialMedia. La aplicación que desarrollaremos se compone de una lista de ítems referentes a posteos realizados en un blog imaginario de Social Media, donde se implementará un ListView.
Descargar Código
¿Qué es y para qué sirve la librería Volley?
1. Añadir la librería Volley al proyecto Android Studio
1.1 Clonar Repositorio Git y añadir JAR
1.2 Usar versión no oficial de Volley desde Maven Central
1.3 Importar los archivos fuente de Volley como un módulo
2. Añadir el permiso para conexiones en el Android Manifiest
3. Diseñar Interfaz de la Aplicación Android
3.1 Diseñar layout de la actividad principal
3.2 Diseñar aspecto de los ítems de la lista
3.3 Crear Adaptador personalizado para el ListView
3.4 Entender el origen de los datos del adaptador
4. Crear una nueva Cola de Peticiones
5. Generar y Añadir peticiones
5.1 Realizar petición para un archivo JSON
5.2 Realizar petición para las imágenes
5.3 Acoplar peticiones Volley en el Adaptador personalizado
5.4 Cancelar una petición
6. Crear Adaptador y asociarlo a la lista
7. Características adicionales de Volley
7.1 Creación de patrón Singleton para alcance global dentro de la aplicación
7.2 Optimizar la carga de múltiples imágenes con ImageLoader
7.3 Complementar a ImageLoader con NetworkImageView
7.4 ¿Cómo usar el método POST en la librería Volley?
7.5 Crear peticiones personalizadas en Volley
7.5.1 Crear una petición personalizada Volley con la librería Gson
¿Qué es y para qué sirve la librería Volley?
Como se dijo al inicio del articulo Volley es un cliente Http creado para facilitar la comunicación de red en las aplicaciones Android. A diferencia de la interfaz HttpURLConnection que vimos anteriormente, Volley está totalmente enfocado en las peticiones, evitando la creación de código repetitivo para manejar tareas asíncronas por cada petición o incluso para parsear los datos que vienen del flujo externo.
Lee también Operaciones HTTP en Android con el cliente HttpURLConnection
Entre sus características mas potenciadoras podemos encontrar:
Procesamiento concurrente de peticiones .
Priorización de las peticiones, lo que permite definir la preponderancia de cada petición.
Cancelación de peticiones, evitando la presentación de resultados no deseados en el hilo principal.
Gestión automática de trabajos en segundo plano, dejando de lado la implementación manual de un framework de hilos.
Implementación de caché en disco y memoria.
Capacidad de personalización de las peticiones.
Provee información detallada del estado y flujo de trabajo de las peticiones en la consola de depuración.Evitar usar Volley en descargas de datos pesados: Aunque Volley posee ventajas enormes para el procesamiento de peticiones, no significa que se debe usar en cada petición que hagamos. Esta librería tiene limitaciones con la descarga de información demasiada extensa, ya que su operación se basa en salvaguardas en cache, lo que haría lento el proceso con datos voluminosos.
Volley posee varios componentes que optimizan la administración de las peticiones generadas desde las aplicaciones Android. La gestión comienza en una Cola de Peticiones que recibe cada una de las peticiones generadas, donde son previamente priorizadas para su realización.
Luego son seleccionadas por un elemento llamado Cache Dispatcher, cuya función es comprobar si la respuesta de la petición actual puede ser obtenida de resultados previos guardados en caché. Si es así, entonces se pasa a parsear la respuesta almacenada y luego se presenta al hilo principal. En caso negativo, se envía la petición a la Cola de Conexiones Pendientes, donde reposan todas aquellas peticiones que están por ejecutarse.
Luego entra en juego un componente llamado Network Dispatcher, el cual se encarga de seleccionar las peticiones pendientes de la cola, para realizar las respectivas transacciones Http hacia el servidor. Si es necesario, las respuesta de estas peticiones se guardan en caché, luego se parsean y finalmente se publican en el hilo principal.
Aunque esta es una definición básica, es muy concisa y significativa para comprender el proceso que realiza Volley al surgir peticiones. A continuación se muestra una ilustración que resume el flujo:
Esta implementación elimina la implementación de hilos manualmente con Tareas asíncronas como era el caso del uso del cliente HttpURLConnection.
1. Añadir la librería Volley al proyecto Android Studio
1.1 Clonar Repositorio Git y añadir JAR
El primer paso a realizar es incluir Volley en el proyecto. Una de las formas de hacerlo es clonar el repositorio con la herramienta Git y luego construir un archivo .jar con base en este. La idea es ubicar el archivo en la carpeta libs, la cual permite referenciar librerías.
Puedes generar el jar con la herramienta jar del JDK de Java. Puedes encontrar una guía aquí:
http://docs.oracle.com/javase/tutorial/deployment/jar/build.html
También puedes usar el sistema de construcción Ant de Apache para generarlo o incluso el mismo Gradle.
Cuando ya esté listo, solo agrega la siguiente linea a tu archivo build.gradle y tendrás acceso a la librería:
compile files("libs/volley.jar")
1.2 Usar versión no oficial de Volley desde Maven Central
Nuestro amigo MCXIOAKE (usuario de Github) ha creado un mirror del repositorio original para Maven Central. Lo que significa que podemos obtener el .jar a través de una regla de de construcción externa en build.gradle. Para ello solo agrega la siguiente línea de dependencia:
compile "com.mcxiaoke.volley:library:1.0.+"
El autor asegura que esta copia está en constante sincronización con el repositorio original de Google, por lo que no deberíamos preocuparnos por su actualización.
1.3 Importar los archivos fuente de Volley como un módulo
Importar como módulo los archivos de Volley es otro camino que se puede seguir. En este caso tendremos más cercanos los archivos de composición.
Para importar el nuevo módulo dirígete a File > Import New Module? y selecciona la ubicación de tus archivos.
compile project(":volley")
Cuando se le dicta a Android Studio que importe un nuevo módulo automáticamente se añade al archivo settings.gradle una referencia del nuevo módulo, indicando que debe construirse un nuevo segmento.
include ":app", ":volley"
También podemos solo copiar y pegar los archivos fuente en la carpeta src como si se tratasen de código interno y luego ejecutar la construcción sin ningún problema.
2. Añadir el permiso para conexiones en el Android Manifiest
Por obvias razones debemos solicitar a Android que le permita a nuestra aplicación conectarse a la web, para ello añades la etiqueta <uses-permission> referente:
<uses-permission android:name="android.permission.INTERNET"/>
3. Diseñar Interfaz de la Aplicación Android
3.1. Diseñar layout de la actividad principal
Debido a que solo usaremos una lista en la interfaz, añadiremos como nodo raíz un ListView al layout de la siguiente forma:
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
android:id="@+id/listView"/>
3.2 Diseñar aspecto de los ítems de la lista
El diseño se basa en un formato de fragmento enriquecido, donde se muestra una miniatura que presenta el post (ImageView), un encabezado (TextView Normal) y una pequeña metadescripción (TextView Small) asociada al contenido del artículo.
Veamos la definición del layout post.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<ImageView
android:layout_width="100dp"
android:layout_height="150dp"
android:id="@+id/imagenPost"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="false"
android:scaleType="centerCrop" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="@+id/textoTitulo"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/imagenPost"
android:textStyle="bold"
android:layout_marginLeft="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Medium Text"
android:id="@+id/textoDescripcion"
android:layout_below="@+id/textoTitulo"
android:layout_alignLeft="@+id/textoTitulo" />
</RelativeLayout>
3.3 Crear Adaptador personalizado para el ListView
Este paso ya lo hemos realizado una gran cantidad de veces, pero sin embargo para la implementación de Volley tenemos que dar un trato especial a la fuente de datos, que en este caso se encuentra en la web.
Crearemos un adaptador que extienda de la clase ArrayAdapter llamado PostAdapter, donde por el momento se dejará expresado en comentarios las acciones que se relacionen con Volley, las cuales se completarán a medida que entendamos las funcionalidades lógicas. El adaptador quedaría de la siguiente forma:
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
public class PostAdapter extends ArrayAdapter {
// Atributos
private String URL_BASE = "http://servidorexterno.site90.com/datos";
private static final String TAG= "PostAdapter";
List<Post> items;
public PostAdapter(Context context) {
super(context,0);
// Gestionar petición del archivo JSON
}
@Override
public int getCount() {
return items != null ? items.size() : 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater layoutInflater= LayoutInflater.from(parent.getContext());
//Salvando la referencia del View de la fila
View listItemView = convertView;
//Comprobando si el View no existe
if (null == convertView) {
//Si no existe, entonces inflarlo
listItemView = layoutInflater.inflate(
R.layout.post,
parent,
false);
// Procesar item
return listItemView;
}
}
Por el momento existen 3 atributos. El string URL_BASE contiene la ubicación base de los archivos que accederemos, lo que significa que se debe concatenar esta cadena con la dirección relativa del recurso. Se declaró una constante TAG cuyo fin es gestionar actividades de log. Y también se encuentra una lista con elementos de tipo Post, la cual es una clase que encapsula los datos de los elementos de la lista.
3.4 Entender el origen de los datos del adaptador
La aplicación MySocialMedia obtiene la información de cada post desde un servidor externo a través de un archivo con formato JSON llamado social_media.json. Este archivo contiene un array de objetos con los atributos: titulo, descripción e imagen. Todos los atributos son de tipo string como se ve en el siguiente resumen (Verás el código expandido pero en realidad está minimizado).
{
"items":
[
{
"titulo": "Difusión de contenidos",
"descripcion": "Aprende nuestra metodología para generar un plan de marketing de contenidos",
"imagen": "/img/social1.png"
}, {
"titulo": "La Magia de las Campañas dirigidas",
"descripcion": "¿Tus ventas están por el suelo?, entonces este articulo es para ti",
"imagen": "/img/social2.png"
}, {
"titulo": "Posicionar tu marca con contenido audiovisual",
"descripcion": "El objetivo de esta guía es desvelarte los secretos para el posicionamiento con videos ilustrativos",
"imagen": "/img/social3.png"
}, {
"titulo": "¿Como Crear un Plan de Email Marketing?",
"descripcion": "Descubre la importancia de capturar la información de aquellos usuarios que pueden ser tus futuros clientes",
"imagen": "/img/social4.png"
},
...
]
}
Como ves, las imágenes se representan con la ruta relativa dentro del servidor. De esta forma podremos realizar una petición hacia su ubicación concatenando con la url base.
Con esto en mente creamos la clase Post:
public class Post {
// Atributos
private String titulo;
private String descripcion;
private String imagen;
public Post() {
}
public Post(String titulo, String descripcion, String imagen) {
this.titulo = titulo;
this.descripcion = descripcion;
this.imagen = imagen;
}
public String getTitulo() {
return titulo;
}
public void setTitulo(String titulo) {
this.titulo = titulo;
}
public String getDescripcion() {
return descripcion;
}
public void setDescripcion(String descripcion) {
this.descripcion = descripcion;
}
public String getImagen() {
return imagen;
}
public void setImagen(String imagen) {
this.imagen = imagen;
}
}
Teniendo en cuenta esta estructura, se puede deducir que a través de Volley debemos realizar una petición para obtener el archivo JSON. Luego, basados en los objetos obtenidos desde ese archivo, se debe realizar una serie de peticiones para obtener cada imagen alojada en el servidor.
Adicionalmente debe parsearse la respuesta JSON y el flujo binario de cada imagen para que nuestra aplicación pueda comprender dicha información.
4. Crear una nueva Cola de Peticiones
El uso de Volley comienza con creación de una cola de peticiones. La representación lógica de este elemento es la clase RequestQueue. Este objeto se encarga de gestionar automáticamente el envió de las peticiones, la administración de los hilos, la creación de la caché y la publicación de resultados en la UI.
Este elemento será parte de nuestro adaptador, por lo que lo añadiremos como atributo. Para crear una nueva instancia usaremos el método estático newRequestQueue() de la clase Volley:
...
private RequestQueue requestQueue;
...
// Crear nueva cola de peticiones
requestQueue= Volley.newRequestQueue(context);
Con esta declaración ya se tiene el camino abierto para añadir peticiones.
5. Generar y Añadir peticiones
Para realizar peticiones en Volley podemos acudir a ciertos tipos que ya están estandarizados para uso frecuente. Esto quiere decir que el desarrollador no debe tomarse tiempo en estructurar la petición, añadiendo hilos y generando procesos de parsing extenso.
Existen cuatro tipos de peticiones estándar:
StringRequest: Este es el tipo más común, ya que permite solicitar un recurso con formato de texto plano, como son los documentos HTML.
ImageRequest: Como su nombre lo indica, permite obtener un recurso gráfico alojado en un servidor externo.
JsonObjectRequest: Obtiene una respuesta de tipo JSONObject a partir de un recurso con este formato.
JsonArrayRequest: Obtiene como respuesta un objeto del tipo JSONArray a partir de un formato JSON.
5.1 Realizar petición para un archivo JSON
La primera petición que haremos será del tipo JsonObjectRequest, ya que tenemos un objeto JSON con un atributo llamado "items" de tipo array. El nombre del archivo es social_media.json. Veamos la implementación:
// Nueva petición JSONObject
jsArrayRequest = new JsonObjectRequest(
Request.Method.GET,
URL_BASE + URL_JSON,
null,
new Response.Listener<JSONObject>() {
@Override
public void onResponse(JSONObject response) {
items = parseJson(response);
notifyDataSetChanged();
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Log.d(TAG, "Error Respuesta en JSON: " + error.getMessage());
}
}
);
El primer parámetro del constructor es el método empleado en la petición. Como ves se usa la interfaz Method perteneciente a la clase Response, la cual contiene los métodos necesarios, como en este caso, donde se usa GET. Luego sigue la URL del recurso JSON, la cual se compone de dos strings concatenadas. El tercer parámetro son los pares clave-valor si se fuese a realizar una petición POST.
El cuarto parámetro es una clase anónima del tipo Response.Listener para definir una escucha que maneje los resultados de la petición.
Se debe sobrescribir el método onResponse() para codificar las acciones con la respuesta en el hilo de UI, en este caso parseamos el contenido del JSONObject y se le asigna el resultado al atributo items de nuestro adaptador. Adicionalmente se le indica al adaptador que actualice su contenido con notifyDataSetChanged(), ya que no sabremos en que momento la petición terminará exitosamente.
El quinto parámetro es una escucha que maneja los errores ocurridos en la transacción Http. Para ello se usa la clase Response.ErrorListener, la cual requiere dictaminar las acciones en su método onErrorResponse(). En este caso usamos el método estático d() de la clase Log para registrar en consola que ocurrió un error.
Finalmente usamos el método add() para añadir la petición a la cola de peticiones:
// Añadir petición a la cola
requestQueue.add(jsArrayRequest);
5.2 Realizar petición para las imágenes
En este situación usaremos el tipo ImageRequest para obtener cada imagen. Solo necesitamos concatenar la url absoluta que fue declarada como atributo, más la dirección relativa que cada imagen trae consigo en el objeto JSON:
// Petición para obtener la imagen
ImageRequest request = new ImageRequest(
URL_BASE + item.getImagen(),
new Response.Listener
@Override
public void onResponse(Bitmap bitmap) {
Log.d(TAG, "ImageRequest completa");
imagenPost.setImageBitmap(bitmap);
}
}, 0, 0, null,
new Response.ErrorListener() {
public void onErrorResponse(VolleyError error) {
imagenPost.setImageResource(android.R.drawable.ic_lock_power_off);
Log.d(TAG, "Error en ImageRequest");
}
});
// Añadir petición a la cola
requestQueue.add(request);
El código anterior es similar a la primera petición solo que esta vez usamos una escucha de tipo Listener<Bitmap>, la cual asignamos al ImageView del ítem procesado actualmente. En la escucha del error se asigna un drawable cuyo contenido representa visualmente un error de carga. Esto mostrará que las cosas no salieron como lo esparábamos.
El tercer, cuarto y quinto parámetros hacen referencia a una configuración adicional para la descarga de la imagen, pero ese tema no es necesario abordarlo debido al alcance de este artículo.
Como puedes notar, las peticiones con Volley no requieren el uso de tareas asíncronas, tampoco se necesita especificar que los resultados se deben publicar en el hilo UI y mucho menos parsear los flujos de información. La escucha Listener nos proporciona en onResponse() la respuesta completamente lista para usarse, ya sea un objeto JSONArray, un String o un Bitmap.
5.3 Acoplar peticiones Volley en el Adaptador personalizado
Una vez entendidas y creadas las peticiones, podemos completar nuestro adaptador PostAdapter de la siguiente manera, veamos:
import android.content.Context;
import android.graphics.Bitmap;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.ImageRequest;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.ArrayList;
import java.util.List;
public class PostAdapter extends ArrayAdapter {
// Atributos
private RequestQueue requestQueue;
JsonObjectRequest jsArrayRequest;
private static final String URL_BASE = "http://servidorexterno.site90.com/datos";
private static final String URL_JSON = "/social_media.json";
private static final String TAG = "PostAdapter";
List<Post> items;
public PostAdapter(Context context) {
super(context,0);
// Crear nueva cola de peticiones
requestQueue= Volley.newRequestQueue(context);
// Nueva petición JSONObject
jsArrayRequest = new JsonObjectRequest(
Request.Method.GET,
URL_BASE + URL_JSON,
null,
new Response.Listener<JSONObject>() {
@Override
public void onResponse(JSONObject response) {
items = parseJson(response);
notifyDataSetChanged();
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Log.d(TAG, "Error Respuesta en JSON: " + error.getMessage());
}
}
);
// Añadir petición a la cola
requestQueue.add(jsArrayRequest);
}
@Override
public int getCount() {
return items != null ? items.size() : 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
// Referencia del view procesado
View listItemView;
//Comprobando si el View no existe
listItemView = null == convertView ? layoutInflater.inflate(
R.layout.post,
parent,
false) : convertView;
// Obtener el item actual
Post item = items.get(position);
// Obtener Views
TextView textoTitulo = (TextView) listItemView.
findViewById(R.id.textoTitulo);
TextView textoDescripcion = (TextView) listItemView.
findViewById(R.id.textoDescripcion);
final ImageView imagenPost = (ImageView) listItemView.
findViewById(R.id.imagenPost);
// Actualizar los Views
textoTitulo.setText(item.getTitulo());
textoDescripcion.setText(item.getDescripcion());
// Petición para obtener la imagen
ImageRequest request = new ImageRequest(
URL_BASE + item.getImagen(),
new Response.Listener<Bitmap>() {
@Override
public void onResponse(Bitmap bitmap) {
imagenPost.setImageBitmap(bitmap);
}
}, 0, 0, null,null,
new Response.ErrorListener() {
public void onErrorResponse(VolleyError error) {
imagenPost.setImageResource(R.drawable.error);
Log.d(TAG, "Error en respuesta Bitmap: "+ error.getMessage());
}
});
// Añadir petición a la cola
requestQueue.add(request);
return listItemView;
}
public List<Post> parseJson(JSONObject jsonObject){
// Variables locales
List<Post> posts = new ArrayList<>();
JSONArray jsonArray= null;
try {
// Obtener el array del objeto
jsonArray = jsonObject.getJSONArray("items");
for(int i=0; i<jsonArray.length(); i++){
try {
JSONObject objeto= jsonArray.getJSONObject(i);
Post post = new Post(
objeto.getString("titulo"),
objeto.getString("descripcion"),
objeto.getString("imagen"));
posts.add(post);
} catch (JSONException e) {
Log.e(TAG, "Error de parsing: "+ e.getMessage());
}
}
} catch (JSONException e) {
e.printStackTrace();
}
return posts;
}
}
5.4 Cancelar una petición
Si deseas evitar que una petición iniciada no publique su respuesta en el hilo principal usa el método cancel() del objeto Request, el cual cancela la visualización de los resultados obtenidos:
requestEjemplo.cancel();
También es posible cancelar un grupo de peticiones asociadas a una etiqueta impuesta. Para ello primero debes asignar la etiqueta a las peticiones elegidas con el método setTag(), el cual recibe un String que representa la et
Fuente: este post proviene de Hermosa Programación, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado: