自定义View之CusetomProgress

写了一个带进度的进度条

自定义VIew步骤

1. 自定义View的属性
2. 在View的构造方法中获得我们自定义的属性
3. 重写onMesure ]
4. 重写onDraw

---

效果图如下：

customProgress.gif

自定义View的属性

开始还是老样子：

在View的构造方法中获得我们自定义的属性

 //第一圈颜色
    private int mFirstColor;
    //第二圈颜色
    private int mSecondColor;
    //圆的宽度
    private int mCircleWidth;
    //画笔
    private Paint mPaint;
    //当前进度
    private int mProgress;
    //速度
    private int mSpeed;
    //中间进度百分比的字符串颜色
    private int textColor;
    //中间进度百分比的字符串的字体
    private float textSize;


    //是否下一个
    private boolean isNext = false;
    public CustomProgressBar(Context context) {
        this(context,null);
    }

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

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

        TypedArray a = getContext().obtainStyledAttributes(
                attrs, R.styleable.CustomProgressBar,defStyleAttr,0);

        int n = a.getIndexCount();
        for (int i = 0; i < n; i++){
            int attr = a.getIndex(i);
            switch (attr){
                case R.styleable.CustomProgressBar_firstColor:
                    mFirstColor = a.getColor(attr, Color.GREEN);
                    break;
                case R.styleable.CustomProgressBar_secondColor:
                    mSecondColor = a.getColor(attr, Color.RED);
                    break;
                case R.styleable.CustomProgressBar_circleWidth:
                    mCircleWidth = a.getDimensionPixelSize(attr, (int)TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_DIP, 20 ,getResources().getDisplayMetrics()
                    ));
                    break;
                case R.styleable.CustomProgressBar_speed:
                    mSpeed = a.getInt(attr,20);
                    break;
                case R.styleable.CustomProgressBar_textColor:
                    textColor = a.getColor(attr,Color.GREEN);
                    break;
                case R.styleable.CustomProgressBar_textSize:
                    textSize = a.getDimension(attr,15);
            }
        }
        a.recycle();
        mPaint = new Paint();

        new Thread(){
            @Override
            public void run() {
                while (true){
                mProgress ++;
                    if (mProgress == 360){
                        mProgress = 0;
                        isNext = !isNext;
                    }
                    postInvalidate();

                    try {
                        Thread.sleep(mSpeed);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
            }.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int centre = getWidth()/2; //获取圆心的x坐标
        //得到内部圆半径，因为画笔是有宽度的，要在画笔宽度（即圆环宽度）中间下笔，所以要除以2
        int radius = centre - mCircleWidth/2;
        mPaint.setStrokeWidth(mCircleWidth); //设置圆环的宽度
        mPaint.setAntiAlias(true);//消除锯齿
        mPaint.setStyle(Paint.Style.STROKE);//设置空心
        //用于定义的圆弧的形状和大小的界限
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius);
        if (!isNext){
            //第一颜色的圆完整
            mPaint.setColor(mFirstColor); //设置圆环的颜色
            canvas.drawCircle(centre, centre, radius, mPaint);

            mPaint.setStrokeWidth(0);
            mPaint.setColor(Color.RED);
            mPaint.setTextSize(textSize);
            mPaint.setTypeface(Typeface.DEFAULT_BOLD);//设置字体
            int precent = (int)(((float)mProgress/(float)360)*100);//中间的进度百分比，先转化成float在进行除法运算
            float textWidth = mPaint.measureText(precent + "%");

            if (precent != 0 ){
                canvas.drawText(precent + "%", centre - textWidth/2, centre + textSize/2, mPaint);//画出进度百分比
            }

            mPaint.setStrokeWidth(mCircleWidth); //设置圆环的宽度
            mPaint.setColor(mSecondColor);//设置圆环的颜色
            canvas.drawArc(oval,-90,mProgress,false,mPaint);
        } else {
            mPaint.setColor(mSecondColor); // 设置圆环的颜色
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
            mPaint.setColor(mFirstColor); // 设置圆环的颜色
            canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
        }
    }

之后在布局中引用