圆形图片相必是项目开发中也是不少用的一个知识点吧。
那么这里学习一下简单的制作圆形图片,主要运用 BitmapShader 类的知识来实现
一、首先,了解一下 BitmapShader 类
BitmapShader是Shader的子类,可以通过Paint.setShader(Shader shader)进行设置
看一下BitmapShader 的构造方法
BitmapShader bitmapShader = new BitmapShader(bitmap,TileMode, TileMode);
调用这个方法来产生一个画有一个位图的渲染器(Shader)
看参数
bitmap 即在渲染器内的位图
TileMode ,分为三类
1、CLAMP :如果渲染器超出原始边界范围,会复制范围内边缘染色,即拉伸
2、REPEAT :横向和纵向的重复渲染器图片,平铺,即重复
3、MIRROR :横向和纵向的重复渲染器图片,这个和REPEAT重复方式不一样,他是以镜像方式平铺,类似于湖上的物体和湖中的倒影
使用这个类的目的,就是把它的对象设置给Paint ,而Paint会根据TileMode进行绘制位图
二、实现圆形图片步骤
首先,ImageView和ImageButton需要图片,
有两种生成圆形图片的方法
1、自定义View继承ImageView、ImageButton
2、imageView.setXXX();
看下ImageView的设置图片方法:
1 ImageView imageView = new ImageView(this);
2
3 imageView.setImageDrawable(); // 参数为一个Drawable 对象
4 imageView.setImageResource(); // 参数为一个资源文件
5 imageView.setImageBitmap(); // 参数为一个Bitmap 对象
那么我们这里实现方法为 自定义继承Drawable类 ,运用 imageView.setImageDrawable(); 设置圆形图片
实现步骤:
1、新建一个类继承Drawable
添加成员变量
private Paint paint; //自定义必备画笔类
private Bitmap bitmap; //将Bitmap 转为Drawable ,
private int width; // 圆形图片的宽度
private int height; // 圆形图片的高度
private int radiu; // 圆形图片的半径
2、重写构造方法
1 public CircleImageView(Bitmap bitmap) {
2 this.bitmap = bitmap;
3 BitmapShader bitmapShader =
4 new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
5
6 paint = new Paint();
7 //抗锯齿 ,使得边缘光滑
8 paint.setAntiAlias(true);
9 //得到bitmap位图的宽高
10 width = bitmap.getWidth();
11 height = bitmap.getHeight();
12 //获取bitmap位图的宽高中的最小值,作为圆形图片的半径
13 radiu =Math.min(bitmap.getWidth(), bitmap.getHeight())/2;
14
15 // 设置shader
16 paint.setShader(bitmapShader);
17 }
3、重写其他必要方法
@Override
public void draw(Canvas canvas) {
// 以bitmap中心点为圆心,长宽最小边为半径画圆,将Bitmap填充到圆中
canvas.drawCircle(width/2,height/2,radiu,paint);
}
//设置透明度
@Override
public void setAlpha(int i) {
paint.setAlpha(i);
}
//设置颜色
@Override
public void setColorFilter(ColorFilter colorFilter) {
paint.setColorFilter(colorFilter);
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
@Override
public int getIntrinsicHeight() {
return width;
}
@Override
public int getIntrinsicWidth() {
return width;
}
完整代码:
1 package com.xqx.CircleImageView;
2
3 import android.graphics.*;
4 import android.graphics.drawable.Drawable;
5
6
7 public class CircleImageView extends Drawable {
8
9 private Paint paint;
10 private Bitmap bitmap;
11 private int width;
12 private int height;
13 private int radiu;
14
15 public CircleImageView(Bitmap bitmap) {
16 this.bitmap = bitmap;
17 BitmapShader bitmapShader =
18 new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
19
20 paint = new Paint();
21 //抗锯齿 ,使得边缘光滑
22 paint.setAntiAlias(true);
23 //获取bitmap位图的宽高中的最小值,作为圆形图片的
24 width = bitmap.getWidth();
25 height = bitmap.getHeight();
26 radiu =Math.min(bitmap.getWidth(), bitmap.getHeight())/2;
27
28 // 设置shader
29 paint.setShader(bitmapShader);
30 }
31
32 @Override
33 public void draw(Canvas canvas) {
34 // 以bitmap中心点为圆心,长宽最小边为半径画圆,将Bitmap填充到圆中
35 canvas.drawCircle(width/2,height/2,radiu,paint);
36 }
37
38 //设置透明度
39 @Override
40 public void setAlpha(int i) {
41 paint.setAlpha(i);
42 }
43
44 //设置颜色
45 @Override
46 public void setColorFilter(ColorFilter colorFilter) {
47 paint.setColorFilter(colorFilter);
48 }
49
50 @Override
51 public int getOpacity() {
52 return PixelFormat.TRANSLUCENT;
53 }
54
55
56 @Override
57 public int getIntrinsicHeight() {
58 return width;
59 }
60
61 @Override
62 public int getIntrinsicWidth() {
63 return width;
64 }
65 }
4、运用
1 package com.xqx.CircleImageView;
2
3 import android.app.Activity;
4 import android.graphics.*;
5 import android.os.Bundle;
6 import android.widget.ImageView;
7
8 public class MainActivity extends Activity {
9 private ImageView imageView;
10 @Override
11 public void onCreate(Bundle savedInstanceState) {
12 super.onCreate(savedInstanceState);
13 setContentView(R.layout.main);
14 imageView = (ImageView) findViewById(R.id.img);
15 Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.icon);
16 imageView.setImageDrawable(new CircleImageView(bitmap));
17 }
18 }
效果图:
圆形图片 原图
可以看出,生成的圆形图片坐标圆点为原图的中心点,而直径为原图长宽中较短的那一个的边的长度
---------------------------------------------------------------------------------------------
学习来源:CirleDrawImage圆角图片
在该基础上进行部分修改,思路或代码若有问题,欢迎指出。
总结此方法的缺点:
1、该方法无法缩放原图,若原图宽高不一致,则显示效果不佳,无法正常显示出较长边的部分内容
2、圆形图片的效果有一定的损耗,效果不佳
适用于对图片精美度要求不高的需求使用
自定义View继承ImageView 则能更好的解决这些问题,待我有空再总结。。