寫了一個(gè)帶進(jìn)度的進(jìn)度條

自定義VIew步驟

1. 自定義View的屬性
2. 在View的構(gòu)造方法中獲得我們自定義的屬性
3. 重寫onMesure ]
4. 重寫onDraw

效果圖如下：

customProgress.gif

自定義View的屬性

開始還是老樣子：

<resources>
<attr name="firstColor" format="color"/>
<attr name="secondColor" format="color"/>
<attr name="circleWidth" format="dimension"/>
<attr name="textSize" format="dimension"/>
<attr name="textColor" format="color"/>
<attr name="speed" format="integer"/>

<declare-styleable name="CustomProgressBar">
    <attr name="firstColor"/>
    <attr name="secondColor"/>
    <attr name="circleWidth"/>
    <attr name="speed"/>
    <attr name="textSize"/>
    <attr name="textColor"/>
</declare-styleable>
</resources>

在View的構(gòu)造方法中獲得我們自定義的屬性

 //第一圈顏色
    private int mFirstColor;
    //第二圈顏色
    private int mSecondColor;
    //圓的寬度
    private int mCircleWidth;
    //畫筆
    private Paint mPaint;
    //當(dāng)前進(jìn)度
    private int mProgress;
    //速度
    private int mSpeed;
    //中間進(jìn)度百分比的字符串顏色
    private int textColor;
    //中間進(jìn)度百分比的字符串的字體
    private float textSize;


    //是否下一個(gè)
    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坐標(biāo)
        //得到內(nèi)部圓半徑，因?yàn)楫嫻P是有寬度的，要在畫筆寬度（即圓環(huán)寬度）中間下筆，所以要除以2
        int radius = centre - mCircleWidth/2;
        mPaint.setStrokeWidth(mCircleWidth); //設(shè)置圓環(huán)的寬度
        mPaint.setAntiAlias(true);//消除鋸齒
        mPaint.setStyle(Paint.Style.STROKE);//設(shè)置空心
        //用于定義的圓弧的形狀和大小的界限
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius);
        if (!isNext){
            //第一顏色的圓完整
            mPaint.setColor(mFirstColor); //設(shè)置圓環(huán)的顏色
            canvas.drawCircle(centre, centre, radius, mPaint);

            mPaint.setStrokeWidth(0);
            mPaint.setColor(Color.RED);
            mPaint.setTextSize(textSize);
            mPaint.setTypeface(Typeface.DEFAULT_BOLD);//設(shè)置字體
            int precent = (int)(((float)mProgress/(float)360)*100);//中間的進(jìn)度百分比，先轉(zhuǎn)化成float在進(jìn)行除法運(yùn)算
            float textWidth = mPaint.measureText(precent + "%");

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

            mPaint.setStrokeWidth(mCircleWidth); //設(shè)置圓環(huán)的寬度
            mPaint.setColor(mSecondColor);//設(shè)置圓環(huán)的顏色
            canvas.drawArc(oval,-90,mProgress,false,mPaint);
        } else {
            mPaint.setColor(mSecondColor); // 設(shè)置圓環(huán)的顏色
            canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環(huán)
            mPaint.setColor(mFirstColor); // 設(shè)置圓環(huán)的顏色
            canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進(jìn)度畫圓弧
        }
    }

之后在布局中引用

<com.riane.customcirque.CustomProgressBar
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:layout_centerHorizontal="true"
        custom:textSize="18dp"
        custom:circleWidth="15dp"
        custom:firstColor="#D4F668"
        custom:secondColor="#2F9DD2"
        custom:speed="20"
        />