本文实例为大家分享了android自定义环形对比图的具体代码,供大家参考,具体内容如下
1.首先在res/values里创建一个attr.xml的文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<? xml version = "1.0" encoding = "utf-8" ?> < resources > < declare-styleable name = "AnswerChartView" > < attr name = "radius" format = "dimension" /> < attr name = "strokeWidth" format = "dimension" /> < attr name = "circleColor" format = "color" /> < attr name = "innerringColor" format = "color" /> < attr name = "outringColor" format = "color" /> < attr name = "textSize" format = "dimension" /> </ declare-styleable > </ resources > |
2.然后为自定义对比图View
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
|
package com.jsle.ebag.answer.view; import com.jsle.ebag.answer.R; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Paint.FontMetrics; import android.util.AttributeSet; import android.view.View; /** * 弧线对比图 * @param * @return * @author LH * @data 2016年1月25日 下午6:17:34 **/ public class AnswerChartView extends View { // 圆画笔 private Paint mCirclePaint; // 圆环画笔 private Paint mRingPaint; // 百分数画笔 private Paint mTextPaint; // 文本画笔 private Paint mTextPaint2; // 里面圆颜色 private int mCircleColor; // 里面弧颜色 private int mInnerRingColor; // 外面弧颜色 private int mOutRingColor; // 空白的圆半径 private float mRadius; // 里面的弧半径 private float mRingRadius; // 最外弧半径 private float mRingRadius2; // 圆环的宽度 private float mStrokeWidth; // 文本的中心x轴位置 private int mXCenter; // 文本的中心y轴位置 private int mYCenter; // 百分比文本的宽度 private float mTxtWidth; // 描述文本的宽度 private float mTxtWidth2; // 文本的高度 private float mTxtHeight; // 百分数文本的大小 private float mTxtSize; // 总成绩 private int mTotalProgress = 100 ; // 个人的正确率 private double mInnerProgress; // 班级的正确率 private double mOutProgress; public AnswerChartView(Context context, AttributeSet attrs) { super (context, attrs); initAttrs(context, attrs); initVariable(); } private void initAttrs(Context context, AttributeSet attrs) { TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.AnswerChartView, 0 , 0 ); mRadius = typeArray.getDimension(R.styleable.AnswerChartView_radius, 80 ); mTxtSize=typeArray.getDimension(R.styleable.AnswerChartView_textSize, 20 ); mStrokeWidth = typeArray.getDimension(R.styleable.AnswerChartView_strokeWidth, 10 ); mCircleColor = typeArray.getColor(R.styleable.AnswerChartView_circleColor, 0xFFFFFFFF ); mOutRingColor = typeArray.getColor(R.styleable.AnswerChartView_innerringColor, 0xFFFFFFFF ); mInnerRingColor = typeArray.getColor(R.styleable.AnswerChartView_outringColor, 0xFFFFFFFF ); mRingRadius = mRadius + mStrokeWidth / 2 ; mRingRadius2 = mRadius + mStrokeWidth/ 2 * 3 ; } private void initVariable() { mCirclePaint = new Paint(); mCirclePaint.setAntiAlias( true ); mCirclePaint.setStyle(Paint.Style.FILL); mRingPaint = new Paint(); mRingPaint.setAntiAlias( true ); mRingPaint.setColor(mInnerRingColor); mRingPaint.setStyle(Paint.Style.STROKE); mRingPaint.setStrokeWidth(mStrokeWidth); mTextPaint = new Paint(); mTextPaint.setAntiAlias( true ); mTextPaint.setStyle(Paint.Style.FILL); mTextPaint.setARGB( 255 , 32 , 207 , 152 ); mTextPaint.setTextSize(mTxtSize); mTextPaint2 = new Paint(); mTextPaint2.setAntiAlias( true ); mTextPaint2.setStyle(Paint.Style.FILL); mTextPaint2.setARGB( 255 , 0 , 0 , 0 ); mTextPaint2.setTextSize( 20 ); FontMetrics fm = mTextPaint.getFontMetrics(); mTxtHeight = ( int ) Math.ceil(fm.descent - fm.ascent); } @Override protected void onDraw(Canvas canvas) { mXCenter = getWidth() / 2 ; mYCenter = getHeight() / 2 ; mCirclePaint.setColor(getResources().getColor(R.color.gray)); canvas.drawCircle(mXCenter,mYCenter, mRadius + mStrokeWidth* 2 , mCirclePaint); RectF oval1 = new RectF(); oval1.left = (mXCenter - mRingRadius); oval1.top = (mYCenter - mRingRadius); oval1.right = mRingRadius * 2 + (mXCenter - mRingRadius); oval1.bottom = mRingRadius * 2 + (mYCenter - mRingRadius); mRingPaint.setColor(mOutRingColor); canvas.drawArc(oval1, - 90 , (( float )mOutProgress / mTotalProgress) * 360 , false , mRingPaint); mCirclePaint.setColor(mCircleColor); canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint); if (mInnerProgress > 0 ) { RectF oval = new RectF(); oval.left = (mXCenter - mRingRadius2); oval.top = (mYCenter - mRingRadius2); oval.right = mRingRadius2 * 2 + (mXCenter - mRingRadius2); oval.bottom = mRingRadius2 * 2 + (mYCenter - mRingRadius2); mRingPaint.setColor(mInnerRingColor); canvas.drawArc(oval, - 90 , (( float )mInnerProgress / mTotalProgress) * 360 , false , mRingPaint); // // canvas.drawCircle(mXCenter, mYCenter, mRadius + mStrokeWidth / 2, mRingPaint); String txt = mInnerProgress + "%" ; String txt2 = "正确率" ; mTxtWidth = mTextPaint.measureText(txt, 0 , txt.length()); mTxtWidth2 = mTextPaint2.measureText(txt2, 0 , txt2.length()); canvas.drawText(txt, mXCenter - mTxtWidth / 2 , mYCenter+mTxtWidth / 8 , mTextPaint); canvas.drawText(txt2 ,mXCenter - mTxtWidth2 / 2 , mYCenter + mTxtWidth / 2 , mTextPaint2); } else if (mInnerProgress== 0 ){ String txt = mInnerProgress + "%" ; String txt2 = "正确率" ; mTxtWidth = mTextPaint.measureText(txt, 0 , txt.length()); mTxtWidth2 = mTextPaint2.measureText(txt2, 0 , txt2.length()); canvas.drawText(txt, mXCenter - mTxtWidth / 2 , mYCenter+mTxtWidth / 8 , mTextPaint); canvas.drawText(txt2 ,mXCenter - mTxtWidth2 / 2 , mYCenter + mTxtWidth / 2 , mTextPaint2); } } public void setOutProgress( double progress){ mOutProgress=progress; } public void setInnerProgress( double progress) { mInnerProgress = progress; // invalidate(); postInvalidate(); } } |
3.使用自定义View
1
2
3
4
5
6
7
8
9
10
11
|
< com.jsle.ebag.answer.view.AnswerChartView android:id = "@+id/tasks_view" android:layout_width = "160dp" android:layout_height = "160dp" android:layout_centerHorizontal = "true" tc:circleColor = "@color/circle_color" tc:innerringColor = "@color/dark_yellow" tc:outringColor = "@color/green" tc:radius = "60dip" tc:strokeWidth = "6dip" tc:textSize = "32sp" /> |
4.最后可已在AnswerChartActivity中设置内环和外环的百分比和属性
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
|
package com.jsle.ebag.answer.activity; import java.text.DecimalFormat; import com.jsle.ebag.answer.R; import com.jsle.ebag.answer.R.layout; import com.jsle.ebag.answer.view.AnswerChartView; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; public class AnswerChartActivity extends BaseActivity implements OnClickListener { private AnswerChartView mTasksView; private double mAccuracy; //个人的正确率 private double cAccuracy; //班级的正确率 private double mCurrentProgress; private LinearLayout btn_black; private TextView tv_title,tv_subjectcount,tv_submit,tv_accuracy; private String title; private double maccuracy,caccuracy; private int subjectcount,submit; @Override protected int getID() { // TODO Auto-generated method stub return R.id.Activity_ID_AnswerChart; } @Override protected String getTag() { // TODO Auto-generated method stub return "AnswerChart_Acitivity" ; } @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_answer_chart); btn_black=(LinearLayout) findViewById(R.id.btn_black); tv_title=(TextView) findViewById(R.id.tv_title); tv_subjectcount=(TextView) findViewById(R.id.tv_subjectcount); tv_submit=(TextView) findViewById(R.id.tv_submit); tv_accuracy=(TextView) findViewById(R.id.tv_accuracy); btn_black.setOnClickListener( this ); getData(); initVariable(); initView(); new Thread( new ProgressRunable()).start(); } private void getData() { // TODO Auto-generated method stub Intent intent = getIntent(); title=intent.getStringExtra( "title" ); maccuracy = intent.getDoubleExtra( "maccuracy" , 0 ); caccuracy = intent.getDoubleExtra( "caccuracy" , 0 ); subjectcount=intent.getIntExtra( "subjectcount" , 0 ); submit=intent.getIntExtra( "submit" , 0 ); } private void initVariable() { tv_title.setText(title); tv_subjectcount.setText( "共" +subjectcount+ "道题" ); tv_submit.setText(submit+ "" ); tv_accuracy.setText(caccuracy+ "%" ); mAccuracy =maccuracy; cAccuracy=caccuracy; mCurrentProgress = 0 ; } private void initView() { mTasksView = (AnswerChartView) findViewById(R.id.tasks_view); mTasksView.setOutProgress(cAccuracy); } /** *进度动画效果 * @author LH * @data 2016年1月29日 下午3:43:31 **/ class ProgressRunable implements Runnable { @Override public void run() { while (mCurrentProgress < mAccuracy) { mCurrentProgress += 1 ; if (mCurrentProgress>mAccuracy){ mCurrentProgress=mAccuracy; } mTasksView.setInnerProgress(mCurrentProgress); try { Thread.sleep( 15 ); } catch (Exception e) { e.printStackTrace(); } } } } @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.btn_black: finish(); break ; default : break ; } } } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/u012483116/article/details/50635268