[英]glide rounded corner transform issue
我使用以下代码使用 glide 将带有圆角的图像加载到 imageview 中:
Glide.with(this)
.load(url)
.listener(new RequestListener<Drawable>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
return false;
}
@Override
public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
return false;
}
})
.transition(withCrossFade())
.apply(new RequestOptions().transform(new RoundedCorners(50)).error(R.drawable.default_person).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.NONE))
.into(mBinding.profileImgv);
我遇到了同样的问题,在我的情况下,问题是我尝试加载的图像以像素为单位(320x480)较小,然后以像素为单位的 ImageView 大小。 我的解决方案如下:
我在 xml 文件中的 ImageView:
<ImageView
android:id="@+id/image_program_thumb"
android:layout_width="match_parent"
android:layout_height="186dp" />
ProgramViewHolder.java 类
@BindView(R.id.image_program_thumb) ImageView mProgramThumbnail;
.....
void bindData(final Program item) {
RequestOptions requestOptions = new RequestOptions();
requestOptions = requestOptions.transforms(new CenterCrop(), new RoundedCorners(16));
Glide.with(itemView.getContext())
.load(item.getImage())
.apply(requestOptions)
.into(mProgramThumbnail);
....
}
PS我用的是4.2.0版本的Glide
在 Glide V4 中
像这样尝试
Glide.with(this.context)
.load(url)
.apply(RequestOptions.bitmapTransform(new RoundedCorners(14)))
.into(ImageView);
对于 Glide v4.9 转换 (java):
Glide.with(this)
.load(R.drawable.sample)
.transform(new CenterCrop(),new RoundedCorners(25))
.into(image);
这对我有用(生成的 API、Glide 4.9、Kotlin):
GlideApp.with(imageView)
.load(pictureUri)
.transform(CenterCrop(), RoundedCorners(8))
.into(imageView)
在这里找到: https : //github.com/wasabeef/glide-transformations/issues/94
正如你在我的回答中看到的,它也可以使用Glide 的 Generated API来实现。 它需要一些初始工作,但随后会为您提供 Glide 的所有功能以及做任何事情的灵活性,因为您编写了实际代码,所以我认为从长远来看这是一个很好的解决方案。 另外,用法非常简单和整洁。
首先,设置Glide 4+ 版本:
implementation 'com.github.bumptech.glide:glide:4.6.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'
然后创建 Glide 的 app 模块类来触发注解处理:
@GlideModule
public final class MyAppGlideModule extends AppGlideModule {}
然后创建实际完成工作的 Glide 扩展。 您可以自定义它以执行任何您想要的操作:
@GlideExtension
public class MyGlideExtension {
private MyGlideExtension() {}
@NonNull
@GlideOption
public static RequestOptions roundedCorners(RequestOptions options, @NonNull Context context, int cornerRadius) {
int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));
return options.transforms(new RoundedCorners(px));
}
}
添加这些文件后,构建您的项目。
然后在您的代码中使用它,如下所示:
GlideApp.with(this)
.load(imageUrl)
.roundedCorners(getApplicationContext(), 5)
.into(imageView);
在科特林上:
Glide.with(applicationContext)
.load("YourUrl")
.centerCrop()
.apply(RequestOptions.bitmapTransform(RoundedCorners(12)))
.into(imgTest)
要在Glide 版本 4 中简单地添加角,只需使用这个简单的 spinnet:
val cornerRadius = context.resources.getDimensionPixelSize(R.dimen.corner_radius)
Glide.with(this)
.asBitmap()
.load(image)
.apply(RequestOptions.bitmapTransform(RoundedCorners(cornerRadius)))
.into(imageView)
Glide.with(context).load(url).centerCrop().into(new BitmapImageViewTarget(imageView) {
@Override
protected void setResource(Bitmap resource) {
RoundedBitmapDrawable circularBitmapDrawable =
RoundedBitmapDrawableFactory.create(context.getResources(), resource);
circularBitmapDrawable.setCircular(true);
imageView.setImageDrawable(circularBitmapDrawable);
}
});
Codesalot 先生的回答有所变化
而不是这样做
GlideApp.with(this)
.load(imageUrl)
.roundedCorners(getApplicationContext(), 5)
.into(imageView);
这样做
Glide.with(holder.ivBook.context)
.load(timeline.bookImageUrl)
.apply(MyGlideExtension.roundCorners(new RequestOptions, holder.ivBook.context, 10))
.into(holder.ivBook)
`
Glide.with(this)
.load(user.getPhotoUrl())
.centerCrop()
.apply(RequestOptions.bitmapTransform(new RoundedCorners(150)))//this line of code help to rounded the image to circle`enter code here`
.placeholder(R.mipmap.ic_launcher)
.into(userPic);
我为此(此处和此处)以及 Kotlin 制作了类似解决方案的一些修改版本。
用法示例:
val borderWidth= TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, context.resources.displayMetrics).toInt()
Glide.with(activity)
.asBitmap()
.load(photoUrl)
.apply(RequestOptions.centerCropTransform())
.apply(RequestOptions.bitmapTransform(RoundedCornersTransformation(activity, iconRoundedCornersRadius, 0, 0xff999999.toInt(), borderWidth)))
.into(object : BitmapImageViewTarget(imageView) {
override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
super.onResourceReady(resource, transition)
//do something if needed
}
})
RoundedCornersTransformation.kt
class RoundedCornersTransformation @JvmOverloads constructor(private val bitmapPool: BitmapPool, private val radius: Int, private val margin: Int,
private val cornerType: CornerType = CornerType.ALL) : Transformation<Bitmap> {
private val diameter: Int = radius * 2
private var color = Color.BLACK
private var border: Int = 0
// val id: String
// get() = ("RoundedTransformation(radius=" + radius + ", margin=" + margin + ", diameter="
// + diameter + ", cornerType=" + cornerType.name + ")")
enum class CornerType {
ALL,
TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
TOP, BOTTOM, LEFT, RIGHT,
OTHER_TOP_LEFT, OTHER_TOP_RIGHT, OTHER_BOTTOM_LEFT, OTHER_BOTTOM_RIGHT,
DIAGONAL_FROM_TOP_LEFT, DIAGONAL_FROM_TOP_RIGHT, BORDER
}
constructor(context: Context, radius: Int, margin: Int, @ColorInt color: Int, border: Int) : this(context, radius, margin, CornerType.BORDER) {
this.color = color
this.border = border
}
@JvmOverloads
constructor(context: Context, radius: Int, margin: Int,
cornerType: CornerType = CornerType.ALL) : this(Glide.get(context).bitmapPool, radius, margin, cornerType)
override fun transform(context: Context, resource: Resource<Bitmap>, outWidth: Int, outHeight: Int): Resource<Bitmap> {
val source = resource.get()
val width = source.width
val height = source.height
var bitmap: Bitmap? = bitmapPool.get(width, height, Bitmap.Config.ARGB_8888)
if (bitmap == null)
bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap!!)
val paint = Paint()
paint.isAntiAlias = true
paint.shader = BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
drawRoundRect(canvas, paint, width.toFloat(), height.toFloat())
return BitmapResource.obtain(bitmap, bitmapPool)!!
}
private fun drawRoundRect(canvas: Canvas, paint: Paint, width: Float, height: Float) {
val right = width - margin
val bottom = height - margin
when (cornerType) {
RoundedCornersTransformation.CornerType.ALL -> canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), paint)
RoundedCornersTransformation.CornerType.TOP_LEFT -> drawTopLeftRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.TOP_RIGHT -> drawTopRightRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.BOTTOM_LEFT -> drawBottomLeftRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.BOTTOM_RIGHT -> drawBottomRightRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.TOP -> drawTopRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.BOTTOM -> drawBottomRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.LEFT -> drawLeftRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.RIGHT -> drawRightRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.OTHER_TOP_LEFT -> drawOtherTopLeftRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.OTHER_TOP_RIGHT -> drawOtherTopRightRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.OTHER_BOTTOM_LEFT -> drawOtherBottomLeftRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.OTHER_BOTTOM_RIGHT -> drawOtherBottomRightRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.DIAGONAL_FROM_TOP_LEFT -> drawDiagonalFromTopLeftRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.DIAGONAL_FROM_TOP_RIGHT -> drawDiagonalFromTopRightRoundRect(canvas, paint, right, bottom)
RoundedCornersTransformation.CornerType.BORDER -> drawBorder(canvas, paint, right, bottom)
// else -> canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), paint)
}
}
private fun drawTopLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), (margin + diameter).toFloat()),
radius.toFloat(), radius.toFloat(), paint)
canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), (margin + radius).toFloat(), bottom), paint)
canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom), paint)
}
private fun drawTopRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(),
radius.toFloat(), paint)
canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom), paint)
canvas.drawRect(RectF(right - radius, (margin + radius).toFloat(), right, bottom), paint)
}
private fun drawBottomLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, (margin + diameter).toFloat(), bottom),
radius.toFloat(), radius.toFloat(), paint)
canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom - radius), paint)
canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom), paint)
}
private fun drawBottomRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(right - diameter, bottom - diameter, right, bottom), radius.toFloat(),
radius.toFloat(), paint)
canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom), paint)
canvas.drawRect(RectF(right - radius, margin.toFloat(), right, bottom - radius), paint)
}
private fun drawTopRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), right, bottom), paint)
}
private fun drawBottomRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, right, bottom), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom - radius), paint)
}
private fun drawLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom), paint)
}
private fun drawRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom), paint)
}
private fun drawOtherTopLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, right, bottom), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom - radius), paint)
}
private fun drawOtherTopRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, right, bottom), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom - radius), paint)
}
private fun drawOtherBottomLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), right - radius, bottom), paint)
}
private fun drawOtherBottomRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom), radius.toFloat(), radius.toFloat(),
paint)
canvas.drawRect(RectF((margin + radius).toFloat(), (margin + radius).toFloat(), right, bottom), paint)
}
private fun drawDiagonalFromTopLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), (margin + diameter).toFloat()),
radius.toFloat(), radius.toFloat(), paint)
canvas.drawRoundRect(RectF(right - diameter, bottom - diameter, right, bottom), radius.toFloat(),
radius.toFloat(), paint)
canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), right - diameter, bottom), paint)
canvas.drawRect(RectF((margin + diameter).toFloat(), margin.toFloat(), right, bottom - radius), paint)
}
private fun drawDiagonalFromTopRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(),
radius.toFloat(), paint)
canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, (margin + diameter).toFloat(), bottom),
radius.toFloat(), radius.toFloat(), paint)
canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom - radius), paint)
canvas.drawRect(RectF((margin + radius).toFloat(), (margin + radius).toFloat(), right, bottom), paint)
}
private fun drawBorder(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
// stroke
val strokePaint = Paint()
strokePaint.style = Paint.Style.STROKE
strokePaint.color = color
strokePaint.strokeWidth = border.toFloat()
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), paint)
// stroke
canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), strokePaint)
}
override fun updateDiskCacheKey(messageDigest: MessageDigest) {
}
}
Glide.with(mContext)
.setDefaultRequestOptions(requestOptions)
.load(home_pojo.getUser_photo())
.apply(RequestOptions.bitmapTransform(new RoundedCorners(14)))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.