以前在需要用圆形的ImageView时,通常的做法是利用Xfermode或者BitmapShader来实现的,要写的代码比较多。
如果我的这种方式来实现一个圆形的ImageView核心代码就4行。
原理如下图,就是给一个正常的ImageView加上一层遮罩而已,不过这种方式会让部分区域过度绘制。
重写ImageView的onDraw方法:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int radius = Math.min(getWidth(), getHeight()) / 2;
mPath.addRect(0, 0, getWidth(), getHeight(), Path.Direction.CCW);
mPath.addCircle(getWidth() / 2, getHeight() / 2, radius, Path.Direction.CW);
canvas.drawPath(mPath, mPaint);
}
首先创建一个Path 然后添加一个ImageView大小矩形路径,然后添加一个圆形的路径,最后绘制出这个Path。绘制用的Paint的颜色设置成ImageView的背景颜色就好。
这里最关键的是Path.Direction这个参数,Path.Direction表示Path的闭合方向,有CCW和CW两个可取的值,CCW表示逆时针方向闭合,CW表示顺时针方向闭合。
借用两张图来感受下:
那么实现圆角的ImageView也是很简单的:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
RectF rectf = new RectF(0, 0, getWidth(), getHeight());
mPath.addRect(rectf, Path.Direction.CCW);
mPath.addRoundRect(rectf, mRadius, mRadius, Path.Direction.CW);
canvas.drawPath(mPath, mPaint);
}
Path有个addRoundRect的方法就是添加一个圆角的矩形。
最终效果如下,把ImageView父布局颜色改成白色,这样就看起来一点也不违和感了。
全部代码已上传到Github