Android
Glisse

Introduction

Remarques

Ajouter Glide à votre projet

De la documentation officielle :

Avec Gradle:

repositories {
  mavenCentral() // jcenter() works as well because it pulls from Maven Central
}

dependencies {
  compile 'com.github.bumptech.glide:glide:4.0.0'
  compile 'com.android.support:support-v4:25.3.1'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.0.0'
}

Avec Maven:

<dependency>
  <groupId>com.github.bumptech.glide</groupId>
  <artifactId>glide</artifactId>
  <version>4.0.0</version>
</dependency>
<dependency>
  <groupId>com.google.android</groupId>
  <artifactId>support-v4</artifactId>
  <version>r7</version>
</dependency>
<dependency>
  <groupId>com.github.bumptech.glide</groupId>
  <artifactId>compiler</artifactId>
  <version>4.0.0</version>
  <optional>true</optional>
</dependency>

Selon votre configuration et utilisation de ProGuard (DexGuard), vous devrez peut-être également inclure les lignes suivantes dans votre proguard.cfg (voir le wiki de Glide pour plus d'informations):

-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.AppGlideModule
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$**     {
  **[] $VALUES;
  public *;
}

# for DexGuard only
-keepresourcexmlelements manifest/application/meta-data@value=GlideModule

Chargement d'une image

ImageView

Pour charger une image à partir d'une URL, d'un Uri, d'un ID de ressource ou de tout autre modèle spécifié dans une ImageView :

ImageView imageView = (ImageView) findViewById(R.id.imageView);
String yourUrl = "http://www.yoururl.com/image.png";

Glide.with(context)
    .load(yourUrl)
    .into(imageView);

Pour Uris, remplacez votre yourUrl par votre Uri ( content://media/external/images/1 ). Pour Drawables, remplacez votre yourUrl par votre identifiant de ressource ( R.drawable.image ).

RecyclerView et ListView

Dans ListView ou RecyclerView, vous pouvez utiliser exactement les mêmes lignes:

@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
    MyViewHolder myViewHolder = (MyViewHolder) viewHolder;
    String currentUrl = myUrls.get(position); 

    Glide.with(context)
        .load(currentUrl)
        .into(myViewHolder.imageView);
}

Si vous ne voulez pas démarrer un chargement dans onBindViewHolder , assurez-vous que vous clear() tout ImageView Glide en cours de gestion avant de modifier ImageView :

@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
    MyViewHolder myViewHolder = (MyViewHolder) viewHolder;
    String currentUrl = myUrls.get(position); 

    if (TextUtils.isEmpty(currentUrl)) {
        Glide.clear(viewHolder.imageView);
        // Now that the view has been cleared, you can safely set your own resource
        viewHolder.imageView.setImageResource(R.drawable.missing_image);
    } else {
        Glide.with(context)
            .load(currentUrl)
            .into(myViewHolder.imageView);
    }
}

Transformation du cercle de glissement (Charger l'image dans une image circulaire)

Créez une image circulaire avec la glisse.

public class CircleTransform extends BitmapTransformation {

    public CircleTransform(Context context) {
        super(context);
    }

    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
        return result;
    }

    @Override public String getId() {
        return getClass().getName();
    }
}

Usage:

Glide.with(context)
    .load(yourimageurl)
    .transform(new CircleTransform(context))
    .into(userImageView);

Transformations par défaut

Glide comprend deux transformations par défaut, le centre d'ajustement et le recadrage central.

Centre d'ajustement:

Glide.with(context)
    .load(yourUrl)
    .fitCenter()
    .into(yourView);

Le centre d'ajustement effectue la même transformation que ScaleType.FIT_CENTER d'Android.

Centre de récolte:

Glide.with(context)
    .load(yourUrl)
    .centerCrop()
    .into(yourView);

Centrage central effectue la même transformation que ScaleType.CENTER_CROP pour Android.

Pour plus d'informations, voir le wiki de Glide .

Image des coins arrondis avec la cible Glide personnalisée

Commencez par créer une classe utilitaire ou utilisez cette méthode en classe

public class UIUtils {
public static BitmapImageViewTarget getRoundedImageTarget(@NonNull final Context context, @NonNull final ImageView imageView,
                                                        final float radius) {
    return new BitmapImageViewTarget(imageView) {
        @Override
        protected void setResource(final Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(context.getResources(), resource);
            circularBitmapDrawable.setCornerRadius(radius);
            imageView.setImageDrawable(circularBitmapDrawable);
        }
    };
}

Chargement de l'image:

Glide.with(context)
     .load(imageUrl)
     .asBitmap()
     .into(UIUtils.getRoundedImageTarget(context, imageView, radius));

Comme vous utilisez asBitmap (), les animations seront supprimées. Vous pouvez utiliser votre propre animation à cet endroit en utilisant la méthode animate ().

Exemple avec un fondu similaire à celui de l'animation par défaut

Glide.with(context)
     .load(imageUrl)
     .asBitmap()
     .animate(R.anim.abc_fade_in)
     .into(UIUtils.getRoundedImageTarget(context, imageView, radius));

Veuillez noter que cette animation est la ressource privée de la bibliothèque de support - il est déconseillé de l'utiliser car elle peut changer ou même être supprimée.

Notez que vous devez également avoir une bibliothèque de support pour utiliser RoundedBitmapDrawableFactory

Préchargement d'images

Pour précharger des images distantes et vous assurer que l'image n'est téléchargée qu'une seule fois:

Glide.with(context)
    .load(yourUrl)
    .diskCacheStrategy(DiskCacheStrategy.SOURCE)
    .preload();

Alors:

Glide.with(context)
    .load(yourUrl)
    .diskCacheStrategy(DiskCacheStrategy.SOURCE) // ALL works here too
    .into(imageView);

Pour précharger des images locales et vous assurer qu'une copie transformée se trouve dans le cache du disque (et peut-être dans le cache de la mémoire):

Glide.with(context)
    .load(yourFilePathOrUri)
    .fitCenter() // Or whatever transformation you want
    .preload(200, 200); // Or whatever width and height you want

Alors:

Glide.with(context)
    .load(yourFilePathOrUri)
    .fitCenter() // You must use the same transformation as above
    .override(200, 200) // You must use the same width and height as above
    .into(imageView);

Placeholder et gestion des erreurs

Si vous souhaitez ajouter un objet pouvant être dessiné pendant le chargement, vous pouvez ajouter un espace réservé:

Glide.with(context)
    .load(yourUrl)
    .placeholder(R.drawable.placeholder)
    .into(imageView);

Si vous souhaitez afficher un Drawable si le chargement échoue pour une raison quelconque:

Glide.with(context)
    .load(yourUrl)
    .error(R.drawable.error)
    .into(imageView);

Si vous voulez qu'un Drawable soit affiché si vous fournissez un modèle nul (URL, Uri, chemin de fichier, etc.):

Glide.with(context)
    .load(maybeNullUrl)
    .fallback(R.drawable.fallback)
    .into(imageView);

Charger l'image dans un ImageView circulaire sans transformations personnalisées

Créez un objet BitmapImageViewTarget personnalisé pour charger l'image dans:

public class CircularBitmapImageViewTarget extends BitmapImageViewTarget
{
    private Context context;
    private ImageView imageView;

    public CircularBitmapImageViewTarget(Context context, ImageView imageView)
    {
        super(imageView);
        this.context = context;
        this.imageView = imageView;
    }
    
    @Override
    protected void setResource(Bitmap resource)
    {
        RoundedBitmapDrawable bitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), resource);
        bitmapDrawable.setCircular(true);
        imageView.setImageDrawable(bitmapDrawable);
    }
}

Usage:

Glide
    .with(context)
    .load(yourimageidentifier)
    .asBitmap()
    .into(new CircularBitmapImageViewTarget(context, imageView));

Échec du chargement de l'image Glide de manipulation

Glide
        .with(context)
        .load(currentUrl)
        .into(new BitmapImageViewTarget(profilePicture) {
    @Override
    protected void setResource(Bitmap resource) {
        RoundedBitmapDrawable circularBitmapDrawable =
                RoundedBitmapDrawableFactory.create(context.getResources(), resource);
        circularBitmapDrawable.setCornerRadius(radius);
        imageView.setImageDrawable(circularBitmapDrawable);
    }

    @Override
    public void onLoadFailed(@NonNull Exception e, Drawable errorDrawable) {
        super.onLoadFailed(e, SET_YOUR_DEFAULT_IMAGE);
        Log.e(TAG, e.getMessage(), e);
    }
});

Ici, à SET_YOUR_DEFAULT_IMAGE place, vous pouvez définir n'importe quel Drawable par défaut. Cette image sera affichée si le chargement de l'image a échoué.