android弧形進度條，有詳細註釋的，比較簡單

weixin_34377065發表於2014-04-06
Android



Java code?
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
package com.demo.eric.views;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
 
/**
 * 弧形進度條
 * 
 * @author Eric
 * 
 */
public class ArcProgressbar extends View {
 
    public ArcProgressbar(Context context) {
        super(context);
    }
 
    public ArcProgressbar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        init(canvas);
    }
 
    private void init(Canvas canvas) {
        // 畫弧形的矩陣區域。
        rectBg = new RectF(15, 15, diameter, diameter);
 
        // 計算弧形的圓心和半徑。
        int cx1 = (diameter + 15) / 2;
        int cy1 = (diameter + 15) / 2;
        int arcRadius = (diameter - 15) / 2;
        // ProgressBar結尾和開始畫2個圓，實現ProgressBar的圓角。
        mPaintCircle = new Paint();
        mPaintCircle.setAntiAlias(true);
        mPaintCircle.setColor(bgColor);
         
        canvas.drawCircle(
                (float) (cx1 + arcRadius * Math.cos(startAngle * 3.14 / 180)),
                (float) (cy1 + arcRadius * Math.sin(startAngle * 3.14 / 180)),
                bgStrokeWidth / 2, mPaintCircle);// 小圓
 
        canvas.drawCircle(
                (float) (cx1 + arcRadius
                        * Math.cos((180 - startAngle) * 3.14 / 180)),
                (float) (cy1 + arcRadius
                        * Math.sin((180 - startAngle) * 3.14 / 180)),
                bgStrokeWidth / 2, mPaintCircle);// 小圓
 
        // 弧形背景。
        mPaintBg = new Paint();
        mPaintBg.setAntiAlias(true);
        mPaintBg.setStyle(Style.STROKE);
        mPaintBg.setStrokeWidth(bgStrokeWidth);
        mPaintBg.setColor(bgColor);
        canvas.drawArc(rectBg, startAngle, endAngle, false, mPaintBg);
 
        // 弧形小背景。
        if (showSmallBg) {
            mPaintSmallBg = new Paint();
            mPaintSmallBg.setAntiAlias(true);
            mPaintSmallBg.setStyle(Style.STROKE);
            mPaintSmallBg.setStrokeWidth(barStrokeWidth);
            mPaintSmallBg.setColor(smallBgColor);
            canvas.drawArc(rectBg, startAngle, endAngle, false, mPaintSmallBg);
        }
 
        // 弧形ProgressBar。
        mPaintBar = new Paint();
        mPaintBar.setAntiAlias(true);
        mPaintBar.setStyle(Style.STROKE);
        mPaintBar.setStrokeWidth(barStrokeWidth);
        mPaintBar.setColor(barColor);
        canvas.drawArc(rectBg, startAngle, progress, false, mPaintBar);
 
        // 隨ProgressBar移動的圓。
        if (showMoveCircle) {
            mPaintCircle.setColor(barColor);
            canvas.drawCircle(
                    (float) (cx1 + arcRadius
                            * Math.cos(angleOfMoveCircle * 3.14 / 180)),
                    (float) (cy1 + arcRadius
                            * Math.sin(angleOfMoveCircle * 3.14 / 180)),
                    bgStrokeWidth / 2, mPaintCircle);// 小圓
        }
 
        invalidate();
    }
 
    /**
     * 
     * @param progress
     */
    public void addProgress(int _progress) {
        progress += _progress;
        angleOfMoveCircle += _progress;
        System.out.println(progress);
        if (progress > endAngle) {
            progress = 0;
            angleOfMoveCircle = startAngle;
        }
        invalidate();
    }
 
    /**
     * 設定弧形背景的畫筆寬度。
     */
    public void setBgStrokeWidth(int bgStrokeWidth) {
        this.bgStrokeWidth = bgStrokeWidth;
    }
 
    /**
     * 設定弧形ProgressBar的畫筆寬度。
     */
    public void setBarStrokeWidth(int barStrokeWidth) {
        this.barStrokeWidth = barStrokeWidth;
    }
 
    /**
     * 設定弧形背景的顏色。
     */
    public void setBgColor(int bgColor) {
        this.bgColor = bgColor;
    }
 
    /**
     * 設定弧形ProgressBar的顏色。
     */
    public void setBarColor(int barColor) {
        this.barColor = barColor;
    }
 
    /**
     * 設定弧形小背景的顏色。
     */
    public void setSmallBgColor(int smallBgColor) {
        this.smallBgColor = smallBgColor;
    }
 
    /**
     * 設定弧形的直徑。
     */
    public void setDiameter(int diameter) {
        this.diameter = diameter;
    }
 
    /**
     * 是否顯示小背景。
     */
    public void setShowSmallBg(boolean showSmallBg) {
        this.showSmallBg = showSmallBg;
    }
 
    /**
     * 是否顯示移動的小圓。
     */
    public void setShowMoveCircle(boolean showMoveCircle) {
        this.showMoveCircle = showMoveCircle;
    }
 
    private int bgStrokeWidth = 44;
    private int barStrokeWidth = 15;
    private int bgColor = Color.GRAY;
    private int barColor = Color.RED;
    private int smallBgColor = Color.WHITE;
    private int progress = 0;
    private int angleOfMoveCircle = 140;// 移動小園的起始角度。
    private int startAngle = 140;
    private int endAngle = 260;
    private Paint mPaintBar = null;
    private Paint mPaintSmallBg = null;
    private Paint mPaintBg = null;
    private Paint mPaintCircle = null;
    private RectF rectBg = null;
    /**
     * 直徑。
     */
    private int diameter = 450;
 
    private boolean showSmallBg = true;// 是否顯示小背景。
    private boolean showMoveCircle = true;// 是否顯示移動的小園。
 
}

相關文章