服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - android自定义环形对比图效果

android自定义环形对比图效果

2022-08-09 11:04第4个苹果 Android

这篇文章主要为大家详细介绍了android自定义环形对比图,外环有类似进度条的旋转动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了android自定义环形对比图的具体代码,供大家参考,具体内容如下

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

延伸 · 阅读

精彩推荐
  • AndroidtextView 添加超链接(两种实现方式)

    textView 添加超链接(两种实现方式)

    在textView添加超链接,有两种方式,第一种通过HTML格式化你的网址,一种是设置autolink,让系统自动识别超链接,下面为大家介绍下这两种方法的实现...

    Android开发网15722021-01-25
  • AndroidAndroid创建Alert框的方法

    Android创建Alert框的方法

    这篇文章主要介绍了Android创建Alert框的方法,实例分析了Android创建alert弹出窗口的相关技巧,需要的朋友可以参考下...

    akwolf6862021-03-29
  • AndroidAndroid仿微信或支付宝方块密码输入框

    Android仿微信或支付宝方块密码输入框

    这篇文章主要为大家详细介绍了Android仿微信或支付宝方块密码输入框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    yaya_soft10882022-02-28
  • AndroidAndroid开发技巧之我的菜单我做主(自定义菜单)

    Android开发技巧之我的菜单我做主(自定义菜单)

    Android SDK本身提供了一种默认创建菜单的机制,虽然功能上还不错,但是界面的美观度不是很理想,本结介绍一种实现方法:就是通过onKeyDown事件方法和Pop...

    Android开发网11022021-01-05
  • AndroidAndroid中的JSON详细总结

    Android中的JSON详细总结

    一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性。业内主流技术为其提供了完整的解决方案(有点类似于正则表达式,获得了当今大部...

    Android开发网10742021-01-04
  • AndroidAndroid Activity启动模式全面解析

    Android Activity启动模式全面解析

    这篇文章主要介绍了Android Activity启动模式全面解析的相关资料,需要的朋友可以参考下...

    Android开发网3652021-06-10
  • Androidandroid 分辨率适配的方法

    android 分辨率适配的方法

    先和大家分享下,这个方法不能说万能的,但是最起码它解决了分辨率跟密集度的关系,但是也引来一个问题,就是布局会因为图片资源小而失真,本文将详...

    Android教程网3732020-12-21
  • AndroidAndroid实现拍照截图功能

    Android实现拍照截图功能

    这篇文章主要介绍了Android实现拍照截图功能,简单介绍了Android实现拍照截图功能的步骤,供大家参考,感兴趣的小伙伴们可以参考一下...

    Kriss10892021-05-11