android-------custom controls (three)

 

The previous briefly described several methods in custom controls in Android. Today, a simple case is implemented through code.

 

Customize a pie chart

Example of custom control:

Here is an example of how to inherit View

public class CircularView extends View {


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

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

    private Paint mPaint;

    private RectF oval;

    public CircularView(Context context) {
        super(context);
        init();
    }

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

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

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

    private void init(){
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        oval = new RectF();
    }

    /****
     * Measure - The Measure process is to calculate the view size
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        // Extract the mode (one of three modes) according to the provided measurement value (format)
         // MeasureSpec has 3 modes: UNSPECIFIED, EXACTLY and AT_MOST, 
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);   // Take out the width measurement Mode 
        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);

        Log.i(TAG,"onMeasure---widthMode--->"+widthMode);
        switch (widthMode){
            case MeasureSpec.EXACTLY:

                break;
            case MeasureSpec.AT_MOST:

                break;
            case MeasureSpec.UNSPECIFIED:

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

    }


    /***
     * Determine the size of the View (this function is called when the view size changes.)
     *
     * width, height, last width, last height.
     * Just pay attention to the width (w), height (h), these two parameters are the final size of the View.
     * @param w
     * @param h
     * @param oldw
     * @param oldh
      */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        Log.i(TAG,"onSizeChanged");
    }

    /****
     * Layout-Layout process is used to set the position of the view displayed on the screen, onLayout is generally only used in custom ViewGroup
     *
     * The function to determine the layout is onLayout, which is used to determine the position of the child View, which is used in the custom ViewGroup, which calls the layout function of the child View.
     *
     * @param changed
     * @param left
     * @param top
     * @param right
     * @param bottom
     */
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        Log.i(TAG,"onLayout");
    }


    /***
     * The drawing-draw process is mainly used to display the view on the screen using the parameters obtained in the first two steps, and the entire view drawing work is completed here.
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.BLACK);
        // FILL fill, STROKE stroke, FILL_AND_STROKE fill and stroke 
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
         int width = getWidth(); // The width of custom controls in the layout 
        int height = getHeight();
        Log.i(TAG,"onDraw--->" + width + "--" + height);
        float radius = width /4;
        canvas.drawCircle(width /2,width/2,radius,mPaint); // Draw a circle 
        mPaint.setColor(getResources().getColor(R.color.colorAccent));
         // Used to define the shape of the arc and Size limit 
        oval.set(width/2 - radius,width/2 - radius, width/2 + radius, width/2 + radius);
         // Draw arc according to progress 
        canvas.drawArc(oval,270,120, true ,mPaint );
    }
}

 

 How to use in layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.zhangqie.customcontrol.demo1.CircularView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_margin="2dp"
        />

    
    <com.zhangqie.customcontrol.demo1.CircularView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        />
</LinearLayout>

 

I used two modes, fixed size and adaptive

 

The effect is shown in the figure: (the adaptive default is centered)

 

 

 

This article mainly introduces the basic usage of Android custom controls, and how to customize properties will be introduced later.