Android实战-RecyclerView+Glide刷新列表的若干bug

前言

最近在项目中使用RecyclerView+Glide发现了一些bug，在此记录一下。

一. RecyclerView中使用Glide出现加载图片闪烁

1.1 提出问题

如上图所示，在使用RecyclerView+Glide的时候会出现，图片多次叠加的问题。首先看下代码：

// 用了BaseQuickAdapter
@Override
protected void convert(BaseViewHolder holder, Bean bean) {
    
    
	// loading加载
	final View loading = holder.getView(R.id.loading);
    loading.setVisibility(View.VISIBLE);
    // 省略业务代码...
	Glide.with(getContext())
          .load(url) // 加载数据的URL
          .override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL) // 图片使用原始尺寸
          .into(new SimpleTarget<Drawable>() {
    
     // SimpleTarget已经过时
               		@Override
                public void onResourceReady(@NonNull Drawable resource, 
                							@Nullable Transition<? super Drawable> transition)
          		{
    
    
					 // 图片加载完成就隐藏loading                	
                     loading.setVisibility(View.GONE); 
                     imageView.setImageDrawable(resource);
                 }
     		});
}

由于业务上要求需要显示loading，目前所做的是将loading的View置于ImageView下面，如果图片加载完成，那么就需要将loading给隐藏。
经过分析，之所以会上面图片所示的问题，主要还是由于RecyclerView的复用机制导致的。当我快速滑动到顶部的时候，顶部的那些View是复用被移出列表的itemView，但是这些被复用的itemView可能还在加载之前的数据，同时这些itemView还要加载当前位置上需要加载的数据，这就导致加载的时候会先出现被复用之前需要加载的数据，然后再加载复用之后需要加载的数据。

如果将上面的SimpleTarget改为直接into(imageView)，就不会出现该问题！那么为什么会出现这种情况呢？

1.2 查看源码

首先看一下Glide在直接into的时候做了啥？
Glide源码：

  @NonNull
  public ViewTarget<ImageView, TranscodeType> into(@NonNull ImageView view) {
    
    
    // 省略代码...

	// 主要看buildImageViewTarget
    return into(
        glideContext.buildImageViewTarget(view, transcodeClass),
        /*targetListener=*/ null,
        requestOptions,
        Executors.mainThreadExecutor());
  }

继续跟进：
buildImageViewTarget方法

  @NonNull
  public <X> ViewTarget<ImageView, X> buildImageViewTarget(
      @NonNull ImageView imageView, @NonNull Class<X> transcodeClass) {
    
    
    return imageViewTargetFactory.buildTarget(imageView, transcodeClass);
  }

跟进到buildTarget里面
ImageViewTargetFactory类

  @NonNull
  @SuppressWarnings("unchecked")
  public <Z> ViewTarget<ImageView, Z> buildTarget(
      @NonNull ImageView view, @NonNull Class<Z> clazz) {
    
    
    if (Bitmap.class.equals(clazz)) {
    
    
      return (ViewTarget<ImageView, Z>) new BitmapImageViewTarget(view);
    } else if (Drawable.class.isAssignableFrom(clazz)) {
    
    
      return (ViewTarget<ImageView, Z>) new DrawableImageViewTarget(view);
    } else {
    
    
      throw new IllegalArgumentException(
          "Unhandled class: " + clazz + ", try .as*(Class).transcode(ResourceTranscoder)");
    }
  }

到这里就一目了然了，直接into(imageView)，里面使用的是ViewTarget回调加载的图片！
那么ViewTarget和SimpleTarget有啥区别导致的这个情况呢？

1.3 ViewTarget和SimpleTarget

首先看看SimpleTarget：

扫描二维码关注公众号，回复： 14990740 查看本文章

@Deprecated
public abstract class SimpleTarget<Z> extends BaseTarget<Z> {
    
    
  private final int width;
  private final int height;

  /**
   * Constructor for the target that uses {@link Target#SIZE_ORIGINAL} as the target width and
   * height.
   */
  // Public API.
  @SuppressWarnings("WeakerAccess")
  public SimpleTarget() {
    
    
    this(SIZE_ORIGINAL, SIZE_ORIGINAL);
  }

  /**
   * Constructor for the target that takes the desired dimensions of the decoded and/or transformed
   * resource.
   *
   * @param width The width in pixels of the desired resource.
   * @param height The height in pixels of the desired resource.
   */
  // Public API.
  @SuppressWarnings("WeakerAccess")
  public SimpleTarget(int width, int height) {
    
    
    this.width = width;
    this.height = height;
  }

  /**
   * Immediately calls the given callback with the sizes given in the constructor.
   *
   * @param cb {@inheritDoc}
   */
  @Override
  public final void getSize(@NonNull SizeReadyCallback cb) {
    
    
    if (!Util.isValidDimensions(width, height)) {
    
    
      throw new IllegalArgumentException(
          "Width and height must both be > 0 or Target#SIZE_ORIGINAL, but given"
              + " width: "
              + width
              + " and height: "
              + height
              + ", either provide dimensions in the constructor"
              + " or call override()");
    }
    cb.onSizeReady(width, height);
  }

  @Override
  public void removeCallback(@NonNull SizeReadyCallback cb) {
    
    
    // Do nothing, we never retain a reference to the callback.
  }
}

SimpleTarget的代码相当简单，继承自BaseTarget抽象类

BaseTarget类

@Deprecated
public abstract class BaseTarget<Z> implements Target<Z> {
    
    

  private Request request;

  @Override
  public void setRequest(@Nullable Request request) {
    
    
    this.request = request;
  }

  @Override
  @Nullable
  public Request getRequest() {
    
    
    return request;
  }

  // 很重要后面会讲到
  @Override
  public void onLoadCleared(@Nullable Drawable placeholder) {
    
    
    // Do nothing.
  }

  @Override
  public void onLoadStarted(@Nullable Drawable placeholder) {
    
    
    // Do nothing.
  }

  @Override
  public void onLoadFailed(@Nullable Drawable errorDrawable) {
    
    
    // Do nothing.
  }

  @Override
  public void onStart() {
    
    
    // Do nothing.
  }

  @Override
  public void onStop() {
    
    
    // Do nothing.
  }

  @Override
  public void onDestroy() {
    
    
    // Do nothing.
  }
}

BaseTarget是Target接口的实现。
下面我们来看看ViewTarget的源码：

@Deprecated
public abstract class ViewTarget<T extends View, Z> extends BaseTarget<Z> {
    
    
  private static final String TAG = "ViewTarget";
  private static boolean isTagUsedAtLeastOnce;
  private static int tagId = R.id.glide_custom_view_target_tag;

  protected final T view;
  private final SizeDeterminer sizeDeterminer;
  @Nullable private OnAttachStateChangeListener attachStateListener;
  private boolean isClearedByUs;
  private boolean isAttachStateListenerAdded;

  public ViewTarget(@NonNull T view) {
    
    
    this.view = Preconditions.checkNotNull(view);
    sizeDeterminer = new SizeDeterminer(view);
  }
  
  @SuppressWarnings("WeakerAccess") // Public API
  @Deprecated
  public ViewTarget(@NonNull T view, boolean waitForLayout) {
    
    
    this(view);
    if (waitForLayout) {
    
    
      waitForLayout();
    }
  }
	
  // 省略代码...

  private void setTag(@Nullable Object tag) {
    
    
    isTagUsedAtLeastOnce = true;
    view.setTag(tagId, tag);
  }

  @Nullable
  private Object getTag() {
    
    
    return view.getTag(tagId);
  }

  /**
   * Stores the request using {@link View#setTag(Object)}.
   *
   * @param request {@inheritDoc}
   */
  @Override
  public void setRequest(@Nullable Request request) {
    
    
    setTag(request);
  }

  /**
   * Returns any stored request using {@link android.view.View#getTag()}.
   *
   * <p>For Glide to function correctly, Glide must be the only thing that calls {@link
   * View#setTag(Object)}. If the tag is cleared or put to another object type, Glide will not be
   * able to retrieve and cancel previous loads which will not only prevent Glide from reusing
   * resource, but will also result in incorrect images being loaded and lots of flashing of images
   * in lists. As a result, this will throw an {@link java.lang.IllegalArgumentException} if {@link
   * android.view.View#getTag()}} returns a non null object that is not an {@link
   * com.bumptech.glide.request.Request}.
   */
  @Override
  @Nullable
  public Request getRequest() {
    
    
    Object tag = getTag();
    Request request = null;
    if (tag != null) {
    
    
      if (tag instanceof Request) {
    
    
        request = (Request) tag;
      } else {
    
    
        throw new IllegalArgumentException(
            "You must not call setTag() on a view Glide is targeting");
      }
    }
    return request;
  }
  // 省略代码...
}

这里最重要的是getRequest和setRequest，它们内部分别调用了getTag和setTag，内部又分别调用了View的setTag和getTag方法，通过setTag和getTag将Request对象和View绑定起来。
我们再来看看getRequest和setRequest方法是在哪里调用的。

RequestBuilder类

private <Y extends Target<TranscodeType>> Y into(@NonNull Y target,@Nullable RequestListener<TranscodeType> targetListener,BaseRequestOptions<?> options,Executor callbackExecutor) {
    
    
    Preconditions.checkNotNull(target);
    if (!isModelSet) {
    
    
      throw new IllegalArgumentException("You must call #load() before calling #into()");
    }

    Request request = buildRequest(target, targetListener, options, callbackExecutor);
	
	// 调用ViewTarget的getRequest，也就是获取View里面的Request
    Request previous = target.getRequest();
    
    // 将新的Request和View中的Request对比，如果不一样，就取消View里面的Request
    if (request.isEquivalentTo(previous)
        && !isSkipMemoryCacheWithCompletePreviousRequest(options, previous)) {
    
    
      // 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;
    }
	// 清除旧的Request
    requestManager.clear(target);
    
    // 设置新的Request
    target.setRequest(request);
    
    requestManager.track(target, request);

    return target;
  }

上面的代码的意思就是，将新的Request和View中的Request对比，如果不一样，就取消View里面的Request，去加载新的Request。这样做就可以解决前面的问题，被复用的旧的Request会被取消，而去加载新的Request。
至此，搞清楚了为啥直接into(imageView)不会出现图片多次叠加的问题。
修改的代码如下：

Glide.with(getContext())
     .load(url)
     .override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL) // 图片使用原始尺寸
     .listener(new RequestListener<Drawable>() {
    
    
               @Override
               public boolean onLoadFailed(@Nullable GlideException e,Object model, Target<Drawable> target, boolean isFirstResource){
    
    
                    loading.setVisibility(View.GONE);
                    return false;
               }

               @Override
               public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
    
    
                         loading.setVisibility(View.GONE);
                         return false;
                    }
                })
                .into(imageView);

需要注意的是由于使用了ViewTarget，会自动改变Bitmap的大小，我们的业务逻辑是不改变Bitmap大小，所以需要加上override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)使用图片原始尺寸。
修改后：

二. CustomTarget和CustomViewTarget

2.1 onResourceCleared和onLoadCleared

在解决问题的过程中，会发现Glide4.0后SimpleTarget和ViewTarget都被废弃掉了，被CustomTarget和CustomViewTarget替代掉了。其实它们内部的主要逻辑和SimpleTarget和ViewTarget基本上都差不多的。只不过这两个回调需要强制实现onLoadCleared和onResourceReady，onResourceReady在onLoadCleared里面被调用。
当Glide的内存缓存池满掉后，就会释放多余的bitmap，而被释放的bitmap，会被主动recycle，可能会使用已经被recycle的图片，导致如下的bug:

Canvas: trying to use a recycled bitmap android.graphics.Bitmap@XXXX

所以Glide4.0后要求我们强制实现这个方法，当然只实现该方法是不行的，还需要给imageView设置为null。

// CustomViewTarget的onResourceCleared
@Override
protected void onResourceCleared(@Nullable Drawable placeholder) {
    
    
       // 必须在onResourceCleared中给ImageView设置默认图片或者null.
       imageView.setImageDrawable(null);
}

2.2 onLoadStarted和onResourceLoading

当我尝试用CustomViewTarget解决加载图片闪烁的问题的时候，发现显示加载的View，有的时候会不显示。
出问题的代码如下：

@Override
protected void convert(BaseViewHolder holder, Bean bean) {
    
    
		// loading加载
		final View loading = holder.getView(R.id.loading);
    	loading.setVisibility(View.VISIBLE);
		// 省略代码...
   Glide.with(getContext())
     	.load(url)
		.into(new CustomViewTarget<View, Drawable>(imageView) {
    
    

                        @Override
                        public void onLoadFailed(@Nullable Drawable errorDrawable) {
    
    
                            loading.setVisibility(View.GONE);
                        }

                        @Override
                        public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
    
    
                            loading.setVisibility(View.GONE);
                            imageView.setImageDrawable(resource);
                        }

                        @Override
                        protected void onResourceCleared(@Nullable Drawable placeholder) {
    
    
                            // 必须在onResourceCleared中给ImageView设置默认图片或者null.
                            imageView.setImageDrawable(null);
                            loading.setVisibility(View.GONE);
                        }
                    });
}

通过查看CustomViewTarget的API发现了onResourceLoading，我尝试将loading.setVisibility(View.VISIBLE);放到onResourceLoading里面，解决掉了该问题。
代码上可以看到onResourceLoading被onLoadStarted调用了

  // 通知图片开始加载
  @Override
  public final void onLoadStarted(@Nullable Drawable placeholder) {
    
    
    maybeAddAttachStateListener();
    onResourceLoading(placeholder);
  }

最后的解决代码：

@Override
protected void convert(BaseViewHolder holder, Bean bean) {
    
    
		// loading加载
		final View loading = holder.getView(R.id.loading);
		// 省略代码...
   Glide.with(getContext())
     	.load(url)
		.into(new CustomViewTarget<View, Drawable>(imageView) {
    
    

						@Override
                        protected void onResourceLoading(@Nullable Drawable placeholder) {
    
    
                            super.onResourceLoading(placeholder);
                            // loading需要放在该回调中，要不然会出现loading数据错乱的问题
                            loading.setVisibility(View.VISIBLE);
                        }
    
                        @Override
                        public void onLoadFailed(@Nullable Drawable errorDrawable) {
    
    
                            loading.setVisibility(View.GONE);
                        }

                        @Override
                        public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
    
    
                            loading.setVisibility(View.GONE);
                            imageView.setImageDrawable(resource);
                        }

                        @Override
                        protected void onResourceCleared(@Nullable Drawable placeholder) {
    
    
                            // 必须在onResourceCleared中给ImageView设置默认图片或者null.
                            imageView.setImageDrawable(null);
                            loading.setVisibility(View.GONE);
                        }
                    });
}

结束

以上就是在使用Recycler+Glide的时候出现的一些bug，以及对这些bug的分析和解决思路。