Foundation of Android custom controls (1) — geometry drawing

Time:2021-7-3

Although I have a few years of development experience, but the custom control together, little research, shame… When used is Baidu search, copy and paste. Working hours are tight. I always want to finish it as soon as possible( It’s all excuses. If you want to learn, there will always be time

As an Android Developer, it’s too humiliating to say that custom controls can’t be written. I decided to start a little bit and use my own custom controls in the future!!! Come on~~~

Enter the topic: this blog reference article:Qi Jian Da Shen blog

1、 Let’s talk about the necessary paint and canvas for custom controls

In short, it’s more than paper (canvas). Paint is pen, canvas is paper. With pen and paper, you can show your talent of painting~

Several basic setting functions of paint

  • paint.setAntiAlias(true);// The function of anti aliasing is to soften the edge and eliminate aliasing
  • paint.setColor(Color.RED);  // Set brush color
  • paint.setStyle(Style.FILL);// Set fill style
  • paint.setStrokeWidth(30);// Set brush width
  • paint.setShadowLayer(10, 15, 15, Color.GREEN);// Set shadow

Background setting of canvas

  • canvas.drawColor(Color.BLUE);
  • canvas.drawRGB(255, 255, 0);   // Both functions are used to set the background color.

2、 Code implementation

  1. Create a new project and a new class: MyView inherits from view
Foundation of Android custom controls (1) -- geometry drawingFoundation of Android custom controls (1) -- geometry drawing

1 package com.matai.betheltest;
 2 
 3 import android.content.Context;
 4 import android.graphics.Canvas;
 5 import android.graphics.Color;
 6 import android.graphics.Paint;
 7 import android.view.View;
 8 
 9 public class MyView extends View {
10 
11     private static final String TAG = "MyView";
12 
13     private Context context;
14 
15     public MyView(Context context) {
16         super(context);
17         this.context=context;
18     }
19 
20 // rewrite OnDraw function for drawing
21    @Override
22     protected void onDraw(Canvas canvas) {
23         super.onDraw(canvas);
24 
25        Paint paint=new Paint();// Set brush
26        paint.setAntiAlias(true);// Anti aliasing function (edge softening, anti aliasing, etc.)
27        paint.setColor(Color.RED);  // Set brush color
28        paint.setStyle(Paint.Style.FILL);// Set fill style style style.fill/style.fill_ AND_ STROKE/Style.STROKE
29        paint.setStrokeWidth(5);// Set brush width
30        paint.setShadowLayer(2,2,2,Color.GREEN);// Set shadow
31 
32        canvas.drawRGB(255,255,255);// Set canvas background color
33 // draw a circle
34        canvas.drawCircle(190, 200, 150, paint);
35    }
36 }

View Code

2. Activity layout file settings

Foundation of Android custom controls (1) -- geometry drawingFoundation of Android custom controls (1) -- geometry drawing

View Code

3. Activity code

Foundation of Android custom controls (1) -- geometry drawingFoundation of Android custom controls (1) -- geometry drawing

1 public class RobotActivity extends AppCompatActivity {
 2 
 3     private static final String TAG = "RobotActivity";
 4 
 5     private FrameLayout frameLayout;
 6 
 7 // draw geometry
 8     private MyView myView;
 9 
10     @Override
11     protected void onCreate(Bundle savedInstanceState) {
12         super.onCreate(savedInstanceState);
13         setContentView(R.layout.activity_robot);
14 
15         frameLayout=findViewById(R.id.frameLayout);
16 
17         myView=new MyView(this);
18 
19         frameLayout.addView(myView);
20     }

View Code

Results of operation:

     

 

3、 Realization of various geometric figures

1. Draw line: canvas. DrawLine (10,10,50,60, paint); Parameter Description:

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

Startx: start drawing the X coordinate of the line

Starty: start drawing the Y coordinate of the line

Stopx: the X coordinate at the end of the line

Starty: the Y coordinate at the end of the line

      Paint: Brush

design sketch:

     

 

 

2. Draw multiple lines: drawlines (float [] PTS, @ nonnull paint paint) parameter description:

PTS: set of points, each two points form a straight line, organized as {x1, Y1, X2, Y2, X3, Y3,…}

       float []pts={10,10,100,100,200,200,400,400};
       canvas.drawLines(pts, paint);

design sketch:

     

 

 

3. Drawing point (float x, float y, @ nonnull paint paint) parameter description:

x: X coordinate

y:   Y coordinate

       canvas.drawPoint(40,50,paint);

Effect picture: (the point is very big because the width of my brush is 50)

     

 

 

4. Multiple points:

Drawpoints (float [] PTS, @ nonnull paint paint) parameter description: it is the same as drawing two straight lines

drawPoints(float[] pts, int offset, int count,@NonNull Paint paint) this method has two additional parameters

Offset: the number of skipped values in PTS array, not the number of points! One point is two numerical values;

Count: the number of values involved in drawing, which refers to the number of values in PTS [] instead of the number of points, because a point is two values

 

 

 

The code is: float [] PTS = {10,10100100200400400};   canvas.drawPoints(pts, 0, 8, paint);( Draw all without skipping any point) effect picture:

 

       

 

 

 

 

The code is: float [] PTS = {10,10100100200400400};   canvas.drawPoints(pts, 2, 4, paint); ( Skip the first point, do not draw the last point) rendering:

 

    

 

 

The code is: float [] PTS = {10,10100100200400400};   canvas.drawPoints(pts, 4, 4, paint); ( Skip the second point, do not spend the last point and the first point) rendering:

    

 

 

5. Rectf and rect

The most common construction method is Rect (int left, int top, int right, int bottom)

canvas.drawRect(10, 10, 100, 100, paint);// Direct construction   design sketch:

   

 

 

Another construction method is to pass in rectf or rect rectangle variable: drawRect (rectf rect, paint paint) or drawRect (rect R, paint paint)

      Use: rectf rect = new rectf (120, 10, 210, 100);
                canvas.drawRect(rect, paint);// Use rectf to construct renderings:

    

 

 

6. Rounded rectangle

Parameter description of void drawroundrect (rectf rect, float Rx, float ry, paint paint)

        Rectf rect: rectangle to draw
        Float Rx: the x-axis radius of the ellipse that generates the fillet
        Float ry: Y-axis radius of ellipse to generate fillet

        Use: rectf rect = new rectf (100, 10, 300, 100);
                                       canvas.drawRoundRect(rect, 20, 10, paint);           design sketch:

      

 

 

7. Ellipse: ellipse is generated according to rectangle, the length of rectangle is ellipse, the width of X axis is y

 

         void drawOval (RectF oval, Paint paint)   Parameter Description:
         Rectf oval: rectangle used to generate ellipses

         Use: rectf rect = new rectf (100, 10, 300, 100);
                   canvas.drawOval(rect, paint);// Draw an ellipse with the same rectangle   design sketch:

                   

 

 

8. Arc: arc is a part of ellipse, and ellipse is generated according to rectangle, so arc is also generated according to rectangle.

 

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

       Rectf oval: rectangle to generate ellipse
       Float startangle: the angle at which the arc starts, 0 degrees in the positive direction of the X axis
       Float sweetangle: the angle of arc duration
       Boolean usecenter: whether there are two sides of the arc, true, two sides, false, only one arc

 

 

       Use: rectf rect1 = new rectf (100, 10, 300, 100); canvas.drawArc(rect1, 0, 90, true, paint);( Edge, left)
                 RectF rect2 = new RectF(400, 10, 600, 100); canvas.drawArc(rect2, 0, 90, false, paint);( Only arcs, right)

      

 

 

 

 

 

 

 

 

       Record learning, why not collect the original blog? Because I wrote it all over again   Impressive, huh