android开发自定义View(二)自定义圆形进度条_android 自定义漂亮的圆形进度条

先上效果图

View的绘制流程，不明白的请移步至android开发自定义View(一)

1.设置属性。

这里定义了几个进度条的属性。

1. 进度条的颜色
2. 进度条的背景颜色
3. 进度条的宽度
4. 字体大小
5. 字体颜色

 <declare-styleable name="ProgressView">

        <attr name="progressColor" format="color"/>
        <attr name="progressBackColor" format="color"/>
        <attr name="ProgressWidth" format="integer"/>
        <attr name="textSize" format="dimension"/>
        <attr name="textColor" format="color"/>

    </declare-styleable>
1
2
3
4
5
6
7
8
9

在布局文件中设置属性

<cn.jiangzehui.www.textview.ProgressView
        android:id="@+id/pv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:padding="5dp"
        jzh:progressColor="#ac0fa4"
        jzh:ProgressWidth="20"
        jzh:textSize="20sp"
         />
1
2
3
4
5
6
7
8
9
10
11

在构造方法中获取设置的属性

public ProgressView(Context context) {
        this(context, null);
    }

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

    }

    public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ProgressView, defStyleAttr, 0);
        progressColor = array.getColor(R.styleable.ProgressView_progressColor, Color.GREEN);
        progressBackColor = array.getColor(R.styleable.ProgressView_progressBackColor, Color.WHITE);
        ProgressWidth = array.getInt(R.styleable.ProgressView_ProgressWidth, 20);
        textSize = array.getDimensionPixelSize(R.styleable.ProgressView_textSize,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()));
        textColor = array.getColor(R.styleable.ProgressView_textColor, Color.BLACK);
        //初始化绘制进度条的画笔
        paint = new Paint();
        paint.setAntiAlias(true);

        //初始化绘制文字的画笔
        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
        rect = new Rect();



    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2.测量

Paint.FontMetrics fm;
    /**
     * 文本X坐标
     */
    private float textX;
    /**
     * 文本Y坐标
     */
    private float textY;

    /**
     * 定位文本绘制的位置
     */
    private void setTextLocation() {

        fm = textPaint.getFontMetrics();
        //文本的宽度
        textPaint.getTextBounds(textContent, 0, textContent.length(), rect);
        float numTextWidth = rect.width();
        float textCenterVerticalBaselineY = viewHeight / 2 - fm.descent + (fm.descent - fm.ascent) / 2;
        textX = viewWidth / 2 - numTextWidth / 2;
        textY = textCenterVerticalBaselineY;

    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(measure_wh(widthMeasureSpec, 0), measure_wh(heightMeasureSpec, 1));
    }

    /**
     * 测量宽度
     *
     * @param measureSpec
     * @return
     */
    private int measure_wh(int measureSpec, int type) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = 200;//如果没有设置精确值，则设置一个默认值200
        }

        if (type == 0) {
            viewWidth = result;
        } else {
            viewHeight = result;
        }


        return result;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

3.绘制

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制文字
        setTextLocation();
        canvas.drawText(textContent, textX, textY, textPaint);

        //绘制进度条
        float centerX = getWidth() / 2;
        float centerY = getHeight() / 2;
        float radius = centerX - getPaddingLeft();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(ProgressWidth);
        paint.setColor(progressBackColor);
        canvas.drawCircle(centerX, centerY, radius, paint);//绘制进度条背景
        paint.setColor(progressColor);
        RectF rf = new RectF(centerX - radius, centerX - radius, centerX + radius, centerX + radius);
        canvas.drawArc(rf, -90, progress, false, paint);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 public void setProgress(int progress){
        if(progress<=100){
            textContent = progress + "%";
            this.progress= (float) (progress*3.6);
            postInvalidate();
        }

    }
1
2
3
4
5
6
7
8

这里提供了一个方法setProgress()，用于设置进度条的进度。
圆形进度条绘制一圈的总进度是360.
而在显示的界面中只会显示0~100%
所以如果当前进度为10%时，进度条需要绘制10*360/100的进度。

4.调用

最后在Activity模拟了一下进度条加载过程。

public class MainActivity extends AppCompatActivity {
    ProgressView pv;
    int progress=0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pv= (ProgressView) findViewById(R.id.pv);
        new Thread(){
            @Override
            public void run() {
                while (true){
                    try {
                        progress++;
                        pv.setProgress(progress);
                        Thread.sleep(100);
                        if(progress==100){
                            break;
                        }
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }.start();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

源码下载