简单实现一个自定义view的ProgressBar

文章开头直接给出最终效果，一个很简单的圆形progressBar：

很简单的一个实现效果，如果是初学自定义view的小白可以跟着一起起撸一遍这个简单效果：
首先是自定义的属性的提前准备，这块应该没什么难点，在values文件夹下面创建一个attrs的xml文件，填入自己设置的自定义属性：

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="CustomProgressBar">        <attr name="roundProgressColor" format="color"></attr>        <attr name="roundColor" format="color"></attr>        <attr name="roundWidth" format="dimension"></attr>        <attr name="textsize" format="dimension"></attr>        <attr name="max" format="integer"></attr>        <attr name="textColor" format="color"></attr>        <attr name="textShow" format="boolean"></attr>        <attr name="style">            <enum name="Stroke" value="0"></enum>            <enum name="Filee" value="1"></enum>        </attr>    </declare-styleable></resources>

这里设置的自定义属性有点多啊，大致的意思大家应该都能看懂，我这就不一一述说了，后面敲代码时会有注释的。
直接上自定义view的代码了：

  private int roundProgressColor;//外围进度走时变化的颜色    private int roundColor;//初始化时圆本来的颜色    private int textColor;//中间文字的颜色    private float textSize;//文字的大小    private float roundWidth;//外围的宽    private int max;//最大，这里直接设置为100    private boolean textShow;//是否显示文字    private Paint paint;    public CustomProgressBar(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        paint=new Paint();        TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar);        roundProgressColor=typeArray.getColor(R.styleable.CustomProgressBar_roundProgressColor,Color.YELLOW);        roundColor=typeArray.getColor(R.styleable.CustomProgressBar_roundColor,Color.YELLOW);        textColor=typeArray.getColor(R.styleable.CustomProgressBar_textColor,Color.YELLOW);        textSize=typeArray.getDimension(R.styleable.CustomProgressBar_textsize,21f);        roundWidth=typeArray.getDimension(R.styleable.CustomProgressBar_roundWidth,21f);        max=typeArray.getInteger(R.styleable.CustomProgressBar_max,100);        textShow=typeArray.getBoolean(R.styleable.CustomProgressBar_textShow,false);        typeArray.recycle();    }

在两个参数的构造方法中进行自定义属性的获取，记得最后将typeArray进行recycler回收。这里默认style
为Stroke的。将自定义属性获取到之后就可以在ondraw()方法中进行绘制了。当然了绘制之前为了更加的规范化，可以提前准备好各种的set和get方法。例如：

 public synchronized int getProgress(){        return progress;    }    public synchronized void setProgress(int progress){        if(progress<0){            throw new IllegalArgumentException("progress不能小于0");        }        if(progress>max){            progress = max;        }        if(progress <=max){            this.progress = progress;            postInvalidate();        }    }    public int getRoundProgressColor() {        return roundProgressColor;    }    public void setRoundProgressColor(int roundProgressColor) {        this.roundProgressColor = roundProgressColor;    }    public int getRoundColor() {        return roundColor;    }

这里着重讲一下setProgress()方法。这个方法很显然是用来重绘整个view的，外界通过setProgress()来调用postInvalidate()进行重绘，使得整个progressBar跑起来。
话不多说看核心的onDraw()内部的方法：

 @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //画默认的大圆环        int center = getWidth()/2;//中心坐标点        float radius =  center-roundWidth/2;//半径        paint.setColor(roundColor);        paint.setStyle(Paint.Style.STROKE);        paint.setStrokeWidth(roundWidth);        canvas.drawCircle(center,center,radius,paint);

这没什么好讲的，就是绘制了一个圆，将宽度的一半设置为中心点进行绘制。

  //画文字        paint.setTextSize(textSize);        paint.setTextSkewX(-0.25f);        paint.setStrokeWidth(0);        int percent=progress*100/max;        String percentStr=percent+"%";        if(textShow)        canvas.drawText(percentStr,(getWidth()-paint.measureText(percentStr))/2f,                getWidth()/2f-(paint.descent()-paint.ascent())/2f,paint);

画文字这块计算坐标如果是没有做过文本测量的可能会看不太懂，大家可以查一下这方面的东西补一下，不难，另外需要注意的是你需要将paint.setStrokeWidth(0)重新进行set，不然最终得到的中心显示百分比的会是一团乱，因为你将文字也添加了StrokeWidth。
这里我将文字的一下显示方位画下来可以给大家看一下，方便大家理解：

OK，大家可以去看一下文字的一些绘制资料来丰富自己的知识，这块在自定义中也是很重要的，我们直接看下面的：

//画圆弧        RectF rectF=new RectF(center-radius,center-radius,center+radius,center+radius);        paint.setColor(roundProgressColor);        paint.setStrokeWidth(roundWidth);        canvas.drawArc(rectF,0,360*progress/max,false,paint);

画圆弧的代码中我用的是canvas.drawArc(rectF,0,360*progress/max,false,paint)的方法来绘制圆弧。
这个方法第一个参数是一个区域的坐标限制，参数的表达意思依次为左上右下，咱们是在一个应该是正方形中进行的圆弧的绘制，所以计算很方便。
在布局文件中的布局代码如下：

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.administrator.costompaint.MainActivity">  <com.example.administrator.costompaint.CustomProgressBar      android:layout_width="300dp"      android:layout_height="300dp"      android:id="@+id/progressbar"      app:roundColor="@color/colorAccent"      app:roundProgressColor="@color/colorPrimary"      app:textColor="#00ff00"      app:textShow="true"      app:roundWidth="10dp"      /></android.support.constraint.ConstraintLayout>

可以看到，Android Studio真的很强大，不需要咱们再去定义命名空间就可以直接使用app：来进行自定义属性的添加，赞一个。
那么最后一步呢就是让它转起来了，在MainActivity中设置一个监听，让他去不断的setProgress()不就能跑起来了吗？

 CustomProgressBar customProgressBar;    private int progress;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        customProgressBar= (CustomProgressBar) findViewById(R.id.progressbar);        customProgressBar.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                new Thread(){                    @Override                    public void run() {                        while(progress<=100) {                            progress+=3;                            customProgressBar.setProgress(progress);                            try {                                Thread.sleep(500);                            } catch (InterruptedException e) {                                e.printStackTrace();                            }                        }                    }                }.start();            }        });    }

是不是很简单？其实任何的高深的自定义view都是从这些基础开始的，多练多敲肯定可以啃下这块硬骨头的。