自定义圆形图片

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

那么这里学习一下简单的制作圆形图片，主要运用 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 }

效果图：

圆形图片原图