美文网首页Android技术知识Android开发经验谈Android开发
Glide 如何实现正确加载图片而没有错位

Glide 如何实现正确加载图片而没有错位

作者: 夏洛克的喵 | 来源:发表于2018-08-26 18:35 被阅读63次

    我们在平时的项目使用下面的代码

     GlideApp
                    .with(context)
                    .load(url)
                    .into(imageView);
    

    当我们在常见的列表界面中(如 recycleview 实现的列表),使用上面的代码,在我们快速滑动中,glide 是如何实现正确加载图片,而没有导致图片内容的错位或者是不正确呢?

    要达到这样的效果,简而言之,就是要执行上面的代码后,glide 要把最新的图片加载到正确的对象上,而取消对象之前关联的图片加载请求。

    我们首先从 into() 这个方法进行分析。

      /**
       * Sets the {@link ImageView} the resource will be loaded into, cancels any existing loads into
       * the view, and frees any resources Glide may have previously loaded into the view so they may    *  be reused.
       *
       * @see RequestManager#clear(Target)
       *
       * @param view The view to cancel previous loads for and load the new resource into.
       * @return The
       * {@link com.bumptech.glide.request.target.Target} used to wrap the given {@link ImageView}.
       */
      @NonNull
      public ViewTarget<ImageView, TranscodeType> into(@NonNull ImageView view) {
        Util.assertMainThread();
        Preconditions.checkNotNull(view);
    
        RequestOptions requestOptions = this.requestOptions;
        if (!requestOptions.isTransformationSet()
            && requestOptions.isTransformationAllowed()
            && view.getScaleType() != null) {
          // Clone in this method so that if we use this RequestBuilder to load into a View and then
          // into a different target, we don't retain the transformation applied based on the previous
          // View's scale type.
          switch (view.getScaleType()) {
            case CENTER_CROP:
              requestOptions = requestOptions.clone().optionalCenterCrop();
              break;
            case CENTER_INSIDE:
              requestOptions = requestOptions.clone().optionalCenterInside();
              break;
            case FIT_CENTER:
            case FIT_START:
            case FIT_END:
              requestOptions = requestOptions.clone().optionalFitCenter();
              break;
            case FIT_XY:
              requestOptions = requestOptions.clone().optionalCenterInside();
              break;
            case CENTER:
            case MATRIX:
            default:
              // Do nothing.
          }
        }
    
        return into(
            glideContext.buildImageViewTarget(view, transcodeClass),
            /*targetListener=*/ null,
            requestOptions);
      }
    

    其实从方法的注释上就已经证明了我上面的说法。注释大意如下:

    给 ImagView 设置将要被加载的资源,取消任何已存在的与该 View 相关的加载,释放 Glide 之前可能给该 View 加载的资源,这样他们可以被复用。

    可以看到 45 行的代码是关键,具体分析下代码。

    private <Y extends Target<TranscodeType>> Y into(
          @NonNull Y target,
          @Nullable RequestListener<TranscodeType> targetListener,
          @NonNull RequestOptions options) {
        Util.assertMainThread();
        Preconditions.checkNotNull(target);
        if (!isModelSet) {
          throw new IllegalArgumentException("You must call #load() before calling #into()");
        }
    
        options = options.autoClone();
        Request request = buildRequest(target, targetListener, options);
    
        Request previous = target.getRequest();
        if (request.isEquivalentTo(previous)
            && !isSkipMemoryCacheWithCompletePreviousRequest(options, previous)) {
          request.recycle();
          // If the request is completed, beginning again will ensure the result is re-delivered,
          // triggering RequestListeners and Targets. If the request is failed, beginning again will
          // restart the request, giving it another chance to complete. If the request is already
          // running, we can let it continue running without interruption.
          if (!Preconditions.checkNotNull(previous).isRunning()) {
            // Use the previous request rather than the new one to allow for optimizations like skipping
            // setting placeholders, tracking and un-tracking Targets, and obtaining View dimensions
            // that are done in the individual Request.
            previous.begin();
          }
          return target;
        }
    
        requestManager.clear(target);
        target.setRequest(request);
        requestManager.track(target, request);
    
        return target;
      }
    

    由于 Glide 的代码还是相当复杂的,这里我不会一行一行的分析具体实现,大家可以对感兴趣的地方自己去探索下,这里我们主要看下上面提到主要流程的实现。

    可以看到 15 行代码,构建了一个 Request 并持有了 target 。这样便可以将结果通知给 target。

     Request request = buildRequest(target, targetListener, options);
    

    上面的入参 target 是由

    glideContext.buildImageViewTarget(view, transcodeClass)
    

    构建,具体的实现这里不分析,我们只需知道 Target 是 Glide 对我们要加载目标的一个封装和抽象。

    下面贴一下接口定义和实现帮助大家稍微理解下。实现其实有很多种,这里贴的是我们常用用法最容易使用到的内部实现。

    /**
     * An interface that Glide can load a resource into and notify of relevant lifecycle events during a
     * load.
     *
     * <p> The lifecycle events in this class are as follows: <ul> <li>onLoadStarted</li>
     * <li>onResourceReady</li> <li>onLoadCleared</li> <li>onLoadFailed</li> </ul>
     *
     * The typical lifecycle is onLoadStarted -> onResourceReady or onLoadFailed -> onLoadCleared.
     * However, there are no guarantees. onLoadStarted may not be called if the resource is in memory or
     * if the load will fail because of a null model object. onLoadCleared similarly may never be called
     * if the target is never cleared. See the docs for the individual methods for details. </p>
     *
     * @param <R> The type of resource the target can display.
     */
    public interface Target<R> extends LifecycleListener {
      /**
       * Indicates that we want the resource in its original unmodified width and/or height.
       */
      int SIZE_ORIGINAL = Integer.MIN_VALUE;
    
      /**
       * A lifecycle callback that is called when a load is started.
       *
       * <p> Note - This may not be called for every load, it is possible for example for loads to fail
       * before the load starts (when the model object is null).
       *
       * <p> Note - This method may be called multiple times before any other lifecycle method is
       * called. Loads can be paused and restarted due to lifecycle or connectivity events and each
       * restart may cause a call here.
       *
       * <p>You must ensure that any current Drawable received in {@link #onResourceReady(Object,
       * Transition)} is no longer displayed before redrawing the container (usually a View) or
       * changing its visibility.
       *
       * @param placeholder The placeholder drawable to optionally show, or null.
       */
      void onLoadStarted(@Nullable Drawable placeholder);
    
      /**
       * A lifecycle callback that is called when a load fails.
       *
       * <p> Note - This may be called before {@link #onLoadStarted(android.graphics.drawable.Drawable)
       * } if the model object is null.
       *
       * <p>You must ensure that any current Drawable received in {@link #onResourceReady(Object,
       * Transition)} is no longer displayed before redrawing the container (usually a View) or
       * changing its visibility.
       *
       * @param errorDrawable The error drawable to optionally show, or null.
       */
      void onLoadFailed(@Nullable Drawable errorDrawable);
    
      /**
       * The method that will be called when the resource load has finished.
       *
       * @param resource the loaded resource.
       */
      void onResourceReady(@NonNull R resource, @Nullable Transition<? super R> transition);
    
      /**
       * A lifecycle callback that is called when a load is cancelled and its resources are freed.
       *
       * <p>You must ensure that any current Drawable received in {@link #onResourceReady(Object,
       * Transition)} is no longer displayed before redrawing the container (usually a View) or
       * changing its visibility.
       *
       * @param placeholder The placeholder drawable to optionally show, or null.
       */
      void onLoadCleared(@Nullable Drawable placeholder);
    
      /**
       * A method to retrieve the size of this target.
       *
       * @param cb The callback that must be called when the size of the target has been determined
       */
      void getSize(@NonNull SizeReadyCallback cb);
    
      /**
       * Removes the given callback from the pending set if it's still retained.
       *
       * @param cb The callback to remove.
       */
      void removeCallback(@NonNull SizeReadyCallback cb);
    
      /**
       * Sets the current request for this target to retain, should not be called outside of Glide.
       */
      void setRequest(@Nullable Request request);
    
      /**
       * Retrieves the current request for this target, should not be called outside of Glide.
       */
      @Nullable
      Request getRequest();
    }
    
    
    /**
     * A base {@link com.bumptech.glide.request.target.Target} for displaying resources in {@link
     * android.widget.ImageView}s.
     *
     * @param <Z> The type of resource that this target will display in the wrapped {@link
     *            android.widget.ImageView}.
     */
    // Public API.
    @SuppressWarnings("WeakerAccess")
    public abstract class ImageViewTarget<Z> extends ViewTarget<ImageView, Z>
        implements Transition.ViewAdapter {
    
      @Nullable
      private Animatable animatable;
    
      public ImageViewTarget(ImageView view) {
        super(view);
      }
    
      /**
       * @deprecated Use {@link #waitForLayout()} instead.
       */
      @SuppressWarnings({"deprecation"})
      @Deprecated
      public ImageViewTarget(ImageView view, boolean waitForLayout) {
        super(view, waitForLayout);
      }
    
      /**
       * Returns the current {@link android.graphics.drawable.Drawable} being displayed in the view
       * using {@link android.widget.ImageView#getDrawable()}.
       */
      @Override
      @Nullable
      public Drawable getCurrentDrawable() {
        return view.getDrawable();
      }
    
      /**
       * Sets the given {@link android.graphics.drawable.Drawable} on the view using {@link
       * android.widget.ImageView#setImageDrawable(android.graphics.drawable.Drawable)}.
       *
       * @param drawable {@inheritDoc}
       */
      @Override
      public void setDrawable(Drawable drawable) {
        view.setImageDrawable(drawable);
      }
    
      /**
       * Sets the given {@link android.graphics.drawable.Drawable} on the view using {@link
       * android.widget.ImageView#setImageDrawable(android.graphics.drawable.Drawable)}.
       *
       * @param placeholder {@inheritDoc}
       */
      @Override
      public void onLoadStarted(@Nullable Drawable placeholder) {
        super.onLoadStarted(placeholder);
        setResourceInternal(null);
        setDrawable(placeholder);
      }
    
      /**
       * Sets the given {@link android.graphics.drawable.Drawable} on the view using {@link
       * android.widget.ImageView#setImageDrawable(android.graphics.drawable.Drawable)}.
       *
       * @param errorDrawable {@inheritDoc}
       */
      @Override
      public void onLoadFailed(@Nullable Drawable errorDrawable) {
        super.onLoadFailed(errorDrawable);
        setResourceInternal(null);
        setDrawable(errorDrawable);
      }
    
      /**
       * Sets the given {@link android.graphics.drawable.Drawable} on the view using {@link
       * android.widget.ImageView#setImageDrawable(android.graphics.drawable.Drawable)}.
       *
       * @param placeholder {@inheritDoc}
       */
      @Override
      public void onLoadCleared(@Nullable Drawable placeholder) {
        super.onLoadCleared(placeholder);
        if (animatable != null) {
          animatable.stop();
        }
        setResourceInternal(null);
        setDrawable(placeholder);
      }
    
      @Override
      public void onResourceReady(@NonNull Z resource, @Nullable Transition<? super Z> transition) {
        if (transition == null || !transition.transition(resource, this)) {
          setResourceInternal(resource);
        } else {
          maybeUpdateAnimatable(resource);
        }
      }
    
      @Override
      public void onStart() {
        if (animatable != null) {
          animatable.start();
        }
      }
    
      @Override
      public void onStop() {
        if (animatable != null) {
          animatable.stop();
        }
      }
    
      private void setResourceInternal(@Nullable Z resource) {
        // Order matters here. Set the resource first to make sure that the Drawable has a valid and
        // non-null Callback before starting it.
        setResource(resource);
        maybeUpdateAnimatable(resource);
      }
    
      private void maybeUpdateAnimatable(@Nullable Z resource) {
        if (resource instanceof Animatable) {
          animatable = (Animatable) resource;
          animatable.start();
        } else {
          animatable = null;
        }
      }
    
      protected abstract void setResource(@Nullable Z resource);
    }
    

    into(
          @NonNull Y target,
          @Nullable RequestListener<TranscodeType> targetListener,
          @NonNull RequestOptions options) 
    

    方法中 第 15 至 19 行中,判断 Taget 中的之前的 Request 和最新构建的 Request 是否相同,如果相同回收最新的 Request ,让旧的 Request 继续运行。如果不同,就取消之前的 Request 和 target 的关联。

    具体逻辑代码为 31 行

     requestManager.clear(target);
    

    最终会触发下面的代码

      private void untrackOrDelegate(@NonNull Target<?> target) {
        boolean isOwnedByUs = untrack(target);
        // We'll end up here if the Target was cleared after the RequestManager that started the request
        // is destroyed. That can happen for at least two reasons:
        // 1. We call clear() on a background thread using something other than Application Context
        // RequestManager.
        // 2. The caller retains a reference to the RequestManager after the corresponding Activity or
        // Fragment is destroyed, starts a load with it, and then clears that load with a different
        // RequestManager. Callers seem especially likely to do this in retained Fragments (#2262).
        //
        // #1 is always an error. At best the caller is leaking memory briefly in something like an
        // AsyncTask. At worst the caller is leaking an Activity or Fragment for a sustained period of
        // time if they do something like reference the Activity RequestManager in a long lived
        // background thread or task.
        //
        // #2 is always an error. Callers shouldn't be starting new loads using RequestManagers after
        // the corresponding Activity or Fragment is destroyed because retaining any reference to the
        // RequestManager leaks memory. It's possible that there's some brief period of time during or
        // immediately after onDestroy where this is reasonable, but I can't think of why.
        if (!isOwnedByUs && !glide.removeFromManagers(target) && target.getRequest() != null) {
          Request request = target.getRequest();
          target.setRequest(null);
          request.clear();
        }
      }
    

    可以看到, target 对应的 request 被置 null, 而旧的 request 被 “clear”。旧的 Request 被 clear 后,又是如何让资源没有去加载到关联的 Target 上的? 我们看其中 SingleRequest 的实现

      /**
       * Cancels the current load if it is in progress, clears any resources held onto by the request
       * and replaces the loaded resource if the load completed with the placeholder.
       *
       * <p> Cleared requests can be restarted with a subsequent call to {@link #begin()} </p>
       *
       * @see #cancel()
       */
      @Override
      public void clear() {
        Util.assertMainThread();
        assertNotCallingCallbacks();
        stateVerifier.throwIfRecycled();
        if (status == Status.CLEARED) {
          return;
        }
        cancel();
        // Resource must be released before canNotifyStatusChanged is called.
        if (resource != null) {
          releaseResource(resource);
        }
        if (canNotifyCleared()) {
          target.onLoadCleared(getPlaceholderDrawable());
        }
        // Must be after cancel().
        status = Status.CLEARED;
      }
    

    可以看到 clear() 方法中先是 执行了 cancel(),该方法会取消加载资源请求与该 Request 的回调关联。
    起关键作用代码为

     loadStatus.cancel();
    
      /**
       * Cancels the current load but does not release any resources held by the request and continues
       * to display the loaded resource if the load completed before the call to cancel.
       *
       * <p> Cancelled requests can be restarted with a subsequent call to {@link #begin()}. </p>
       *
       * @see #clear()
       */
      void cancel() {
        assertNotCallingCallbacks();
        stateVerifier.throwIfRecycled();
        target.removeCallback(this);
        status = Status.CANCELLED;
        if (loadStatus != null) {
          loadStatus.cancel();
          loadStatus = null;
        }
      }
    

    LoadStatus 实际上只是持有了回调和 EngineJob。

    /**
     * A callback that listens for when a resource load completes successfully or fails due to an
     * exception.
     */
    public interface ResourceCallback {
    
      /**
       * Called when a resource is successfully loaded.
       *
       * @param resource The loaded resource.
       */
      void onResourceReady(Resource<?> resource, DataSource dataSource);
    
      /**
       * Called when a resource fails to load successfully.
       *
       * @param e a non-null {@link GlideException}.
       */
      void onLoadFailed(GlideException e);
    }
    
      /**
       * Allows a request to indicate it no longer is interested in a given load.
       */
      public static class LoadStatus {
        private final EngineJob<?> engineJob;
        private final ResourceCallback cb;
    
        LoadStatus(ResourceCallback cb, EngineJob<?> engineJob) {
          this.cb = cb;
          this.engineJob = engineJob;
        }
    
        public void cancel() {
          engineJob.removeCallback(cb);
        }
      }
    

    EngineJob 是负责加载资源,并加载成功后回调回去,这里 SingleRequest 实现了回调,所以它便可得知资源加载完成并获取到。这里不再分析 EngineJob 实现,以免偏离主流程太远。

    所以 cancel() 调用后,即使旧的加载请求完成也不会回调到 Tareget 上。

        target.setRequest(request);
        requestManager.track(target, request);
    

    方法中,Target 持有了最新的 request , requestManager.track() 方法测触发了 request 的加载请求,实际是由内部 Engine 和 EngineJob 负责。当顺利加载成功后便回调到 Target 对象上,触发 target.onResourceReady(result, animation) 方法,图片便被正确显示出来了。

    实际上,还是有很多细节流程。这里只是大概介绍了主流程,希望对大家有所帮助。

    以上代码基于 glide v4.7.1 版本

    相关文章

      网友评论

        本文标题:Glide 如何实现正确加载图片而没有错位

        本文链接:https://www.haomeiwen.com/subject/dpnoiftx.html