详解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" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。