【移动应用开发技术】怎么在android中自定义环形对比图效果

【移动应用开发技术】怎么在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.然后为自定义对比图Viewpackage

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

mTxtWidth3;

//

文本的高度

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());

mTxtWidth3

=

mTextPaint2.measureText(txt2,

0,

txt2.length());

canvas.drawText(txt,

mXCenter

-

mTxtWidth

/

2,

mYCenter+mTxtWidth

/

8,

mTextPaint);

canvas.drawText(txt2

,mXCenter

-

mTxtWidth3

/

2,

mYCenter

+

mTxtWidth

/

2,

mTextPaint2);

}else

if(mInnerProgress==0){

String

txt

=

mInnerProgress

+

"%";

String

txt2

=

"正确率";

mTxtWidth

=

mTextPaint.measureText(txt,

0,

txt.length());

mTxtWidth3

=

mTextPaint2.measureText(txt2,

0,

txt2.length());

canvas.drawText(txt,

mXCenter

-

mTxtWidth

/

2,

mYCenter+mTxtWidth

/

8,

mTextPaint);

canvas.drawText(txt2

,mXCenter

-

mTxtWidth3

/

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.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中设置内环和外环的百分比和属性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(ti