No48- [original] - Self-defined Custom View of the circular progress bar

Article Directory

Foreword

Custom View achieve a variety of types, were inherited from the View is fully customizable, inherited from the prior control (e.g., the ImageView) to achieve a particular effect, achieved ViewGroup layout class inherits from this which involves measuring and layout View, View, drawing, touch event handling, animation.

The realization of custom circular progress bar, I am using inheritance LinearLayout way to achieve the final effect is as follows:

my thoughts

To achieve this simple effect, my idea is that the circle_progress_view as a background, the progress achieved with Paint draw an arc, as a sub-assembly. As long as the current schedule changes, redraw it.

circle_progress_view.xml

xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_alignParentRight="true"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/cpv_iv_icon"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/ic_download" />

    <TextView
        android:id="@+id/cpv_tv_des"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="下载" />

</LinearLayout>

About onDraw and dispatchDraw

Drawing View content itself, call View.onDraw method; draw your own children, it is achieved by dispatchDraw.

Drawing View component of the first to call the draw method to draw the background, after the unfinished background, draw method calls onDraw, then call dispatchDraw method, draw the distribution sub-assemblies.

Mentioned above, as the background circle_progress_view, arcuate progress bar as a subcomponent, so long as the drawing of the arc added in the progress bar on the line dispatchDraw method, very simple!

CircleProgressView.java


Copyright * (C) 1996-2016 YONGF Inc.All Rights Reserved. 
* Scott Wang blog.54yongf.com | blog.csdn.net/yongf2014 
* File Name: CircleProgressView 
* Description: 
* Change History: 
* The version number of the dates overview related operations 
* 1.0 Scott Wang 16-4-21 new: the Create 
* /

package com.yongf.circleprogressview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * ${description}
 *
 * @author Scott Wang
 * @version 1.0, 16-4-21
 * @see
 * @since 1.0
 */
public class  extends LinearLayout {

    private ImageView mIcon;
    private TextView mDesc;

    private boolean mProgressEnable = true;
    private long mMax = 100;
    private long mProgress;

    public (Context context) {
        this(context, null);
    }

    public (Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

        View view = View.inflate(context, R.layout.circle_progress_view, this);

        mIcon = (ImageView) view.findViewById(R.id.cpv_iv_icon);
        mDesc = (TextView) view.findViewById(R.id.cpv_tv_des);
    }

    / ** 
     * Set the progress of the background image 
     * 
     * @param resId 
     * / public void the setIcon ( int resId) {         mIcon.setImageResource (resId);     }
       



    / ** 
     * Set the progress bar custom tip text 
     * 
     * @param desc 
     * / public void setDesc (String desc) {         mDesc.setText (desc);     }
       



    / ** 
     * Set the progress bar display turned off by default 
     * 
     * @param progressEnable 
     * / public void setProgressEnable ( Boolean progressEnable) {         mProgressEnable = progressEnable;     }
       



    / ** 
     * Set the progress of the maximum value, the default is 100 
     * 
     * @param max 
     * / public void setMax ( Long max) {         Mmax = max;     }
       



    / ** 
     * Set the current progress 
     * 
     * @param Progress 
     * / public void the setProgress ( Long Progress) {         mProgress = Progress;
       


        invalidate();
    }

    @Override protected void dispatchDraw (the Canvas Canvas) { Super .dispatchDraw (Canvas);              // draw the background
       
        

        IF (mProgressEnable) { 
            RectF Oval = new new RectF (mIcon.getLeft (), mIcon.getTop (), mIcon.getRight (), mIcon.getBottom ());                    // background image to draw a rectangle based on a float startAngle = - 90 ;              // - 90 is the equivalent of "True north"
            

            a float sweepAngle mProgress * = 360 .F / Mmax;             // angle of rotation

            Boolean useCenter = to false ;           // whether to keep both sides of the radius

            Paint = the Paint new new the Paint (); 
            paint.setColor (Color.BLUE);                  // blue brush
             paint.setStyle (Paint.Style.STROKE); 
            paint.setStrokeWidth ( . 5 );                 // set the thickness of the brush, i.e. the progress bar thickness
             paint.setAntiAlias ( to true );            // anti-aliasing // begin drawing an arc to indicate the progress of             canvas.drawArc (oval, startAngle, sweepAngle, useCenter, paint);
            


        }
    }
}

activity_main.xml

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <com.yongf.circleprogressview.CircleProgressView
        android:id="@+id/cpv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" " />
</RelativeLayout>

MainActivity.java

package com.yongf.circleprogressview;

import android.os.AsyncTask;
import android.os.Bundle;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final CircleProgressView cpv = (CircleProgressView) findViewById(R.id.cpv);
        cpv.setDesc("下载");
        cpv.setIcon(R.drawable.ic_pause);

        cpv.setProgressEnable(true);
        cpv.setMax(100);

        cpv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new AsyncTask<Void, Integer, Void>() {
                    int i = 0;

                    @Override
                    protected Void doInBackground(Void... params) {
                        while (true) {
                            publishProgress(i);
                            SystemClock.sleep(100);
                            if (i >= 100) {
                                break;
                            }
                            i++;
                        }
                        return null;
                    }

                    @Override
                    protected void onProgressUpdate(Integer... values) {
                        Integer value = values[0];
                        cpv.setProgress(i);
                        cpv.setDesc(i + "%");
                    }
                }.execute();
            }
        });
    }
}

thank

Thank you for visiting my personal blog friends, if you feel your site has a search of help for the problem, and feel for the site also satisfied, the top of it, and hope you will share the site to your friends! In this heartfelt thanks to you! :)

Original: Big Box No48- [original] - Self-defined Custom View of the circular progress bar