简单实现圆形ImageView

两种方法实现CircleImageView

1、使用BitmapShader

: BitmapShader是Paint的5个渲染器之一&＃xff0c;通过setShader (Shader shader)方法设置给Paint对象

我们看看BitmapShader的构造方法&＃xff1a;

public BitmapShader (Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)

在安卓api中这样解释道&＃xff1a;

Call this to create a new shader that will draw with a bitmap.

说明这个BitmapShader是使用构造器中的bitmap作为内容&＃xff0c;渲染效果就是paint对象画过的区域变为bitmap的对应区域&＃xff0c;你可以想想小时候那种笔写字了看不到&＃xff0c;要用紫光还是什么光照到才可以看到那种效果&＃xff0c;不过这里可以理解为&＃xff0c;照到了就不会消失的&＃xff0c;因为紫光&＃xff08;paint&＃xff09;走过了

这个我仅仅复制粘贴

static final Shader.TileMode CLAMP: 边缘拉伸.
static final Shader.TileMode MIRROR&＃xff1a;在水平方向和垂直方向交替景象, 两个相邻图像间没有缝隙.
Static final Shader.TillMode REPETA&＃xff1a;在水平方向和垂直方向重复摆放,两个相邻图像间有缝隙缝隙.

下面是代码&＃xff1a;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.widget.ImageView;import com.xxhui.circleiamgeviewdemo.R;/*** Created by xxhui on 2016/8/6.* 这个是通过bitmapShader实现*/
public class CircleImageViewByBitmapShader extends ImageView {private int width;private int height;private int radius;public CircleImageViewByBitmapShader(Context context) {super(context);}public CircleImageViewByBitmapShader(Context context, AttributeSet attrs) {super(context, attrs);}&＃64;Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);width &＃61; w;height &＃61; h;radius &＃61; Math.min(width, height) / 2;}&＃64;Overrideprotected void onDraw(Canvas canvas) {canvas.drawColor(Color.GREEN);//设置画布背景方便观察Bitmap bitmap &＃61; BitmapFactory.decodeResource(getResources(), R.mipmap.photo);//夹在要画的图片&＃xff0c;这里从资源文件&＃xff0c;从其他地方也是可以的&＃xff0c;比如sd卡BitmapShader bitmapShader &＃61; new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);Paint paint &＃61; new Paint();paint.setAntiAlias(true);paint.setShader(bitmapShader);//给画笔设置渲染器&＃xff0c;这里画笔画过的面积就是渲染器里面的图片canvas.drawCircle(width / 2, height / 2, radius, paint);//这里画一个实心圆&＃xff0c;就是将实心圆大小的渲染器图片用画笔画在画布上&＃xff0c;说的好抽象&＃xff0c;自己加自己理解吧&＃xff0c;这是我的理解//canvas.drawRect(0,0,width,height,paint);}
}


2、使用Xfermode

这个主角还是paint

我们通过setXfermode给paint设置一个Xfermode

这里用到一个类PorterDuffXfermode

这里来看看构造方法如何

public PorterDuffXfermode (PorterDuff.Mode mode)

那么我们就要了解一下PorterDuff.Mode&＃xff0c;这里要了解两个基本的就是SRC和DST因为其他看意思就能推测出来啦&＃xff0c;DST先画的部分&＃xff0c;SRC后画的部分&＃xff0c;听说常用的是DET_IN
和SRC_IN&＃xff0c;我们看图解释一下这两个&＃xff0c;其他也是差不多或者看图理解一下。

SRC_IN:因为是in&＃xff0c;两个图形取交集&＃xff0c;只取得到SRC&＃xff08;后画&＃xff09;的部分
DET_IN:取交集&＃xff0c;只取得到DET&＃xff08;先画&＃xff09;的部分

说完基本知识了&＃xff0c;这里说说我的&＃xff0c;基本思路&＃xff08;思路肯定很多的&＃xff0c;自己实践的时候是什么就什么吧&＃xff09;

我这里我用到了SRC_IN&＃xff0c;这就涉及到取交集了&＃xff0c;先用一个canvas&＃xff0c;先画一个圆&＃xff0c;后画整张bitmap&＃xff0c;取交集&＃xff0c;得到bitmap的后画部分&＃xff0c;想想是不是圆形的bitmap&＃xff1f;
得到了圆形的bitmap了&＃xff0c;这个要真正放到ondraw方法的canvas上面&＃xff0c;毕竟哪个canvas才是要显示的&＃xff0c;哈哈哈&＃xff0c;就到这里啦&＃xff0c;上代码&＃xff0c;看看设置Xfernode的时机&＃xff01;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.widget.ImageView;import com.xxhui.circleiamgeviewdemo.R;/*** Created by xxhui on 2016/8/6.*/
public class CircleImageViewByXfermode extends ImageView {private int width;private int height;private int radius;public CircleImageViewByXfermode(Context context) {super(context);}public CircleImageViewByXfermode(Context context, AttributeSet attrs) {super(context, attrs);}&＃64;Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);width &＃61; w;height &＃61; h;radius &＃61; Math.min(width, height) / 2;}&＃64;Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.BLUE);//设置画布背景方便观察Bitmap bitmap &＃61; BitmapFactory.decodeResource(getResources(), R.mipmap.photo);//夹在要画的图片&＃xff0c;这里从资源文件&＃xff0c;从其他地方也是可以的&＃xff0c;比如sd卡Bitmap out &＃61; Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(), Bitmap.Config.ARGB_8888);Canvas canvas1 &＃61; new Canvas(out);Paint paint &＃61; new Paint();paint.setAntiAlias(true);canvas1.drawCircle(width/2,height/2,radius,paint);//画一个圆&＃xff0c;辅助作用&＃xff0c;应为这是先画的&＃xff01;//canvas1.drawCircle(0,0,radius,paint);//这个注视你可以尝试去掉&＃xff0c;去掉你会发现&＃xff0c;这是取先画的全部操作的并集&＃xff0c;此时辅助区域变为这个并集paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//DST先画&＃xff0c;SRC后画&＃xff0c;SRC_IN是取并集中属于后画的&＃xff08;有点拗口自己理解&＃xff09;canvas1.drawBitmap(bitmap,0,0,paint);//从这可以看出&＃xff0c;先画&＃xff08;圆&＃xff09;和后画&＃xff08;bitmap&＃xff09;的交集为圆&＃xff0c;而刚好圆属于整合bitmap&＃xff0c;此时只画圆部分的bitmap&＃xff0c;而不是整个bitmapcanvas.drawBitmap(out,0,0,null);//最后只是简单的将一个为圆的bitmap画上去而已//canvas.drawBitmap(out,0,0,new Paint());//这个可以发现&＃xff0c;其实只要不是带有Xfermode的画笔就可以了}
}

其实放入时机就是先画和后画中间

效果图&＃xff1a;