android自定义环形对比图（外环有类似进度条的旋转动画）

环形对比图（外环有类似进度条的旋转动画）"/>

android自定义环形对比图（外环有类似进度条的旋转动画）

1.首先在res/values里创建一个attr.xml的文件。

<?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

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);}@Overrideprotected 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

<com.jsle.ebag.answer.view.AnswerChartViewandroid: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中设置内环和外环的百分比和属性

</pre><pre name="code" class="java">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;@Overrideprotected int getID() {// TODO Auto-generated method stubreturn R.id.Activity_ID_AnswerChart;}@Overrideprotected String getTag() {// TODO Auto-generated method stubreturn "AnswerChart_Acitivity";}@Overrideprotected 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 stubIntent 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 {@Overridepublic void run() {while (mCurrentProgress < mAccuracy) {mCurrentProgress += 1;if(mCurrentProgress>mAccuracy){mCurrentProgress=mAccuracy;}mTasksView.setInnerProgress(mCurrentProgress);try {Thread.sleep(15);} catch (Exception e) {e.printStackTrace();}}}}@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (v.getId()) {case R.id.btn_black:finish();break;default:break;}}
}