Android
Glijden

Invoering

Opmerkingen

Voeg Glide toe aan uw project

Uit de officiële documentatie :

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

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

Afhankelijk van uw ProGuard (DexGuard) configuratie en gebruik, moet u mogelijk ook de volgende regels opnemen in uw proguard.cfg (zie Glide's wiki voor meer info):

-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

Een afbeelding laden

Figuurweergave

Een afbeelding van een opgegeven URL, Uri, resource-ID of een ander model in een ImageView :

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

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

Vervang voor Uris yourUrl door uw Uri ( content://media/external/images/1 ). Vervang voor Drawables yourUrl door uw resource-ID ( R.drawable.image ).

RecyclerView en ListView

In ListView of RecyclerView kunt u exact dezelfde regels gebruiken:

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

Als u geen lading in onBindViewHolder wilt starten, zorg er dan voor dat u clear() eventuele ImageView Glide beheert voordat u de ImageView wijzigt:

@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-cirkel-transformatie (afbeelding in een cirkelvormige afbeeldingweergave laden)

Maak een cirkelafbeelding met glijdende beweging.

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

Gebruik:

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

Standaard transformaties

Glide omvat twee standaardtransformaties, passend midden en middenuitsnede.

Fit centrum:

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

Fit center voert dezelfde transformatie uit als ScaleType.FIT_CENTER van Android.

Midden bijsnijden:

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

Center crop voert dezelfde transformatie uit als ScaleType.CENTER_CROP van Android.

Zie Glide's wiki voor meer informatie.

Glijd afgeronde hoeken afbeelding met aangepast Glide doel

Maak eerst een utility-klasse of gebruik deze methode in de benodigde 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);
        }
    };
}

Afbeelding wordt geladen:

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

Omdat je asBitmap () gebruikt, worden de animaties wel verwijderd. U kunt uw eigen animatie op deze plaats gebruiken met de methode animate ().

Voorbeeld met vergelijkbare infaden in standaard Glide-animatie.

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

Let op: deze animatie is een privébron van de ondersteuningsbibliotheek - het wordt afgeraden deze te gebruiken omdat deze kan worden gewijzigd of zelfs verwijderd.

Merk op dat je ook een ondersteuningsbibliotheek nodig hebt om RoundedBitmapDrawableFactory te gebruiken

Afbeeldingen vooraf laden

Afbeeldingen op afstand vooraf laden en ervoor zorgen dat de afbeelding slechts eenmaal wordt gedownload:

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

Vervolgens:

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

Lokale afbeeldingen vooraf laden en zorgen dat een getransformeerde kopie zich in de schijfcache bevindt (en misschien in de geheugencache):

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

Vervolgens:

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

Tijdelijke aanduiding en foutafhandeling

Als u tijdens het laden een Drawable wilt toevoegen, kunt u een tijdelijke aanduiding toevoegen:

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

Als u wilt dat een Drawable wordt weergegeven als de belasting om welke reden dan ook mislukt:

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

Als u een Drawable wilt weergeven als u een nulmodel opgeeft (URL, Uri, bestandspad, enz.):

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

Laad afbeelding in een circulaire ImageView zonder aangepaste transformaties

Maak een aangepaste BitmapImageViewTarget om de afbeelding te laden in:

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

Gebruik:

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

Afhandeling laden glide-afbeelding mislukt

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 op SET_YOUR_DEFAULT_IMAGE plaats kunt u elke standaard Drawable . Deze afbeelding wordt weergegeven als het laden van afbeeldingen is mislukt.