Android自定义View——彩色圆环统计图
发布时间
阅读量：
阅读量
效果展示
实现步骤
1、初始化变量
//-------------必须给的数据相关-------------
private String[] str =
new String[]{
"一年级",
"二年级",
"三年级",
"四年级",
"五年级",
"六年级"};
//分配比例大小，总比例大小为100
private
int[] strPercent =
new
int[]{
10,
25,
18,
41,
2,
5};
//圆的直径
private
float mRadius =
300;
//圆的粗细
private
float mStrokeWidth =
40;
//文字大小
private
int textSize =
20;
//-------------画笔相关-------------
//圆环的画笔
private Paint cyclePaint;
//文字的画笔
private Paint textPaint;
//标注的画笔
private Paint labelPaint;
//-------------颜色相关-------------
//边框颜色和标注颜色
private
int[] mColor =
new
int[]{
0xFFF06292,
0xFF9575CD,
0xFFE57373,
0xFF4FC3F7,
0xFFFFF176,
0xFF81C784};
//文字颜色
private
int textColor =
0xFF000000;
//-------------View相关-------------
//View自身的宽和高
private
int mHeight;
private
int mWidth;圆的粗细：圆环的大小。
标注：文字前面的圆点。
确定分配比例大小的原因在于需要计算圆环所覆盖的角度。当前采用的方法是将被测角度数值除以一百后再乘以三十六十分之一。然而，在这种情况下所得的结果总是等于零。因此转而采用另一种计算方式：将被测角度数值直接乘以三十六十分之一，并在新的算法中首先执行的是乘法运算。这种算法虽然简化了过程步骤但可能导致无法准确达到预期的比例总和。为了使最终的比例分布更加合理我们决定将所有部分的比例数值之和设置为一百分一十分。
**
**
2、获取宽和高
public MyChatView(Context context) {
super(context);
}
public MyChatView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyChatView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
}3、绘制图形
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//移动画布到圆环的左上角
canvas.translate(mWidth /
2 - mRadius /
2, mHeight /
2 - mRadius /
2);
//初始化画笔
initPaint();
//画圆环
drawCycle(canvas);
//画文字和标注
drawTextAndLabel(canvas);
}
/** * 初始化画笔
*/
private void initPaint() {
//边框画笔
cyclePaint =
new Paint();
cyclePaint.setAntiAlias(
true);
cyclePaint.setStyle(Paint.Style.STROKE);
cyclePaint.setStrokeWidth(mStrokeWidth);
//文字画笔
textPaint =
new Paint();
textPaint.setAntiAlias(
true);
textPaint.setColor(textColor);
textPaint.setStyle(Paint.Style.STROKE);
textPaint.setStrokeWidth(
1);
textPaint.setTextSize(textSize);
//标注画笔
labelPaint =
new Paint();
labelPaint.setAntiAlias(
true);
labelPaint.setStyle(Paint.Style.FILL);
labelPaint.setStrokeWidth(
2);
}
/** * 画圆环
* * @param canvas
*/
private void drawCycle(Canvas canvas) {
float startPercent =
0;
float sweepPercent =
0;
for (
int i =
0; i < strPercent.length; i++) {
cyclePaint.setColor(mColor[i]);
startPercent = sweepPercent + startPercent;
//这里采用比例占100的百分比乘于360的来计算出占用的角度，使用先乘再除可以算出值
sweepPercent = strPercent[i] *
360 /
100;
canvas.drawArc(
new RectF(
0,
0, mRadius, mRadius), startPercent, sweepPercent,
false, cyclePaint);
}
}
/** * 画文字和标注
* * @param canvas
*/
private void drawTextAndLabel(Canvas canvas) {
for (
int i =
0; i < strPercent.length; i++) {
//文字离右边环边距为60，文字与文字之间的距离为40
canvas.drawText(str[i], mRadius +
60, i *
40, textPaint);
//画标注,标注离右边环边距为40,y轴则要减去半径（10）的一半才能对齐文字
labelPaint.setColor(mColor[i]);
canvas.drawCircle(mRadius +
40, i *
40 -
5,
10, labelPaint);
}
} ### 原理分析**1、画布移到圆环的左上角，为（0，0）。**2、绘制圆环：调用drawArc函数绘制一个直径为mRadius的环形图形，并从起始角出发，并跨越一定角度来完成绘制过程。通过逐步增加起始角的方式，在平滑过渡中将各个段落连接起来绘制出完整的封闭图形。要实现圆环转动的效果，则需调整startPercent参数并观察其变化带来的效果变化
在圆环的右上方区域进行文字与标注的绘制，并确保其位于圆环直径的基础上加一段间距；同样地，在其他位置也可以遵循此方法。
**[源码下载]()**全部评论 (0)
还没有任何评论哟~