¿Cómo usar la biblioteca Universal Image Loader en Android?

UIL (Universal Image Loader) es una biblioteca similar a la de Picasso y Glide que realiza la carga de imágenes desde cualquier URL web en ImageView de Android. Esta biblioteca de carga de imágenes se ha creado para proporcionar una solución potente, flexible y personalizable para cargar imágenes en Android desde el servidor. Esta biblioteca de carga de imágenes está siendo creada por un desarrollador independiente y está presente en la lista superior de GitHub. Características de la biblioteca UIL (Universal Image Loader):

  • Esta biblioteca proporciona carga de imágenes multiproceso.
  • El almacenamiento en caché de imágenes se puede realizar en la memoria y en el dispositivo del usuario.
  • Proceso de carga de escucha (incluido el progreso de descarga).
  • Muchas funciones personalizables están disponibles para cada llamada de imagen de visualización.

Nota: Vamos a implementar este proyecto utilizando el  lenguaje Java  . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia de la biblioteca de imágenes UIL en el archivo build.gradle.

Navegue a los scripts de gradle y luego al nivel build.gradle(Module). Agregue la siguiente línea en el archivo build.gradle en la sección de dependencias.

implementación ‘com.nostra13.universalimageloader:universal-image-loader:1.9.5’

Paso 3: agregue el repositorio de Google en el archivo build.gradle del proyecto de la aplicación si no está allí de manera predeterminada

script de compilación {

repositorios {

   Google()

   mavenCentral()

}

Todos los componentes de Jetpack están disponibles en el repositorio de Google Maven, inclúyelos en el archivo build.gradle

todos los proyectos {

repositorios {

   Google()

  mavenCentral()

}

}

Paso 4: agregue permiso de Internet en el archivo AndroidManifest.xml

Navegue a la aplicación > Manifiesto para abrir el archivo Manifiesto. 

XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gtappdevelopers.camviewlibrary">
 
    <!--Permission for internet-->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
 
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.CamViewLibrary">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Paso 5: Crea un nuevo ImageView en tu activity_main.xml.

Navegue a la aplicación > res > diseño para abrir el archivo activity_main.xml . A continuación se muestra el código para el archivo  activity_main.xml .

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">
 
    <!--Image view for loading our image-->
    <ImageView
        android:id="@+id/idImageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:contentDescription="@string/app_name" />
 
</RelativeLayout>

Paso 6: Inicialice su ImageView y use UIL (Universal Image Loader) en el archivo MainActivity.java

Vaya a la aplicación > java > el nombre del paquete de su aplicación > archivo MainActivity.java. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle. 

Java

import android.os.Bundle;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
 
public class MainActivity extends AppCompatActivity {
 
    private ImageView img;
    DisplayImageOptions options;
    ImageLoader imageLoader;
 
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // initialize image loader before using
        imageLoader = ImageLoader.getInstance();
        imageLoader.init(
            ImageLoaderConfiguration.createDefault(
                getApplicationContext()));
 
        // initialize imageview from activity_main.xml
        img = findViewById(R.id.idImageView);
 
        // URL for our image that we have to load..
        String imageUri
            = "https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png";
 
        // with below method we are setting display option
        // for our image..
        options = new DisplayImageOptions
                      .Builder()
 
                      // stub image will display when your
                      // image is loading
                      .showStubImage(
                          R.drawable.ic_launcher_foreground)
 
                      // below image will be displayed when
                      // the image url is empty
                      .showImageForEmptyUri(
                          R.drawable.ic_launcher_background)
 
                      // cachememory method will caches the
                      // image in users external storage
                      .cacheInMemory()
 
                      // cache on disc will caches the image
                      // in users internal storage
                      .cacheOnDisc()
 
                      // build will build the view for
                      // displaying image..
                      .build();
        // below method will display image inside our image
        // view..
        imageLoader.displayImage(imageUri, img, options,
                                 null);
    }
}

Nota: Todos los elementos de diseño están presentes en la carpeta de elementos de diseño . Puede agregar el dibujable en la carpeta dibujable. Para acceder a la carpeta dibujable. Navega a app > res > drawables > esta carpeta tiene todos tus drawables. 

Producción:

UIL Output

Publicación traducida automáticamente

Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *