详解Android中Glide与CircleImageView加载圆形图片的问题

最近在项目中遇到了一个奇怪的问题，glide和circleimageview一起使用加载圆形头像，发现第一次死活都加载出来，出来的是一张占位图，当你刷新的时候或者第二次进入的时候才能加载出来。究其原因，circleimageview 把位置占了。这时候我们有如下4种解决方案，不管是哪一种都是可以解决的（亲测可行）。

1. 不使用占位符

注释掉这两句代码即可。

.placeholder(r.drawable.normal_photo)
    .error(r.drawable.normal_photo)

glide 加载时的代码：

glide.with(mcontext)
                .load(datas.getuser_img())
                .centercrop()
                .into(ivavator);

此时xml中的还是circleimageview,代码如下：

<de.hdodenhof.circleimageview.circleimageview
      android:id="@+id/iv_avator"
      android:layout_width="130px"
      android:layout_height="130px"
      android:src="@drawable/normal_photo" />

2. 不使用默认动画

添加一句代码即可：

.dontanimate()//防止设置placeholder导致第一次不显示网络图片,只显示默认图片的问题

此时glide加载时的完整代码：

glide.with(mcontext)
        .load(datas.getuser_img())
        .centercrop()
        .dontanimate()//防止设置placeholder导致第一次不显示网络图片,只显示默认图片的问题
        .error(r.drawable.normal_photo)
        .placeholder(r.drawable.normal_photo)
        .into(ivavator);

此时xml中的依然是circleimageview，这没什么好说的。代码如下：

<de.hdodenhof.circleimageview.circleimageview
      android:id="@+id/iv_avator"
      android:layout_width="130px"
      android:layout_height="130px"
      android:src="@drawable/normal_photo" />

3. 使用glide本身的圆形加载方式

这里就直接看下glide加载时的代码，注意：

此时的ivavator可以使用普通的imageview，不必再引入circleimageview第三方框架。（当然你依然可以写成circleimageview）

asbitmap() 这句不能少，否则下面的方法会报错。

glide.with(mcontext)
       .load(datas.getuser_img())
       .asbitmap() //这句不能少，否则下面的方法会报错
       .centercrop()
       .into(new bitmapimageviewtarget(ivavator) {
         @override
         protected void setresource(bitmap resource) {
           roundedbitmapdrawable circularbitmapdrawable =
               roundedbitmapdrawablefactory.create(getresources(), resource);
           circularbitmapdrawable.setcircular(true);
           ivavator.setimagedrawable(circularbitmapdrawable);
         }
       });

此时xml中的代码修改成imageview，代码如下：

<imageview
      android:id="@+id/iv_avator"
      android:layout_width="130px"
      android:layout_height="130px"
      android:src="@drawable/normal_photo" />

4. 同样使用glide本身的圆形加载方式

这种方式和上面的基本类似。首先glidecircletransform继承bitmaptransformation，代码如下：

//圆形图片
public class glidecircletransform extends bitmaptransformation {
  public glidecircletransform(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;

    // todo this could be acquired from the pool too
    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();
  }
}

glide加载时的代码如下：

glide.with(mcontext)
                .load(datas.getuser_img())
                .centercrop()
                .error(r.drawable.normal_photo)
                .placeholder(r.drawable.normal_photo)
                .transform(new glidecircletransform(mcontext))
                .into(ivavator);

注意： 此时的ivavator依然可以是imageview（当然你依然可以写成circleimageview） 。代码如下：

<imageview
      android:id="@+id/iv_avator"
      android:layout_width="130px"
      android:layout_height="130px"
      android:src="@drawable/normal_photo" />

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。