項目需要倔丈，需要一個圓形的進(jìn)度條，所想到的實現(xiàn)方案是這樣的：
自定義View扼倘，訂制一個圓形的進(jìn)度條。下面簡述實現(xiàn)除呵，有不當(dāng)之處敬請指正再菊。
主題思想
- 自定義類繼承自View，在構(gòu)造函數(shù)中颜曾，獲得從配置文件中獲得的自定義屬性值纠拔。
- 在onDraw中繪制，跟據(jù)獲得的屬性值泛豪，繪制想要的圖形稠诲。
自定義屬性的定義
在文件attrs.xml中
<resources>
<declare-styleable name="RoundProgressBar">
<attr name="roundColor" format="color"/>
<attr name="roundProgressColor" format="color"/>
<attr name="roundWidth" format="dimension"></attr>
<attr name="textColor" format="color" />
<attr name="textSize" format="dimension" />
<attr name="max" format="integer"></attr>
<attr name="textIsDisplayable" format="boolean"></attr>
<attr name="style">
<enum name="STROKE" value="0"></enum>
<enum name="FILL" value="1"></enum>
</attr>
</declare-styleable>
</resources>
則，在layout文件中诡曙，可以使用這些自定義屬性：
<com.running.aid.aidrunning.RoundProgressBar
android:id="@+id/roundProgressBar"
android:layout_width="250dip"
android:layout_height="250dip"
android:layout_alignParentTop="true"
android:layout_marginBottom="78dp"
android:layout_centerHorizontal="true"
android_custom:roundColor="#D1D1D1"
android_custom:roundProgressColor="@android:color/holo_green_light"
android_custom:textColor="@color/gray9"
android_custom:roundWidth="25dip"
android_custom:textSize="18sp" />
在自定義的進(jìn)度條類的構(gòu)造函數(shù)中臀叙，獲取配置的自定義屬性值：
roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);
roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);
textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);
textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);
roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);
max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);
textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);
style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 0);
繪制控件
畫最外層的大圓環(huán)
int centre = getWidth()/2; //獲取圓心的x坐標(biāo)
int radius = (int) (centre - roundWidth/2); //圓環(huán)的半徑
paint.setColor(roundColor); //設(shè)置圓環(huán)的顏色
paint.setStyle(Paint.Style.STROKE); //設(shè)置空心
paint.setStrokeWidth(roundWidth); //設(shè)置圓環(huán)的寬度
paint.setAntiAlias(true); //消除鋸齒
canvas.drawCircle(centre, centre, radius, paint); //畫出圓環(huán)
繪制文本
這里是模仿計步器，顯示的當(dāng)前步數(shù)价卤，總步數(shù)劝萤，分三行顯示。
paint.setStrokeWidth(0);
paint.setColor(textColor);
paint.setTextSize(textSize);
paint.setTypeface(Typeface.DEFAULT_BOLD); //設(shè)置字體
//if(textIsDisplayable && percent != 0 && style == STROKE){
if(textIsDisplayable && style == STROKE){
stepNumValueStr = "" + currentValue;
stepAIMValueStr = "" + maxValue;
float stepNumStrWidth = paint.measureText(stepNumStr);
float stepAIMStrWidth = paint.measureText(stepAIMStr+stepAIMValueStr);
float y = paint.getFontMetrics().bottom - paint.getFontMetrics().top;
canvas.drawText(stepNumStr,centre-stepNumStrWidth/2,centre -2*y,paint);
canvas.drawText(stepAIMStr+stepAIMValueStr,centre-stepAIMStrWidth/2,centre+2*y,paint);
paint.setTextSize(textSize * 2);
paint.setColor(getResources().getColor(R.color.blue6));
float stepNumValueStrWidth = paint.measureText(stepNumValueStr);
canvas.drawText(stepNumValueStr,centre-stepNumValueStrWidth/2,centre,paint);
}
繪制扇形慎璧，進(jìn)度條
paint.setStrokeWidth(roundWidth); //設(shè)置圓環(huán)的寬度
paint.setColor(roundProgressColor); //設(shè)置進(jìn)度的顏色
RectF oval = new RectF(centre - radius, centre - radius, centre
+ radius, centre + radius); //用于定義的圓弧的形狀和大小的界限
switch (style) {
case STROKE:{
paint.setStyle(Paint.Style.STROKE);
canvas.drawArc(oval, 0, 360 * progress / max, false, paint); //根據(jù)進(jìn)度畫圓弧
break;
}
case FILL:{
paint.setStyle(Paint.Style.FILL_AND_STROKE);
if(progress !=0)
canvas.drawArc(oval, 0, 360 * progress / max, true, paint); //根據(jù)進(jìn)度畫圓弧
break;
}
}
