Android
Gleiten

Einführung

Bemerkungen

Fügen Sie Ihrem Projekt Glide hinzu

Aus der offiziellen Dokumentation :

Mit 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'
}

Mit 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>

Abhängig von Ihrer ProGuard (DexGuard) -Konfiguration und -nutzung müssen Sie möglicherweise auch die folgenden Zeilen in Ihre proguard.cfg einfügen (weitere Informationen finden Sie im Glide-Wiki ):

-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

Ein Bild laden

Bildansicht

So laden Sie ein Bild von einer angegebenen URL, einem ImageView , einer Ressourcen-ID oder einem anderen Modell in eine ImageView :

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

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

Ersetzen yourUrl für Uris yourUrl durch Ihren Uri ( content://media/external/images/1 ). Ersetzen yourUrl für Drawables yourUrl durch Ihre Ressourcen-ID ( R.drawable.image ).

RecyclerView und ListView

In ListView oder RecyclerView können Sie genau die gleichen Zeilen verwenden:

@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);
}

Wenn Sie in onBindViewHolder kein ImageView starten onBindViewHolder , vergewissern Sie sich, dass Sie ImageView Glide ImageView clear() ImageView , bevor Sie die 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);
    }
}

Glide Circle Transformation

Erstellen Sie ein Kreisbild mit Gleiten.

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();
    }
}

Verwendungszweck:

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

Standardumwandlungen

Glide enthält zwei Standardumwandlungen, die Mitte und die Mitte des Zuschnitts.

Sitzmitte:

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

Das Fit-Center führt dieselbe Transformation durch wie ScaleType.FIT_CENTER von Android.

Center Ernte:

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

Die Mitte des Zuschnitts führt dieselbe Transformation durch wie ScaleType.CENTER_CROP von Android.

Weitere Informationen finden Sie im Glide-Wiki .

Bild mit abgerundeten Ecken mit benutzerdefiniertem Ziel "Gleiten"

Machen Sie zuerst eine Utility-Klasse oder verwenden Sie diese Methode in der erforderlichen Klasse

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);
        }
    };
}

Bild wird geladen:

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

Da Sie asBitmap () verwenden, werden die Animationen jedoch entfernt. Sie können Ihre eigene Animation an dieser Stelle mithilfe der animate () -Methode verwenden.

Beispiel mit ähnlicher Einblendung in die Standard-Glide-Animation.

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

Bitte beachten Sie, dass es sich bei dieser Animation um eine private Ressource der Unterstützungsbibliothek handelt, deren Verwendung nicht empfohlen wird, da sie sich ändern oder sogar entfernen kann.

Beachten Sie, dass Sie auch eine Unterstützungsbibliothek benötigen, um RoundedBitmapDrawableFactory verwenden zu können

Bilder vorladen

So laden Sie Remote-Images vorab und stellen sicher, dass das Image nur einmal heruntergeladen wird:

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

Dann:

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

So laden Sie lokale Images vorab und stellen Sie sicher, dass sich eine transformierte Kopie im Festplattencache (und möglicherweise im Speichercache) befindet:

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

Dann:

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);

Platzhalter und Fehlerbehandlung

Wenn Sie während des Ladens einen Drawable hinzufügen möchten, können Sie einen Platzhalter hinzufügen:

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

Wenn Sie möchten, dass ein Drawable angezeigt wird, wenn das Laden aus irgendeinem Grund fehlschlägt:

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

Wenn Sie möchten, dass ein Drawable angezeigt wird, wenn Sie ein Nullmodell (URL, Uri, Dateipfad usw.) angeben:

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

Bild in einer kreisförmigen ImageView ohne benutzerdefinierte Transformationen laden

Erstellen Sie ein benutzerdefiniertes BitmapImageViewTarget, in das das Bild geladen werden soll:

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);
    }
}

Verwendungszweck:

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

Fehler beim Laden des Glide-Images

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);
    }
});

Hier am Ort SET_YOUR_DEFAULT_IMAGE können Sie einen beliebigen Drawable . Dieses Bild wird angezeigt, wenn das Laden von Bildern fehlgeschlagen ist.