Glide 圆形图片和圆角图片的实现

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/polo2044/article/details/82155760

一、背景前言

在Android APP的设计中圆角和圆形图片的设计是必须的,网上关于圆形和圆角图片的实现方案也已经有很多,但是那都是人家的,因此在此总结一下,方便后续设计中的查阅,希望对需要帮助的你也有用。

二、方案的实现

2.1 方案一
使用RoundedBitmapDrawable,RoundedBitmapDrawable位于Android.support.v4.graphics.drawable,使用它不在需要额外添加第三方类库,使用起来参考如下:
实现圆角

public static void loadCircleImage(Context context, ImageView view, Bitmap bitmap) {
    RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), bitmap);
    circularBitmapDrawable.setCornerRadius(10); //设置圆角弧度
    view.setImageDrawable(circularBitmapDrawable);
}

实现圆形

public static void loadCircleImage(Context context, ImageView view, Bitmap bitmap) {
    RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), bitmap);
    circularBitmapDrawable.setCircular(true); //设置圆形图片
    view.setImageDrawable(circularBitmapDrawable);
}

2.2 方案二
通过RequestOption设置参数配置来实现圆形和圆角。
圆形图片

//直接调用RequestOptions中的函数进行设置
RequestOptions options = new RequestOptions()
        .placeholder(resId)
        .error(resId)
        .circleCrop() //定义圆形图片
        .override(width);
request.load(url).apply(options).into(view);

//调用Transformation进行设置
private static MultiTransformation buildCircleTransformation(ImageView imageView) {
        switch (imageView.getScaleType()) {
            case FIT_CENTER:
            case FIT_START:
            case FIT_END:
            case FIT_XY:
                return new MultiTransformation<Bitmap>(new FitCenter(), new CircleCrop());
            case CENTER_CROP:
            case CENTER_INSIDE:
            default:
                return new MultiTransformation<Bitmap>(new CenterCrop(), new CircleCrop());
        }
    }
//在代码中调用
RequestOptions options = new RequestOptions();
options.transform(buildRoundCornerTransformation(imageView, cornerRadius));
Glide.with(imageView.getContext()).load(model).apply(options).into(imageView);

圆角图片

//圆角图片没有发现可以在RequestOption中直接设置的函数
//根据图片中的scaleType设置不同的Transformation
private static MultiTransformation buildRoundCornerTransformation(ImageView imageView, int cornerRadius) {
    switch (imageView.getScaleType()) {
        case CENTER_INSIDE:
            return new MultiTransformation<Bitmap>(new CenterInside(), new RoundedCorners(cornerRadius));
        case FIT_CENTER:
        case FIT_START:
        case FIT_END:
        case FIT_XY:
            return new MultiTransformation<Bitmap>(new FitCenter(), new RoundedCorners(cornerRadius));
        case CENTER_CROP:
        default:
            return new MultiTransformation<Bitmap>(new CenterCrop(), new RoundedCorners(cornerRadius));
    }
}

//在代码中调用
RequestOptions options = new RequestOptions();
options.transform(buildRoundCornerTransformation(imageView, cornerRadius));
Glide.with(imageView.getContext()).load(model).apply(options).into(imageView);

2.3 通过第三方库 Glide-Transformations实现
第三方开源库glide-transformations提供的有示例函数,圆形图片的实现方式如下:

Glide.with(context)
            .load(R.drawable.demo)
            .apply(bitmapTransform(new CropCircleTransformation()))
            .into(holder.image);

圆角图片的实现方式如下:

 Glide.with(context)
            .load(R.drawable.demo)
            .apply(bitmapTransform(new RoundedCornersTransformation(45, 0,
                RoundedCornersTransformation.CornerType.BOTTOM)))
            .into(holder.image);

其中CropCircleTransformation与RoundedCornersTransformation都是继承于BitmapTransformation,有兴趣可以阅读源码glide-transformations

2.4 自定义BitmapTransformation
通过自定义BitmapTransformation来实现圆形图片和圆角图片,这种方式在网上介绍的有,但是不推荐使用。

参考博客
Android加载圆角图片、圆形图片的三种方式
Android中Glide加载圆形图片和圆角图片实例代码

展开阅读全文

没有更多推荐了,返回首页