[Custom View] study notes

door

The current UI and open source libraries achieve most of the effects, but the custom View can meet the needs more flexibly

1. layout
2. draw
3. Touch feedback
   

One: Combination of Canvas and Paint

1. In short, Canvas draw shapes (range cropping, geometric deformation), Paint plus special effects (color, style, corner shape, etc.)

1. All draw-first methods under the Canvas class, such as drawCircle() and drawBitmap()
2. Several of the most commonly used methods of the Paint class
   Paint.setStyle(Style style) Set the drawing mode
   Paint.setColor(int color) Set the color
   Paint.setStrokeWidth(float width) Set the line width
   Paint.setTextSize(float textSize) Set the text size
   Paint. setAntiAlias(boolean aa) Set anti-aliasing switch

2. Sample

1. Draw a circle
   1) Graph
   
   2) Code

class CircleView:View {
    
    
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)

    var paint: Paint = Paint()

    protected override fun onDraw(canvas: Canvas) {
    
    
        super.onDraw(canvas)

        // 绘制一个圆 对应，圆心x，y坐标及半径画笔
        canvas.drawCircle(300F, 300F, 200F, paint)
    }
    
}

2. Canvas.drawColor(@ColorInt int color) color fill
   1) drawColor(Color.BLACK) will 整个区域dye and overwrite the original content;
   2) drawColor(Color.parse("#88880000") will add to the original drawing effect A layer of translucent red mask.
   3) Set the filling style, there are three types, solid line + line

    protected override fun onDraw(canvas: Canvas) {
    
    
        super.onDraw(canvas)

        paint.setStyle(Paint.Style.STROKE)
        paint.setColor(Color.BLUE)
        // 绘制一个圆
        canvas.drawCircle(300F, 300F, 200F, paint)
    }

3. Draw squares, draw points, and draw lines

Batch

process drawPath (Path path, Paint paint) to draw custom graphics
This method is a bit complicated and needs to be expanded.

The previous methods are all drawing a given figure, and drawPath() can draw a custom figure. When the graphics you want to draw are special and cannot be done with the previous methods, you can use drawPath() to draw.

drawPath(path) This method draws graphics by describing the path, and its path parameter is the object used to describe the graphics path. The type of path is Path, and its usage is roughly as follows:

public class PathView extends View {

Paint paint = new Paint();
Path path = new Path(); // 初始化 Path 对象

......

{
  // 使用 path 对图形进行描述（这段描述代码不必看懂）
  path.addArc(200, 200, 400, 400, -225, 225);
  path.arcTo(400, 200, 600, 400, -180, 225, false);
  path.lineTo(400, 542);
}

@Override
protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  
  canvas.drawPath(path, paint); // 绘制出 path 描述的图形（心形），大功告成
}

}
Java

Path can describe straight lines, quadratic curves, cubic curves, circles, ellipses, arcs, rectangles, and rounded rectangles. Combining these graphics can describe many complex graphics. Now I will talk about how to describe these graphics in detail.

Path has two types of methods, one is to directly describe the path, and the other is auxiliary setting or calculation.
Awesome