Glide 圓形圖片和圓角圖片的實現
阿新 • • 發佈:2018-11-05
一、背景前言
在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來實現圓形圖片和圓角圖片,這種方式在網上介紹的有,但是不推薦使用。