你的位置:首页 > 操作系统

[操作系统]自定义圆形图片


圆形图片相必是项目开发中也是不少用的一个知识点吧。

那么这里学习一下简单的制作圆形图片,主要运用 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     // 设置shader16     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     // 设置shader29     paint.setShader(bitmapShader);30   }31 32   @Override33   public void draw(Canvas canvas) {34     // 以bitmap中心点为圆心,长宽最小边为半径画圆,将Bitmap填充到圆中35     canvas.drawCircle(width/2,height/2,radiu,paint);36   }37 38   //设置透明度39   @Override40   public void setAlpha(int i) {41     paint.setAlpha(i);42   }43 44   //设置颜色45   @Override46   public void setColorFilter(ColorFilter colorFilter) {47     paint.setColorFilter(colorFilter);48   }49 50   @Override51   public int getOpacity() {52     return PixelFormat.TRANSLUCENT;53   }54 55 56   @Override57   public int getIntrinsicHeight() {58     return width;59   }60 61   @Override62   public int getIntrinsicWidth() {63     return width;64   }65 }

CircleImageView

 

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   @Override11   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 则能更好的解决这些问题,待我有空再总结。。