在工作中我们经常会用到圆形的图片,但是大部分的图片都是方形的,这就需要工程师去自定义圆形图片,好的圆形图片库有很多,大家可以在github或者泡网等网站上搜一下。今天要说的就是简单几行代码搞定圆形图片,既然是简单当然就没有考虑各种花哨的属性,以及可扩展性。
首先我的原图是一张盛开的方形的花朵:
下面我们就来用两种方式实现简单几行代码搞定圆形图片,且看方式一:
package com.ebanswers.iqcore;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
* Created by air on 2017/8/24.
*/
public class CirImageView extends ImageView {
private int mWidth, mHeight;
public CirImageView(Context context) {
this(context, null);
}
public CirImageView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CirImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;//获取宽度
mHeight = h;//获取高度
setScaleType(ScaleType.CENTER_CROP);//设置缩放类型
}
@Override
protected void onDraw(Canvas canvas) {
/*
*super.onDraw(canvas);以上的代码部分即为关键所在
*思路是:在图片绘制之前先将画布裁剪成圆形的,然后绘制在该画布上的图片不就是圆的了吗?
*注意一定要在绘制之前进行裁剪操作,如果在 super.onDraw(canvas);之后进行则无效果
*/
Path path = new Path();
path.addCircle(mWidth / 2, mHeight / 2, Math.min(mWidth / 2, mHeight / 2), Path.Direction.CCW);
canvas.clipPath(path);
super.onDraw(canvas);
}
}
看看运行效果如何:
再来看看方式二,利用PorterDuff.Mode来实现:
package com.ebanswers.iqcore;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
* Created by air on 2017/8/24.
*/
public class CirImageViewTwo extends ImageView {
private Paint mPaint;
private int mWidth, mHeight;
public CirImageViewTwo(Context context) {
this(context, null);
}
public CirImageViewTwo(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CirImageViewTwo(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
setScaleType(ScaleType.CENTER_CROP);
}
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//设置抗锯齿
mPaint.setDither(true);//设置防止抖动
mPaint.setAlpha(0);//设置Alpha等于0
mPaint.setStyle(Paint.Style.FILL);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//在新的layer上进行绘制
int id = canvas.saveLayer(0,0,mWidth,mHeight,null);
canvas.drawColor(Color.WHITE);
canvas.drawCircle(mWidth / 2, mHeight / 2, Math.min(mWidth / 2, mHeight / 2), mPaint);
canvas.restoreToCount(id);
}
}
运行效果:
眼尖的朋友会发现圆形图片背景是是白色的,没错因为canvas.drawColor(Color.WHITE);设置了颜色为白色,至于PorterDuff.Mode的讲解可以看看我的另一篇文章。本篇仅仅介绍了最简单的实现方式,只作为一种思路的记录,可以基于此完善扩展。