android -------- custom control (3)

In the previous section, I briefly described several methods of custom control in Android. Today, I realize a simple case through code


Customize a pie chart

Custom control example:

Here is an example of how to inherit View

public class CircularView extends View {

     * The third parameter in a three parameter constructor is the default Style,
     * The default Style here refers to the default Style in the Theme used by the current Application or Activity, and it will take effect only when explicitly called,

    private final static String TAG = CircularView.class.getName();

    private Paint mPaint;

    private RectF oval;

    public CircularView(Context context) {

    public CircularView(Context context, AttributeSet attrs) {
        super(context, attrs);

    public CircularView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    public CircularView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);

    private void init(){
        mPaint = new Paint();
        oval = new RectF();

     * The Measure measure process calculates the size of the view
     * @param widthMeasureSpec
     * @param heightMeasureSpec
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        //Extract the mode (one of three modes) according to the measurement value (format) provided
        //MeasureSpec has three modes: unspecified, efficient and at? Most,
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);  //Take out the measurement mode of width
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);//Get the size of the View (the exact value of the width)

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        switch (widthMode){
            case MeasureSpec.EXACTLY:

            case MeasureSpec.AT_MOST:

            case MeasureSpec.UNSPECIFIED:

        Log.i(TAG,"onMeasure--widthSize--->"+ widthSize);
        Log.i(TAG,"onMeasure--heightMode-->"+ heightMode);


     * Determines the size of the View (this function is called when the View size changes. )
     * Width, height, previous width, previous height.
     * Just focus on width (w) and height (h). These two parameters are the final size of View.
     * @param w
     * @param h
     * @param oldw
     * @param oldh
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

     * The Layout layout process is used to set the position of the view in the screen. onLayout is generally only used in the custom ViewGroup
     * The function to determine the layout is onLayout, which is used to determine the location of the child View. It will be used in the custom ViewGroup. It calls the layout function of the child View.
     * @param changed
     * @param left
     * @param top
     * @param right
     * @param bottom
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

     * The drawing drawing process is mainly used to display the view on the screen by using the parameters obtained in the first two steps, and the whole drawing work is completed here
     * @param canvas
    protected void onDraw(Canvas canvas) {
        // FILL, STROKE, FILL and STROKE
        int width = getWidth();//Width of custom controls in layout
        int height = getHeight();
        Log.i(TAG,"onDraw--->" + width + "--" + height);
        float radius = width /4;
        canvas.drawCircle(width/2,width/2,radius,mPaint);//Circle drawing
        //Limits for the shape and size of arcs used to define
        oval.set(width/2 - radius,width/2 - radius, width/2 + radius, width/2 + radius);
        //Draw an arc according to the progress

How to use in layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    android:orientation="vertical" android:layout_width="match_parent"



I use two modes, fixed size and adaptive


The effect is as follows: (the adaptive default is centered)




This article mainly introduces the basic usage of Android custom control, and later describes how to customize properties.

Tags: Android xml encoding

Posted on Thu, 26 Mar 2020 12:49:53 -0400 by pdub56