Android自定义ImageView的四个角圆角

发表于 分类于 本文字数： 2.2k
得到一个四个角可以自定义弧度的ImageView

使用重写ImageView的方式实现图片圆角，以下程序中注释内容中的字母与此图相匹配

创建MyImageView

    创建MyImageView类继承自AppCompatImageView，并默认添加了三个构造器，重写onDraw()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class MyImageView extends AppCompatImageView {

    public MyImageView(Context context) {
        super(context);
    }

    public MyImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MyImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

绘制图片显示区域

使用Path类绘制圆角矩形，并用Canvas.clipPath将其显示出来；用到的path方法：

  1. moveTo(); 移动下一次操作的起点位置
  2. lineTo(); 添加上一个点到当前点之间的直线到Path
  3. quadTo(); 二次贝塞尔曲线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
public class MyImageView extends AppCompatImageView {

    public MyImageView(Context context) {
        super(context);
    }

    public MyImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MyImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        /*
         * 百度关键词: Android开发Path详解
         * 演示方法:
         * - moveTo(); 移动下一次操作的起点位置
         * - lineTo(); 添加上一个点到当前点之间的直线到Path
         * - quadTo(); 二次贝塞尔曲线
         * */

        int topleft = 60;//左上角度
        int topright = 60;//右上角度
        int bottomleft = 0;//左下角度
        int bottomright = 0;//右下角度

        float width = this.getWidth();//图片的宽度
        float height = this.getHeight();//图片的高度

        Path path = new Path();//定义绘制路径类
        path.moveTo(topleft,0);//定义起始点，点A的位置
//        从点A绘制到当前点B
        path.lineTo(width - topright,0);
//        x1、y1确定图形右上角的点C，x2、y2定义右上角圆角结束点D，点B、C、D通过贝塞尔曲线画弧
        path.quadTo(width,0,width,topright);

//        从点D绘制到当前点E
        path.lineTo(width,height - bottomright);
//        x1、y1确定图形右下角的点F，x2、y2定义右下角圆角结束点G
        path.quadTo(width,height,width - bottomright,height);

//        从点G绘制到当前点H
        path.lineTo(bottomright,height);
//        x1、y1确定图形左下角的点I，x2、y2定义右下角圆角结束点J
        path.quadTo(0,height,0,height - bottomleft);

//        从点J绘制到当前点K
        path.lineTo(0,topleft);
//        x1、y1确定图形左上角的点L，x2、y2定义左上角圆角结束点A，形成闭环，路径绘制结束
        path.quadTo(0,0,topleft,0);

        canvas.clipPath(path);//绘制定义的路径

        super.onDraw(canvas);
    }
}

    注意：代码中的角度值是px值，getWidth和getHeight返回的也都是px值，如果需要设置dp值，必须手动转换，Android dp、px互转