1. 程式人生 > >Glide 圓形圖片和圓角圖片的實現

Glide 圓形圖片和圓角圖片的實現

一、背景前言

在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載入圓形圖片和圓角圖片例項程式碼