1.应用场景
在当下主流的App中,拿到图片资源时都会做一些处理,过度动画等等再展现给用户,很多时候见到的图片都是圆角的,给用户的视觉体验更好,在图片处理方面,经常会用到Glide框架,所以,圆角自然也可借此实现
2.问题
今天在项目中,在对几处图片控件进行处理时,发现其中一个控件的圆角失效了,对比之后发现应该是imageView的scaleType属性导致其圆角失效,在经过测试和网上的查询过后
发现在对ImageView不做任何的ScaleType属性处理时,其圆角是正常展示的,但是在我们开发时,有些图片不能留白,要充满布局,于是会给其设置成centerCrop,这样会充满布局,但是也会导致原本的圆角失效。
3.解决办法
原本的代码:
Glide.with(this).load(it).fitCenter()
.placeholder(R.drawable.im_msg_item_img_loading)
.error(R.drawable.im_msg_item_img_loading)
.apply(RequestOptions.bitmapTransform(RoundedCorners(8)))
.addListener(object : RequestListener<Drawable> {
override fun onLoadFailed(e: GlideException?,
model: Any?,
target: Target<Drawable>?,
isFirstResource: Boolean): Boolean {
return false
}
override fun onResourceReady(resource: Drawable?,
model: Any?,
target: Target<Drawable>?,
dataSource: DataSource?,
isFirstResource: Boolean): Boolean {
anim.cancel()//停止播放动画
return false
}
}).into(img)
处理后的代码:
val roundOptions = RequestOptions().transform(RoundedCorners(8))
//处理CenterCrop的情况,保证圆角不失效
roundOptions.transform(CenterCrop(), RoundedCorners(8))
Glide.with(this).load(it)
.apply(roundOptions)
.addListener(object : RequestListener<Drawable{
override fun onLoadFailed(e: GlideException?,
model: Any?,
target: Target<Drawable>?,
isFirstResource: Boolean): Boolean {
return false
}
override fun onResourceReady(resource: Drawable?,
model: Any?,
target: Target<Drawable>?,
dataSource: DataSource?,
isFirstResource: Boolean): Boolean {
anim.cancel
return false
}
}).into(img)
这样就算图片就算过宽过高是否缩放他都是圆角。