Descarga imágenes en Android: librería imageLoader

Hace poco buscando en GitHub.com encontré una librería que a más de uno ayudará en sus desarrollos. Se trata de una librería que se encarga de descargar imágenes, almacenarlas en caché y gestionar de donde se coge la imagen si se vuelve a pedir la misma url de forma totalmente transparente al programador. La librería en cuestión la podéis encontrar en el siguiente enlace https://github.com/novoda/ImageLoader.


Vamos a ver brevemente como instalarla y un pequeño ejemplo. Lo primero es descargar la librería .jar en la web del autor http://androidimageloader.com/. Ya de vuelta en la carpeta de vuestro proyecto creáis una carpeta llamada libs (si no existe)  y pegáis aquí el archivo .jar.

En el proyecto Eclipse refrescáis el proyecto para que aparezca la carpeta libs, hacéis botón derecho sobre el archivo .jar que hay en Eclipse en la carpeta libs y seleccionáis Build Path -> Add to Build Path. Ahora ya estamos listos para empezar a utilizar esta librería.

Lo primero es dar los permisos a nuestra aplicación. Permisos de internet, Acceso al estado de la red y poder escribir en la tarjeta SD.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Lo siguiente que nos dice la documentación es que debemos hacer es crear una variable estática de tipo ImageManager que configuramos y la hacemos visible a todo el proyecto por ejemplo poniéndola en una clase que herede de Application. Si no queréis complicaros lo podéis hacer todo en una única Activity.

private static ImageManager imageManager;
 
    @Override
    public void onCreate() {
        super.onCreate();
        
        normalImageManagerSettings();
    }
 
    private void normalImageManagerSettings() {
        imageManager = new ImageManager(this, new SettingsBuilder()
            .withCacheManager(new LruBitmapCache(this))
            .build(this));
    }
 
     /**
     * There are different settings that you can use to customize
     * the usage of the image loader for your application.
     */
    @SuppressWarnings("unused")
    private void verboseImageManagerSettings() {
        SettingsBuilder settingsBuilder = new SettingsBuilder();
        
        //You can force the urlConnection to disconnect after every call.
        settingsBuilder.withDisconnectOnEveryCall(true);
        
        //We have different types of cache, check cache package for more info
        settingsBuilder.withCacheManager(new LruBitmapCache(this));
        
        //You can set a specific read timeout
        settingsBuilder.withReadTimeout(30000);
        
        //You can set a specific connection timeout
        settingsBuilder.withConnectionTimeout(30000);
        
        //You can disable the multi-threading ability to download image 
        settingsBuilder.withAsyncTasks(false);
        
        //You can set a specific directory for caching files on the sdcard
//        settingsBuilder.withCacheDir(new File("/something"));
        
        
        //Setting this to false means that file cache will use the url without the query part
        //for the generation of the hashname
        settingsBuilder.withEnableQueryInHashGeneration(false);
        
        LoaderSettings loaderSettings = settingsBuilder.build(this);
        imageManager = new ImageManager(this, loaderSettings);
    }

    /**
     * Convenient method of access the imageLoader
     */
    public static ImageManager getImageLoader() {
        return imageManager;
    }

Aquí se está configurando tal como nos dice la documentación, lo importante es el método del final que nos devolverá el ImageManager mediante getImageLoader. Lo siguiente que haremos será en una Activity crearemos un método para cargar una imagen. Para ello en el layout introduciremos un ImageView.

<ImageView android:id="@+id/imgThumb" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

Ahora en la Activity vamos a crear los siguiente métodos:

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);        
        initImageLoader();        
      
 }

private void initImageLoader(){
   imageManager = AppGlobals.getImageLoader();
        imageTagFactory = new ImageTagFactory(SIZE, SIZE, R.drawable.loading);
        imageTagFactory.setErrorImageId(R.drawable.image_not_found);
        imageTagFactory.setSaveThumbnail(true);
   
  }
  
  protected ImageManager imageManager;
    protected ImageTagFactory imageTagFactory;
    protected void loadImgView(ImageView imgView, String urlImage){
     imgView.setTag(imageTagFactory.build(urlImage));
        imageManager.getLoader().load(imgView);
    }

En el onCreate de nuestra Activity inicializamos initImageLoader que se trae el ImageLoader que configuramos antes. La clase AppGlobals es donde tengo yo el código anterior, vosotros simplemente os creáis una clase que se llame así y que herede de Application o directamente en esta Activity.

El método que realmente importa es loadImgView al cual le pasamos un ImageView y la url de la imagen a descargar. El resto lo hace la librería.

Esta parte la podéis poner en una clase que herede de Activity y el resto de Activitys de vuestro proyecto que hereden de esta, de esta forma no necesitareis repetir código en todas vuestras Activitys. Vamos a ver como descargar una imagen.

ImageView imgThumb = (ImageView) findViewById(R.id.imgThumb);
loadImgView(imgThumb, "url de vuestra imagen");

Como veis es muy simple, simplemente inicializar el ImageView y llamar al método loadImageView pasándole ImageView y url.

Una de las cosas que de momento no vienen en la documentación es como cargar con esta librería una galería de imagenes. Vamos a ver un ejemplo.

<GridView 
 android:id="@+id/gridviewgaleria"
 android:layout_width="fill_parent" 
  android:layout_height="fill_parent"
  android:columnWidth="90dp"
  android:numColumns="auto_fit"
  android:verticalSpacing="5dp"
  android:horizontalSpacing="5dp"
  android:stretchMode="columnWidth"
  android:gravity="center" 
    />

En nuestro layout primero añadimos un GridView. El código para rellenar la galería lo veremos a continuación. En arrUrls metemos todas las imágenes que queráis. Inicializamos el GridView, le pasamos setAdapter un ImageAdapter que veremos ahora y si queréis que al pinchar en cada una de las fotos haga algo seteais el onItemClickListener. position es la posición del array arrUrls.

String [] arrUrls;
   private GridView gridviewGaleria;
   public void setGridViewGaleria(){
    arrUrls = new String[2];
    arrUrls[0] ="Url 1";
    arrUrls[1] ="Url 2";
    
    gridviewGaleria = (GridView) findViewById(R.id.gridviewgaleria);
  gridviewGaleria.setAdapter(new ImageAdapter(this));
  
  gridviewGaleria.setOnItemClickListener(new OnItemClickListener() {
   public void onItemClick(AdapterView<?> arg0, View arg1, int position,long arg3) {
   //Setear aquí lo que querais hacer al pinchar en una foto 
   }
  });
   } 

Ahora veremos la última de las piezas, esta clase la creáis dentro de la clase de vuestra Activity. He marcado en rojo en el código el nombre de la activity para que vosotros pongáis el nombre de la activity donde ponéis esta clase.

El método getView crea un nuevo ImageView, volvemos a llamar al loadImgView y como url le pasamos cada una de la que tenemos en arrUrls y la posición nos la da el método getView y al final devolvemos la imagen.

public class ImageAdapter extends BaseAdapter{

    int mGalleryItemBackground;
    private Context mContext;

    public ImageAdapter(Context c) {
     mContext = c;    
    }

    public int getCount() {
     return arrURLs.length;     
    }

    public Object getItem(int position) {
     return position;
    }

    public long getItemId(int position) {
     return position;
    }

   public View getView(int position, View convertView, ViewGroup parent) {
 ImageView image = new ImageView(mContext);
 image = new ImageView(mContext);
 NombreDeMiActivity.this.loadImgView(image, arrURLs[position]);  image.setLayoutParams(new GridView.LayoutParams(85, 85));
 image.setScaleType(ImageView.ScaleType.CENTER_CROP);
 image.setPadding(8, 8, 8, 8);      
 return image;
   }
    
   }

Y hasta aquí llegamos por hoy, como veis con muy poco esfuerzo podemos descargar imágenes a nuestra aplicación.

Comments are closed.