preface

Custom views are always tied to onDraw, and onDraw involves Paint and Canvas, so that’s what we’re talking about here.

  • Android Custom View directory

Paint

Main methods:

paint.setColor(Color.RED); // Set the brush color
paint.setAntiAlias(true);// Anti-aliasing function
paint.setStyle(Style.FILL);// Set the fill style
paint.setStrokeWidth(30);// Set the brush width
paint.setTextSize();// Set the font size
Copy the code
  • SetStyle mainly includeFILL,STROKE,FILL_AND_STROKE

So let’s see what happens

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(200.300.100, paint);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(500.300.100, paint);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawCircle(800.300.100, paint);
Copy the code

FILL and FILL_AND_STROKE look the same, right? We’re going to set strokeWidth to 100

STROKE
FILL_AND_STROKE
strokeWidth/2

Canvas

A straight line

drawLine(float startX, float startY, float stopX, float stopY,Paint paint)

         paint.setColor(Color.RED);
         canvas.drawLine(100.100.200.300, paint);
Copy the code

drawLines(float[] pts, Paint paint)

The PTS length must be a multiple of 4

        paint.setColor(Color.BLACK);
        float[] pts = {50.50.150.50.150.50.150.150.150.150.250.150.250.150.250.250};
        canvas.drawLines(pts, paint);
Copy the code

Note that 50, 50, 150, 50 is the first line, 150, 50, 150 is the second line, 150, 150, 250 is the third line, and 250, 150, 250, 250 is the fourth line

drawLines(float[] pts, int offset, int count,Paint paint)

Offset means the starting position. Count means how many points are drawn from the starting position. It must be a multiple of 4

        float[] pts = {50.50.150.50.150.50.150.150.150.150.250.150.250.150.250.250};
        paint.setColor(Color.BLACK);
        canvas.drawLines(pts, 0.16, paint);
Copy the code

That is, the effect is the same as in the second step. We change offset to 4, count to 12, and the effect is as shown in the following figure

rectangular

drawRect (float left, float top, float right, float bottom, Paint paint)

canvas.drawRect(100, 200, 400, 800, paint);

The coordinate points it represents are shown in the figure below

drawRect (RectF rect, Paint paint) drawRect (Rect r, Paint paint)

Left, top, right and bottom are the same as the first one

    public Rect(int left, int top, int right, int bottom) {
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
    }
Copy the code
    public RectF(float left, float top, float right, float bottom) {
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
    }
Copy the code

The rounded rectangle

drawRoundRect(RectF rect, float rx, float ry, Paint paint)

Where, rx represents the radius of X-axis fillet, ry represents the radius of Y-axis fillet

        RectF rectF = new RectF(100.200.400.800);
        canvas.drawRoundRect(rectF, 100.200, paint);
Copy the code

The renderings are as follows

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint)

Same rectangle, rx, ry same method 1

circular

drawCircle(float cx, float cy, float radius, Paint paint)

Where, cx is the X-axis coordinates of the center of the circle, cy is the Y-axis coordinates of the center of the circle, and RADIUS is the radius

 canvas.drawCircle(100.200.50, paint);
Copy the code

The ellipse

DrawOval (RectF OVAL, Paint Paint) drawOval(float left, float top, float right, float bottom, Paint Paint) is the same as rectangle

        RectF rectF = new RectF(100.200.400.800);
        canvas.drawOval(rectF, paint);
Copy the code

arc

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)

drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, Paint paint)

StartAngle The Angle at which the arc begins, 0 degrees in the positive X direction

SweepAngle Continuous Angle of the arc

Whether the useCenter has two sides of the arc, true closed, false non-closed

        paint.setStyle(Paint.Style.STROKE);

        RectF rect = new RectF(50.100.200.400);
        canvas.drawArc(rect, 0.90.true, paint);

        
        RectF rectF = new RectF(100.200.400.800);
        canvas.drawArc(rectF, 0.90.false, paint);
Copy the code

The sample

I don’t want to post code here, but mainly use lines, rectangles and circles, plus some position calculations

Resources: Custom control drawing part 1: Overview and basic geometry drawing

Your recognition is the motivation for me to keep updating my blog. If it is useful, please give me a thumbs-up. Thank you