Android Image loading framework Glide V4 using Daqo

To load images from a local folder or DCIM or gallery, you will need to add the READ_EXTERNAL_STORAGE permission:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your.package.name"

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

    <application>
      ...
    </application>
</manifest>
Copy the code

And if you want to use ExternalPreferredCacheDiskCacheFactory to Glide cache storage to the public on the SD card, you will need to add WRITE_EXTERNAL_STORAGE permission to:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your.package.name"

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

    <application>
      ...
    </application>
</manifest>
Copy the code

Proguard(code obfuscation)

If you use ProGuard, add the following code to your proGuard.cfg file:

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

Basic usage

In most cases, loading an image using Glide is very simple, one line of code is enough:

Glide. With (fragment)// Fragment. Load (myUrl)// network request to load image address. //imageViewCopy the code

Unloading is also simple:

Glide.with(fragment).clear(imageView);

Copy the code

While it’s a good practice to cancel unnecessary loads in a timely manner, it’s not necessary. In fact, When an Activity or Fragment instance passed in [Glide. With ()] is destroyed, Glide automatically unloads and reclaims the resource.

Use in the Application module

In the Application module, you can create a class with the @glidemodule annotation inherited from AppGlideModule. This class generates a streaming API with inline options and custom options in the integration library:

package com.example.myapp;

import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {}

Copy the code

The default generated API name is GlideApp, the same as the package name of the subclass [AppGlideModule]. Replace Glide. With () with glideapp.with () in the Application module to use the API for loading.

GlideApp.with(fragment)
   .load(myUrl)
   .placeholder(placeholder)
   .fitCenter()
   .into(imageView);

Copy the code

Use in ListView and RecyclerView

The code for loading images in ListView or RecyclerView is exactly the same as loading images in a separate View. Glide already handles View reuse and request cancellation automatically:

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    String url = urls.get(position);
    Glide.with(fragment)
        .load(url)
        .into(holder.imageView);
}

Copy the code

It is not necessary to null the URL. If the URL is null, Glide will empty the View content or display placeholder Drawable or fallback Drawable content.

Glide’s only requirement is that for any reusable View or [Target] that has been loaded with Glide in the previous location, a new load operation is performed in the new location or a call to the [clear()] API to stop Glide.

@Override public void onBindViewHolder(ViewHolder holder, int position) { if (isImagePosition(position)) { String url = urls.get(position); Glide.with(fragment) .load(url) .into(holder.imageView); } else { Glide.with(fragment).clear(holder.imageView); holder.imageView.setImageDrawable(specialDrawable); }}Copy the code

Calling [clear()] or into(View) on the View indicates that the previous load operation is canceled, and that Glide does not change the View’s contents after the method call is complete. If you forget to call [clear()] and do not start a new load operation, you may have a Drawable set for a view that used Glide to load the image in its previous position. Glide may change the view back to its original content after it is loaded.

The code here uses RecyclerView as an example, but the same rules apply to ListView.

The View target

In addition to loading bitmaps and Drawable into a View, you can also start loading them asynchronously into your custom Target:

Glide.with(context
  .load(url)
  .into(new SimpleTarget<Drawable>() {
    @Override
    public void onResourceReady(Drawable resource, Transition<Drawable> transition) {
      // Do something with the Drawable here.
    }
  });

Copy the code

A background thread

[submit(int, int)];

FutureTarget<Bitmap> futureTarget =
  Glide.with(context)
    .asBitmap()
    .load(url)
    .submit(width, height);

Bitmap bitmap = futureTarget.get();

// Do something with the Bitmap and then when you're done with it:
Glide.with(context).clear(futureTarget);

Copy the code

If you don’t want the Bitmap and Drawable to be in the background thread itself, you can also start asynchronous loading in the same way as the foreground thread:

Glide.with(context)
  .asBitmap()
  .load(url)
  .into(new Target<Bitmap>() {
    ...
  });
Copy the code

A placeholder

Glide allows users to specify three different types of placeholders for use in three different scenarios:

• placeholder
• error
• fallback

Placeholders (Placeholder)

Placeholders are the Drawable that is displayed while the request is being executed. When the request completes successfully, the placeholder is replaced by the requested resource. If the requested resource is loaded from memory, the placeholder may not be displayed at all. If the request fails and the error Drawable is not set, the placeholder is continuously displayed. Similarly, if the requested URL/Model is null, and neither error Drawable nor fallback is set, the placeholder will continue to be displayed.

Using the generated API:

GlideApp.with(fragment)
  .load(url)
  .placeholder(R.drawable.placeholder)
  .into(view);

Copy the code

Or:

GlideApp.with(fragment)
  .load(url)
  .placeholder(new ColorDrawable(Color.BLACK))
  .into(view);
Copy the code

Is an Error (Error)

Error Drawable is displayed when the request fails permanently. Error Drawable is also displayed when the requested URL /model is null and a fallback Drawable is not set.

With the generated API:

GlideApp.with(fragment)
  .load(url)
  .error(R.drawable.error)
  .into(view);

Copy the code

Or:

GlideApp.with(fragment)
  .load(url)
  .error(new ColorDrawable(Color.RED))
  .into(view);

Copy the code

TransitionOptions is used to determine what happens when your load is complete.

The following transformations can be applied with TransitionOption:

• The View fade in
• Cross fades in with placeholders
• Or nothing at all

If you don’t use transformations, your image will “jump” into its display position, replacing the previous image. To avoid this sudden change, you can fade in the view or have multiple drawables cross fade in, using TransitionOptions.

For example, to apply a cross fade transform:

import static com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions.withCrossFade;

Glide.with(fragment)
    .load(url)
    .transition(withCrossFade())
    .into(view);

Copy the code

Unlike RequestOptions, TransitionOptions are unique to a particular resource type, and the transitions you can use depend on what type of resource you want Glide to load.

As a result, if you request to load a Bitmap, you need to use BitmapTransitionOptions, rather than DrawableTransitionOptions. Similarly, when you request to load a Bitmap, you only need to do simple fade-ins instead of complex cross-fade-ins.

RequestBuilder

The RequestBuilder is the skeleton of a request in Glide that takes the requested URL and your setup items to start a new load process.

Using RequestBuilder you can specify:

• The type of resource you want to load (Bitmap, Drawable, or whatever)
• The address of the resource you want to load (URL /model)
• The View you want to eventually load into
• Anything you want to apply (one or more)RequestOptionobject
• Anything you want to apply (one or more)TransitionOptionobject
• Any thumbnail you want to load ()

You can construct a RequestBuilder object by calling Glide. With () and then use one of the AS methods:

RequestBuilder<Drawable> requestBuilder = Glide.with(fragment).asDrawable();

Copy the code

Or use Glide. With () then load() :

RequestBuilder<Drawable> requestBuilder = Glide.with(fragment).load(url);

Copy the code

Selecting a Resource Type

RequestBuilders are specific to the type of resource they are going to load. By default you will get a Drawable RequestBuilder, but you can use as… A series of methods to change the request type. For example, if you call asBitmap(), you will get a Bitmap RequestBuilder object instead of the default Drawable RequestBuilder.

RequestBuilder<Bitmap> requestBuilder = Glide.with(fragment).asBitmap();

Copy the code

Application RequestOptions

As mentioned earlier, you can apply RequestOptions using the apply() method and TransitionOptions using the Transition () method.

RequestBuilder<Drawable> requestBuilder = Glide.with(fragment).asDrawable();
requestBuilder.apply(requestOptions);
requestBuilder.transition(transitionOptions);

Copy the code

RequestBuilder can also be reused to start multiple requests:

RequestBuilder<Drawable> requestBuilder =
        Glide.with(fragment)
            .asDrawable()
            .apply(requestOptions);

for (int i = 0; i < numViews; i++) {
   ImageView view = viewGroup.getChildAt(i);
   String url = urls.get(i);
   requestBuilder.load(url).into(view);
}

Copy the code

Thumbnail requests

Glide’s Thumbnail API allows you to specify a RequestBuilder to launch in parallel with your main request. Thumbnails are displayed during the main request load. If the main request completes before the thumbnail request, the image in the thumbnail request will not be displayed. The [Thumbnail] API allows you to easily and quickly load a low resolution version of the image while loading a lossless version of the image at the same time, which reduces the amount of time users spend staring at load indicators.

The Thumbnail () API works for both local and remote images, especially if low-resolution thumbnails are stored in Glide’s disk cache, they will load quickly.

The Thumbnail API is relatively simple to use:

Glide.with(fragment)
  .load(url)
  .thumbnail(Glide.with(fragment)
    .load(thumbnailUrl))
  .into(imageView);

Copy the code

As long as your thumbnailUrl points to an image at a lower resolution than your main url, it will work fine. There are a number of loading apis that provide different ways to specify image sizes, and they are particularly useful for thumbnail apis.

If you only want to load a local image, or if you only have a separate remote URL, you can still benefit from the thumbnail API. Please use Glide’s Override or sizeMultiplier API to force Glide to load a low resolution image in the thumbnail request:

int thumbnailSize = ... ; Glide.with(fragment) .load(localUri) .thumbnail(Glide.with(fragment) .load(localUri) .override(thumbnailSize)) .into(view);Copy the code

There is a simplified version of the Thumbnail method that requires only a single sizeMultiplier parameter. This is especially useful if you just want to load the same image for your image, but with a percentage size of View or Target:

Glide. With (fragment).load(localUri). Thumbnail (/*sizeMultiplier=*/ 0.25f). Into (imageView);Copy the code

Start a new request on failure

Starting with Glide 4.3.0, you can now specify a RequestBuilder using the Error API to start a new load if the main request fails. For example, loading a fallbackUrl after a primaryUrl request fails:

Glide.with(fragment)
  .load(primaryUrl)
  .error(Glide.with(fragment)
      .load(fallbackUrl))
  .into(imageView);

Copy the code

If the main request completes successfully, the Error RequestBuilder will not be started. If you specify both a thumbnail and an Error RequestBuilder, the backup RequestBuilder will start if the main request fails, even if the thumbnail request succeeds.

Component options

The Option class is a generic way to add parameters to Glide’s components, including ModelLoaders, ResourceDecoders, ResourceEncoders, Encoders, and so on. Some Glide’s built-in components provide Settings, and custom components can add Settings.

Option is applied to the request through the RequestOptions class:

import static com.bumptech.glide.request.RequestOptions.option;

Glide.with(context)
  .load(url)
  .apply(option(MyCustomModelLoader.TIMEOUT_MS, 1000L))
  .into(imageView);

Copy the code

You can also create a new RequestOptions object:

RequestOptions options = new RequestOptions()
  .set(MyCustomModelLoader.TIMEOUT_MS, 1000L);

Glide.with(context)
  .load(url)
  .apply(options)
  .into(imageView);

Copy the code

Or use the Generated API:

GlideApp.with(context)
  .load(url)
  .set(MyCustomModelLoader.TIMEOUT_MS, 1000L)
  .into(imageView);
Copy the code

transform

In Glide, you can take a resource, make changes to it, and then return to the modified resource. The transform operation is usually used to complete clipping or apply filters to bitmaps, but it can also be used to convert GIFs or even custom resource types.

Built-in types

Glide provides a number of built-in transformations, including:

• CenterCrop
• FitCenter
• CircleCrop

The default transformation

RequestOptions options = new RequestOptions();
options.centerCrop();

Glide.with(fragment)
    .load(url)
    .apply(options)
    .into(imageView);

Copy the code

Most of the built-in transformations have static imports for API smoothness. For example, you can apply a FitCenter transform statically:

import static com.bumptech.glide.request.RequestOptions.fitCenterTransform;

Glide.with(fragment)
    .load(url)
    .apply(fitCenterTransform())
    .into(imageView);

Copy the code

If you are using the Generated API, these transform methods are already inline, so they are even easier to use:

GlideApp.with(fragment)
  .load(url)
  .fitCenter()
  .into(imageView);
Copy the code

multi

By default, each transform() call, or any call to a specific transform method (fitCenter(), centerCrop(), bitmapTransform() etc), replaces the previous transform.

If you want to apply multiple transformations in a single load, use the MultiTransformation class.

Using the generated API:

Glide.with(fragment)
  .load(url)
  .transform(new MultiTransformation(new FitCenter(), new YourCustomTransformation())
  .into(imageView);

Copy the code

Or use a combination of shortcuts and the GENERATED API:

GlideApp.with(fragment)
  .load(url)
  .transforms(new FitCenter(), new YourCustomTransformation())
  .into(imageView);

Copy the code

Note that the order in which you pass the transformation parameters to the constructor of MultiTransformation determines the order in which these transformations are applied.

Custom transformation

Although Glide provides a variety of built-in Transformations implementations, you can also implement your own if you need additional functionality.

If you want to remove the transition of any default, you can use TransitionOptions. DontTransition 17 ()].

The transition animation is applied to the request using the RequestBuilder:

Glide.with(fragment)
    .load(url)
    .transition(withCrossFade(R.anim.fade_in, 300));

Copy the code

Cross fade

Unlike Glide V3, Glide V4 will not apply cross fades or any other transition effects by default. Transitions must be applied manually on each request.

To apply a cross fade transform effect for a particular load, you can use:

import static com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions.withCrossFade;

Glide.with(fragment)
  .load(url)
  .transition(withCrossFade())
  .into(imageView);

Copy the code

Or:

Glide.with(fragment)
  .load(url)
  .transition(
      new DrawableTransitionOptions
        .crossFade())
  .into(imageView);
Copy the code

Generated API

To make it easier and easier to use Glide V4, Glide now also provides a set of apis that can be customized for applications. Applications can access the generated API by including an implementation labeled [AppGlideModule][2]. The Generated API adds a GlideApp class that provides access to the RequestBuilder and RequestOptions subclasses. Subclasses of RequestOptions contain all of the methods in RequestOptions, as well as those defined in GlideExtensions. Subclasses of RequestBuilder provide access to all methods in the generated RequestOptions without requiring you to call Apply manually.

When the Generated API is not used, the request might look like this:

Glide.with(fragment)
    .load(url)
    .apply(centerCropTransform()
        .placeholder(R.drawable.placeholder)
        .error(R.drawable.error)
        .priority(Priority.HIGH))
    .into(imageView);

Copy the code

Using the Generated API, calls to RequestOptions can be inlined:

GlideApp.with(fragment)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error)
    .priority(Priority.HIGH)
    .into(imageView);

Copy the code

You can still use the generated RequestOptions subclass to apply the same options to multiple loads; However, the generated RequestBuilder subclass may be more convenient in most cases.

I do Android development for many years, later will be updated on android advanced UI,NDK development, performance optimization and other articles, more please pay attention to my wechat public number: thank you!

The Android thing. JPG