Glide Multiple transformations in Android

问题

I've been using Glide to load images in my app. I've a custom transformation which I'm using while loading an image in ImageView.
The problem is I want to apply my custom transformation & centerCrop both on the image fetched. But Glide is using only my custom transformation and displaying the image in ImageView with fitXY.
Here is my code:

Glide.with(context)
    .load(uri)
    .placeholder(R.drawable.image_id)
    .transform(new CustomTransformation(context))
    .centerCrop()
    .into(imageView);

How do I achieve the desired result? Any help would be much appreciated.

回答1:

In Glide v4.6.1, I found that the MultiTransformation class makes this easy:

MultiTransformation<Bitmap> multiTransformation = new MultiTransformation<>(new CustomTransformation(), new CircleCrop());

Glide.with(DemoActivity.this).load(file)
                .apply(RequestOptions.bitmapTransform(multiTransformation))
                .into(mPreviewImageView);

回答2:

Make your own CustomTransformation which extends CenterCrop, then when overriding transform() call super before doing your custom transformation.

For example:

 Glide.with(Context)
                    .load(url)
                    .asBitmap()
                    .transform(new CenterCrop(context) {
                                @Override
                                protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
                                    // Call super to have your image center cropped
                                    toTransform = super.transform(pool, toTransform, outWidth, outHeight);
                                    // Apply your own custom transformation
                                    return ImageUtils.fastblur(toTransform, BLUR_RADIUS);
                                }

                                @Override
                                public String getId() {
                                    return "com.example.imageid"
                                }
                            })
                    .placeholder(placeholder)
                    .into(imageView);

回答3:

You can apply multiple transformations like this:

 Glide.with(getContext())
            .load(url)
            .bitmapTransform(new CenterCrop(getContext()), new BlurTransformation(getContext(), BLUR_RADIUS), new GrayscaleTransformation(getContext()))
            .into(imageView);

回答4:

Better way (especially with Glide 4 which no longer accepts more than one single BitmapTransformation) is to create a CombinedTransformation, like this:

class CombinedTransformation(vararg val transformations: Transformation<Bitmap>) 
        : Transformation<Bitmap> {
    override fun transform(context: Context, resource: Resource<Bitmap>, 
                           outWidth: Int, outHeight: Int): Resource<Bitmap> {
        var out = resource
        for (transformation in transformations) {
            out = transformation.transform(context, out, outWidth, outHeight)
        }
        return out
    }
    override fun updateDiskCacheKey(messageDigest: MessageDigest) {
        transformations.forEach { it.updateDiskCacheKey(messageDigest) }
    }
}

Then use it like so (again, Glide 4):

val options = RequestOptions()
options.transform(CombinedTransformation(CenterCrop(...), BlurTransformation(...)))
Glide.with(context).load(url).apply(options).into(imageView)

回答5:

In Glide 4.11 we can use MultiTransformation with a list of transformations:

GlideApp.with(imageView)
    .load(url)
    .transform(MultiTransformation(CenterCrop(), RoundedCorners(10), Rotate(30)))
    // .error(...)
    .into(imageView)

来源：https://stackoverflow.com/questions/31759841/glide-multiple-transformations-in-android

标签

android

android-glide