Android自定義控制元件學習之圓環進度條，學習了一段時間，自定義控制元件，對一些自定義所需要的Api，基本上也掌握了，但是對於比較複雜的自定義控制元件，他們的座標計算

一直比較噁心（可能，我數學比較差~），記錄自定義控制元件學習過程。

   對於圓環進度條的自定義比較簡單的，其實就是3個圓的巢狀

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ProgressCirCle">

        <!-- 預設外環顏色 -->
        <attr name="circleoutcolor" format="color"></attr>
        <!-- 內環顏色 -->
        <attr name="circleincolor" format="color"></attr>
        <!-- 文字顯示 -->
        <attr name="progressnumber" format="string"></attr>
        
        <!-- 環內文字大小 -->
        <!-- 進度外環顏色 -->
    </declare-styleable>

</resources>

 

由於只需實現功能，所以其他的屬性省略

初始化畫筆等等

public ProgressCirCle(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		TypedArray arrayattr = context.getTheme().obtainStyledAttributes(attrs,
				R.styleable.ProgressCirCle, defStyleAttr, 0);
		int indexCount = arrayattr.getIndexCount();
		for (int i = 0; i < indexCount; i++) {
			switch (arrayattr.getIndex(i)) {
			case R.styleable.ProgressCirCle_circleincolor:
				// 內環
				circlein = arrayattr.getColor(arrayattr.getIndex(i),
						Color.BLACK);
				break;
			case R.styleable.ProgressCirCle_circleoutcolor:
				// 外環
				circleout = arrayattr
						.getColor(arrayattr.getIndex(i), Color.RED);
				break;
			case R.styleable.ProgressCirCle_progressnumber:
				progress = arrayattr.getString(arrayattr.getIndex(i));
				// 預設多少
				break;
			default:
				break;
			}
		}
		outpaint = new Paint();
		outpaint.setStyle(Paint.Style.STROKE);
		outpaint.setStrokeWidth(50);
		// 消除鋸齒
		outpaint.setAntiAlias(false);
		// 設定外環顏色(動態)
		outpaint.setColor(Color.BLUE);
		inpaint = new Paint();
		// 消除鋸齒
		inpaint.setAntiAlias(false);
		inpaint.setStyle(Paint.Style.STROKE);
		inpaint.setStrokeWidth(34);
		// 設定內環顏色
		inpaint.setColor(circlein);
		defaultpaint = new Paint();
		// 消除鋸齒
		defaultpaint.setAntiAlias(false);
		defaultpaint.setStyle(Paint.Style.STROKE);
		// 設定預設外環顏色
		defaultpaint.setColor(circleout);
		defaultpaint.setStrokeWidth(34);

		// 設定矩形測得文字寬度
		rect = new Rect();
		textpaint = new Paint();
		textpaint.setTextSize(40);
		textpaint.getTextBounds(progress, 0, progress.length(), rect);
		textpaint.setColor(Color.BLACK);

	}
 

實現onDraw() 並畫圓

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //畫內環
        canvas.drawCircle(viewwitdh / 2, viewwitdh / 2, viewwitdh / 4, inpaint);
        //畫預設環
        canvas.drawArc(rectf, 0, 360, false, defaultpaint);
        //畫文字
        canvas.drawText(progress, viewwitdh / 2 - rect.width() / 2,
                viewwitdh / 2, textpaint);
        if (isstart) {
            //畫進度環
            canvas.drawArc(rectf, 0, number, false, outpaint);
        }
    }
 

重寫onMeaSure，測量控制元件大小

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = 0;
        int width = 0;
        int widthmode = MeasureSpec.getMode(widthMeasureSpec);
        widthsize = MeasureSpec.getSize(widthMeasureSpec);
        int heightmode = MeasureSpec.getMode(heightMeasureSpec);
        heightsize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthmode == MeasureSpec.EXACTLY) {
            width = widthsize;
        } else if (widthmode == MeasureSpec.AT_MOST) {
            width = 150 + getPaddingLeft() + getPaddingRight();
        }
        if (heightmode == MeasureSpec.EXACTLY) {
            height = heightsize;
        } else if (heightmode == MeasureSpec.AT_MOST) {
            height = 150 + getPaddingTop() + getPaddingBottom();
        }
        setMeasuredDimension(width, height);
        if (heightsize >= widthsize) {
            viewwitdh = widthsize;
        } else {
            viewwitdh = heightsize;
        }
        rectf = new RectF((float) (viewwitdh * 0.2), (float) (viewwitdh * 0.2),
                (float) (viewwitdh * 0.8), (float) (viewwitdh * 0.8));
    }

提供輸入進度資料

	public void setprogress(float num) {
		isstart = true;
		if (num > 100) {
			progress = "完成~";
		} else {
			progress = (int) num + "%";
			number = (float) (num * 3.6);
		}
		this.invalidate();
	}

到此一個簡單的自定義進度條就完成了~