一、背景前言
在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来实现圆形图片和圆角图片,这种方式在网上介绍的有,但是不推荐使用。