圆形图片相必是项目开发中也是不少用的一个知识点吧。
那么这里学习一下简单的制作圆形图片,主要运用 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 则能更好的解决这些问题,待我有空再总结。。