Android CircleImageView自定义圆形与边框(圆形头像)详解

蜗牛、Z

已于 2022-08-22 22:13:27 修改

阅读量2.3k

点赞数

分类专栏： android 文章标签： android android studio ide

于 2022-08-22 20:06:08 首次发布

本文链接：https://blog.csdn.net/qq36246172/article/details/126472515

版权

android 专栏收录该内容

115 篇文章 6 订阅

订阅专栏

背景：

当前我们在使用图片过程中，都知道正常的ImageView是一个矩形RectF，RectF只需要知道两个对角坐标就可以确定该图形的大小

RectF rect=new RectF（int left,int top,int right,int bottom）;

四个参数可以确定四个角的坐标和矩形的长以及宽。

但是我们在使用过程中进行会看见圆形或者不规则图片，比如三角形等图片展示，这是如何实现的呢？

其实这些图片的基础都是矩形图片，如果我们用剪刀能在这边图片进行任意裁剪，那最后的图片就是我们想要显示的嘛？其实这个思路是正确的。

那我们如何来实现这个呢？这就需要我们重写画布(即对画布的裁剪)

说明：我们在使用过程中，只要是对画布的裁剪，如果你不放心，可以把裁剪过的ImageView的drawable区回来，设置在正常的显示即可。

这个时候我们可以测试，发现。最终裁剪的是画布

1.思路：裁剪

裁剪这边其实需要我们用一个路径，即Canvas裁剪需要有一个路径，只有知道尺寸，裁缝才会沿着路径剪出精美的画布。

这时，我们需要借助一个工具类Path

Path path = new Path();
path.addCircle(width / 2, height / 2, width / 2 , Path.Direction.CW);

我们通过path路径，绘制出一个圆出来

path.addCircle(cx,cy,radius , Path.Direction.CW);

cx,cy：代表坐标

radius ：圆的半径

Path.Direction.CW:代表绘制放心，是顺时针还是逆时针

注意：在做半径的时候，我们应该取宽或者高的最小值做半径

int radius=Math.min(width,height);

这时候圆已出来了，接下来就是裁剪

canvas.clipPath(path);

一定在绘制之前进行裁剪，否则裁剪会不生效。

这样，一个简单的裁剪就生成了

2.边框颜色

借用上图，左上角有一个圆，并有一个红色的边框。

我们知道作图是在画布上的，所以需要在画布sper以后，生成新画布我们再进行绘图。

绘图我们需要画笔Paint

Paint paint = new Paint();
paint.setColor(Color.RED);//画笔颜色
paint.setStrokeWidth(10);//画笔的笔尖宽
paint.setStyle(Paint.Style.STROKE);//样式
paint.setAntiAlias(true);//锯齿
path.addCircle(width / 2, height / 2, width / 2, Path.Direction.CCW);
canvas.drawPath(path, paint);

1.初始化一个画笔,设置好画笔的参数

2.我们依旧用path画圆，

3.最后通过画布进行绘制。

完整代码如下：

@Override
protected void onDraw(Canvas canvas) {

    int width = getMeasuredWidth();
    int height = getMeasuredHeight();
    Path path = new Path();
    path.addCircle(width / 2, height / 2, width / 2 , Path.Direction.CCW);
    canvas.clipPath(path);
    super.onDraw(canvas);

    //如果需要在图形上进行二次绘画，需要调用super后，也就是剪切后的画布已生成，再进行创作
    Paint paint = new Paint();
    paint.setColor(Color.RED);
    paint.setStrokeWidth(10);
    paint.setStyle(Paint.Style.STROKE);
    paint.setAntiAlias(true);
    path.addCircle(width / 2, height / 2, width / 2, Path.Direction.CCW);
    canvas.drawPath(path, paint);


}