Glide3升級到Glide4碰到的問題匯總以及部分程式碼修改

2019 年 10 月 3 日
筆記

本文同步自http://javaexception.com/archives/188

Glide.3x的版本是3.7.0，Glide4.x的版本是4.2.0

Glide3.x中最基礎的用法

Glide.with(getActivity()).load(url).into(imageView)

那麼在Glide4.x中，其實還是一樣的，最基本的用法不變

Glide.with(context).load(url).into(imageView)

但是稍微複雜一點的用法就有很大的差異了，接下來我們一一列舉。

接下來看一個稍微常規點的複雜用法

Glide.with(BaseApplication.getAppContext())  .load(url)  .placeholder(R.drawable.xxx)  .crossFade()  .into(imageView);

升級到Glide4後，更新為了

DrawableCrossFadeFactory drawableCrossFadeFactory = new DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build();  Glide.with(BaseApplication.getAppContext())  .load(url)  .apply(new RequestOptions().placeholder(R.drawable.xxx))  .transition(DrawableTransitionOptions.with(drawableCrossFadeFactory))  .into(imageView);

Glide3.x的鏈式調用，Glide4.x的用法還是比較繁瑣的

接下來記錄踩得第一個坑

Glide4.0後占點陣圖和過渡動畫衝突

在實際使用過程中發現升級到Glide4之後，展點陣圖跟過渡動畫存在衝突，最後找到解決辦法，Glide4載入url的程式碼調整為了

DrawableCrossFadeFactory drawableCrossFadeFactory = new DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build();  Glide.with(BaseApplication.getAppContext())  .load(url)  .apply(new RequestOptions().placeholder(R.drawable.xxx))  .transition(DrawableTransitionOptions.with(drawableCrossFadeFactory))  .into(imageView);

關鍵點在於
setCrossFadeEnabled(true)

淡入淡齣動畫效果

其實跟上面的一樣，Glide3.x中

Glide.with(BaseApplication.getAppContext())  .load(url)  .crossFade()  .placeholder(R.drawable.xxx)  .into(imageView);

用法是這樣的

到Glide4.x中

DrawableCrossFadeFactory drawableCrossFadeFactory = new DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build();  Glide.with(BaseApplication.getAppContext())  .load(url)  .transition(DrawableTransitionOptions.with(drawableCrossFadeFactory))  .apply(new RequestOptions().placeholder(R.drawable.post))  .into(imageView);

需要使用的是transition方法以及apply方法。apply方法裡面可以用來設置placeholder，errorr，centerCrop等方法。這個地方跟Glide3.x是不一樣的，用起來可能會覺得彆扭。

預載入問題

Glide3.x是

Glide.with(BaseApplication.getAppContext())  .load(url)  .diskCacheStrategy(DiskCacheStrategy.SOURCE);

升級到Glide4.x之後，有所調整，用的是preload方法

Glide.with(BaseApplication.getAppContext())  .load(url)  .preload();

自定義BitmapTransformation

升級後有幾個方法發生了變更, 在我們自定義BitmapTransformation實現一些特定的圓角等需求中，Glide3.x中只需要實現getId方法, 而在Glide4.x中，需要重寫equals方法，以及hashCode方法，還有updateDiskCacheKey。
我們以GlideRoundTransform為例，看看兩個版本的細微差異:

Glide3.x的程式碼如下:

public class GlideRoundTransform extends BitmapTransformation {        private static float radius = 0f;        public GlideRoundTransform(Context context) {          this(context, 4);      }        public GlideRoundTransform(Context context, int dp) {          super(context);          this.radius = DisplayUtils.dip2px(dp);      }        @Override      protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {          return roundCrop(pool, toTransform);      }        private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {          if (source == null) return null;            Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);          if (result == null) {              result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);          }            Canvas canvas = new Canvas(result);          Paint paint = new Paint();          paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));          paint.setAntiAlias(true);          RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());          canvas.drawRoundRect(rectF, radius, radius, paint);          return result;      }        @Override      public String getId() {          return getClass().getName() + Math.round(radius);      }  }

public class GlideRoundTransform extends BitmapTransformation {        private static final String ID = "com.star.wall.glide.GlideRoundTransform";        private float radius = 0f;        public GlideRoundTransform(Context context) {          this(context, 4);      }        public GlideRoundTransform(Context context, int dp) {          super(context);          this.radius = DisplayUtils.dip2px(dp);      }        @Override      protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {          return roundCrop(pool, toTransform);      }        private Bitmap roundCrop(BitmapPool pool, Bitmap source) {          if (source == null) return null;            Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);          if (result == null) {              result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);          }            Canvas canvas = new Canvas(result);          Paint paint = new Paint();          paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));          paint.setAntiAlias(true);          RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());          canvas.drawRoundRect(rectF, radius, radius, paint);          return result;      }        @Override      public boolean equals(Object o) {          if (o instanceof GlideRoundTransform) {              GlideRoundTransform other = (GlideRoundTransform) o;              return radius == other.radius;          }          return false;      }        @Override      public int hashCode() {          return (ID + "_" + radius).hashCode();      }        @Override      public void updateDiskCacheKey(MessageDigest messageDigest) {          messageDigest.update((ID + "_" + radius).getBytes());      }  }

如果還有其他的自定義transform需求，可以參考上面的程式碼作為模板，進行調整。

對於只支援設置imageView.setImageDrawable方法的view

載入url的程式碼Glide3.x中是

Glide.with(this)  .load(url)  .into(new SimpleTarget<GlideDrawable>() {  @Override  public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {  stvInfo.setLeftIcon(resource);  }  });

Glide4.x中是

Glide.with(this)  .load(url)  .into(new SimpleTarget<Drawable>() {  @Override  public void onResourceReady(Drawable resource, Transition<? super Drawable> transition) {  stvInfo.setLeftIcon(resource);  }  });

這一塊的關鍵點是SimpleTarget,通過實現這個抽象類的特定方法，我們可以獲取到drawable,拿到了drawable就可以給imageView設置圖片源了，Glide3.x和Glide4.x的區別在於一個是GlideDrawable，一個是Drawable.

同步程式碼中，獲取bitmap

在Glide3.x中

Bitmap bitmap = Glide.with(BaseApplication.getAppContext())  .load(url).asBitmap()  .into(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)  .get();

asBitmap後，調用get()方法，就能夠獲取到bitmap了，而在Glide4.x中，還得調整下程式碼。

Bitmap bitmap = Glide.with(BaseApplication.getAppContext()).asBitmap().load(url)  .apply(new RequestOptions().override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)).submit().get();

可以觀察下，這兩個差異還挺大的，Glide4.x裡面是先asBitmap，再load(url),還有就是通過submit().get()的方式獲取到bitmap

包含centerCrop,thumbnail,placeholder,error等常用方法的例子

Glide3中是

Glide.with(this)          .load(url)          .centerCrop()          .thumbnail(0.1f)          .placeholder(R.drawable.icon_pic_default)          .error(R.drawable.icon_pic_default)          .into(imageView);

而Glide4中是

Glide.with(this)          .load(url)          .apply(new RequestOptions().centerCrop().placeholder(R.drawable.icon_pic_default).error(R.drawable.icon_pic_default))          .thumbnail(0.1f)          .into(imageView);

未完待續。

補充資料:

Glide4.0後占點陣圖和過渡動畫衝突解決方案 https://www.jianshu.com/p/28f5bcee409f

關於ImageView的幾個常見問題 http://javaexception.com/archives/173

Glide處理圓形ImageView http://javaexception.com/archives/182

如何使用Glide載入通知欄頭像url http://javaexception.com/archives/19