欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-16 15:55:46
最近在项目中遇到了一个奇怪的问题,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" />

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

上一篇:

下一篇: