Glide4.0 centerCrop属性和圆角 冲突
最近有个工作中有个需求就是展示的图片必须圆角、正方形,当时一想这太尼玛简单了,无非就是设置一个图片参数的大小,然后在设置一个centerCrop的属性,在自定义一个类去继承BitmapTransformation重画一下。
结果写的时候发现,在glide4.0上面 centerCrop和圆角图片有冲突只能显示一个,结果就度娘问了一边,大部分都是下面这行代码,发现这个在glide4.0上面直接报错 无法使用,最后没办法了只能自己撸一遍源码看看了。
transform(new CenterCrop(getActivity()),new GlideRoundImage(getActivity()))
点开centerCrop的源码
/*** Applies {@link CenterCrop} to all default types and* throws an exception if asked to transform an unknown type.** <p>this will override previous calls to {@link #dontTransform()} ()}.** @see #transform(Class, Transformation)* @see #optionalCenterCrop()*/public RequestOptions centerCrop() {return transform(DownsampleStrategy.CENTER_OUTSIDE, new CenterCrop());}
原来这犊子也是调用的 transform的方法,在点开 new Centercrop()这个方法看看里面的实现
/*** Scale the image so that either the width of the image matches the given width and the height of* the image is greater than the given height or vice versa, and then crop the larger dimension to* match the given dimension.** Does not maintain the image's aspect ratio*/
public class CenterCrop extends BitmapTransformation {private static final String ID = "com.bumptech.glide.load.resource.bitmap.CenterCrop";private static final byte[] ID_BYTES = ID.getBytes(CHARSET);public CenterCrop() {// Intentionally empty.}@Deprecatedpublic CenterCrop(@SuppressWarnings("unused") Context context) {this();}@Deprecatedpublic CenterCrop(@SuppressWarnings("unused") BitmapPool bitmapPool) {this();}// Bitmap doesn't implement equals, so == and .equals are equivalent here.@SuppressWarnings("PMD.CompareObjectsWithEquals")@Overrideprotected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {return TransformationUtils.centerCrop(pool, toTransform, outWidth, outHeight);}@Overridepublic boolean equals(Object o) {return o instanceof CenterCrop;}@Overridepublic int hashCode() {return ID.hashCode();}@Overridepublic void updateDiskCacheKey(MessageDigest messageDigest) {messageDigest.update(ID_BYTES);}
}
不出所料 这里面也是继承了 BitmapTransformation这个类然后重画了一边,后面我们自己有调用了transform()这个方法等于把系统的Centercrop这个方法给覆盖了,所以说这两个属性谁在后面就用哪种效果,但是现在的问题是我想两个都要用咋整,那么问题来了,这下只能在自己自定义的BitmapTransformation将两个效果一起画出来了;
先是我的布局文件:很简单就一个线性布局+3个ImageView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.flyinbed.myapplication.MainActivity"><ImageViewandroid:id="@+id/icon1"android:layout_width="150dp"android:layout_height="150dp" /><ImageViewandroid:id="@+id/icon2"android:layout_marginTop="10dp"android:layout_width="150dp"android:layout_height="150dp" /><ImageViewandroid:id="@+id/icon3"android:layout_marginTop="10dp"android:layout_width="150dp"android:layout_height="150dp" /></LinearLayout>
Activity代码:3个Imageview加载3张本地图片
public class MainActivity extends AppCompatActivity {private ImageView icon1,icon2,icon3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);icon1 = (ImageView) findViewById(R.id.icon1);icon2 = (ImageView) findViewById(R.id.icon2);icon3 = (ImageView) findViewById(R.id.icon3);Glide.with(this).load(R.drawable.item1).into(icon1);Glide.with(this).load(R.drawable.image2).into(icon2);Glide.with(this).load(R.drawable.image3).into(icon3);}
}
效果:
先设置一下Centercrop的属性:
题外话:glide4.0想设置图片的属性现在都是通过RequestOptions()这个类来实现的,然后在glide加载的时候通过
.apply()把那个类给赛进去就好了;
@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);icon1 = (ImageView) findViewById(R.id.icon1);icon2 = (ImageView) findViewById(R.id.icon2);icon3 = (ImageView) findViewById(R.id.icon3);RequestOptions myOptions = new RequestOptions().centerCrop();Glide.with(this).load(R.drawable.item1).apply(myOptions).into(icon1);Glide.with(this).load(R.drawable.image2).apply(myOptions).into(icon2);Glide.with(this).load(R.drawable.image3).apply(myOptions).into(icon3);}
现在设置transform圆角属性
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);icon1 = (ImageView) findViewById(R.id.icon1);icon2 = (ImageView) findViewById(R.id.icon2);icon3 = (ImageView) findViewById(R.id.icon3);RequestOptions myOptions = new RequestOptions().centerCrop().transform(new GlideRoundTransform(this,30));Glide.with(this).load(R.drawable.item1).apply(myOptions).into(icon1);Glide.with(this).load(R.drawable.image2).apply(myOptions).into(icon2);Glide.with(this).load(R.drawable.image3).apply(myOptions).into(icon3);}
很明显把Centercrop的属性给覆盖了;
下面是我自定义类GlideRoundTransform()的代码:
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 = Resources.getSystem().getDisplayMetrics().density * dp;}@Overrideprotected 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;}public String getId() {return getClass().getName() + Math.round(radius);}@Overridepublic void updateDiskCacheKey(MessageDigest messageDigest) {}}
接下来就开始解决这个问题了,在这个自定义类当中,我们要先获取到Centercrop()这个属性后得到到图片,然后在根据这个图片在进行圆角加工然后在返回。
其实屡清楚了思路很简单 也就是一样代码的事,下面是我更改以后的代码:
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 = Resources.getSystem().getDisplayMetrics().density * dp;}@Overrideprotected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {Bitmap bitmap = TransformationUtils.centerCrop(pool, toTransform, outWidth, outHeight);return roundCrop(pool, bitmap);}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;}public String getId() {return getClass().getName() + Math.round(radius);}@Overridepublic void updateDiskCacheKey(MessageDigest messageDigest) {}}
在看看效果:
很完美,搞定收工,接下来是Activity的完整代码:
public class MainActivity extends AppCompatActivity {private ImageView icon1,icon2,icon3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);icon1 = (ImageView) findViewById(R.id.icon1);icon2 = (ImageView) findViewById(R.id.icon2);icon3 = (ImageView) findViewById(R.id.icon3);//第一个是上下文,第二个是圆角的弧度RequestOptions myOptions = new RequestOptions().transform(new GlideRoundTransform(this,30));Glide.with(this).load(R.drawable.item1).apply(myOptions).into(icon1);Glide.with(this).load(R.drawable.image2).apply(myOptions).into(icon2);Glide.with(this).load(R.drawable.image3).apply(myOptions).into(icon3);}
}
要是设置的效果没用就清除下缓存,要是还不行就卸载重装好了!!!!!
Glide4.0 centerCrop属性和圆角 冲突相关推荐
- android 监听gif播放,Glide4.0 以后 监听Gif播放完成
在Glide3.0的时候,我们可以通过GifDecoder获取每一帧的播放时长然后相加得到gif的播放时长,即: GifDrawable drawable = (GifDrawable) glideD ...
- html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
- QT使用xsl将xml为html,使用xslt 2.0将属性设置为根元素(Puting attributes to the root-element with xslt 2.0)...
使用xslt 2.0将属性设置为根元素(Puting attributes to the root-element with xslt 2.0) 是否可以使用xslt 2.0将xml:lang或lan ...
- CSS3新增属性之圆角、盒阴影、字阴影
CSS3新增属性之圆角.盒阴影.字阴影 人生没有白走的路,每一步都算数. 一.圆角 border-radius:; 取值px % border-radius: 50%; 画一个圆 二.盒阴影 box- ...
- AttributeError:模块“ sipbuild.api”没有针对PyQt5 5.15.0的属性“ prepare_metadata_for_build_wheel”
AttributeError:模块" sipbuild.api"没有针对PyQt5 5.15.0的属性" prepare_metadata_for_build_wheel ...
- Border-radius属性--设置圆角边框
border-radius:该属性允许您为元素添加圆角边框! div {border:2px solid;border-radius:25px; -moz-border-radius:25px; /* ...
- CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
- Android Shape属性corners 圆角效果,边框效果...
1,Corners [1]Corners标签是用来字义圆角的,其中radius与其它四个并不能共同使用. [2]android:radius:定义四个角的的圆角半径. [3]其它四个是逐个字义每个角的 ...
- android 版本图片,Android - 图片处理之Glide4.0版本
老婆保佑,代码无BUG 前言 一般项目我都会使用Glide作为我的图片加载框架,他和Picasso ,真的很像,郭大神早就分析过了,很详细,这里也就简单做个记录.小白白一枚,学习路上 目录 一:Git ...
- 【Kotlin】接口 ( 声明 | 实现 | 接口方法 | 接口属性 | 接口覆盖冲突 | 接口继承 )
文章目录 I . 接口总结 II . 接口声明 III . 接口实现 IV . 接口中的方法 V . 接口中的属性 ( 变量 / 常量 ) VI . 接口中的属性属性覆盖 ( 变量 / 常量 ) VI ...
最新文章
- sql2005配置文件服务器,SQL server服务器版的安装方法
- Eclipse Maven 编译错误 Dynamic Web Module 3.0 requires Java 1.6 or newer 解决方案
- 借组磁带机求第K小元素
- 高盛5年来首次看好中国互联网利润
- 计算机科学入门指南游戏攻略,【基础攻略】从零开始新手入门指南
- 骗人的数学题,那消失的1块钱到底被谁拿走了
- Deep Learning of Binary Hash Codes for Fast Image Retrieval(2015)
- Python机器学习:PCA与梯度上升:009人脸识别与特征脸(lfw_people数据集)
- 前端开发 2018 回顾
- python 命名管道_Linux 下 Python 读取命名管道的疑惑
- 微型计算机原理与接口技术 试卷,微机原理与接口技术试卷和答案4套.doc
- MapReduce实现矩阵乘法的一些总结
- 抖音直播带货gmv是什么意思?丨国仁网络资讯
- 躲开混脸熟的车型,一文带你去看2019上海车展里的新面孔
- U1C1 数据挖掘与文本分析的背景与实际应用
- Packet Tracer - 使用 Traceroute 发现网络
- 还有哪些不错的正规Java培训机构
- x264 代码重点详解 详细分析
- automator来解决mac terminal终端快速连接
- 图形图像处理案例1——蚊香画生成器