Android绘制自定义饼状图

Android绘制自定义饼状图

1.绘制圆环

1. 创建自定义圆环对应的类

package com.example.a01drawround.ui;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import com.example.a01drawround.UIUtils.UIUtils;

/**
* Created by chen on 2017/6/24.
*  自定义视图1：绘制圆环比例图的
*/

public class RoundCircleProgress extends View{

public RoundCircleProgress(Context context) {
this(context,null);
}

public RoundCircleProgress(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}

public RoundCircleProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

//初始化画笔
paint = new Paint();
paint.setAntiAlias(true); //画笔去除毛边
}

//1. 测量尺寸--对于圆形
private int width ;//视图宽度(高度)
private int hight ;//视图高度==宽度
private int roundCircleWidth = UIUtils.px2dp(this.getContext(),40);

//2. 设置颜色
private  int roundCircleColor = Color.GRAY; //圆环颜色
private  int roundProgressColor = Color.RED; //进度颜色
private  int roundTextColor = Color.BLUE;    //字体颜色

//3. 字体大小
private  int roundTextSize = UIUtils.px2dp(this.getContext(),80);
private  float roundMax = 100;
private  float roundProgress = 30f;

//4. 画笔
private Paint paint;

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = this.getMeasuredWidth(); //视图宽
hight = this.getMeasuredHeight();//获取视图高
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//圆心位置
int cx = width/2;
int cy = hight/2;

//半径
int radios = width/2 - roundCircleWidth/2;

//1. 绘制圆环
paint.setColor(roundCircleColor);
paint.setStyle(Paint.Style.STROKE); //边界
paint.setStrokeWidth(roundCircleWidth);

canvas.drawCircle(cx,cy,radios,paint);

//2. 绘制进度

//绘制圆形对应的矩形的左上 右下坐标

RectF oval = new RectF(roundCircleWidth/2,roundCircleWidth/2,width-roundCircleWidth/2,hight-roundCircleWidth/2);

float startAngle = 0;
float sweepAngle = roundProgress*360/roundMax;

paint.setColor(roundProgressColor);
canvas.drawArc(oval,startAngle,sweepAngle,false,paint);

//3. 绘制文字
String text = roundProgress +"%";

//获取文字对应的包裹矩形的左下角坐标
Rect textRect = new Rect();

paint.setTextSize(roundTextSize);
paint.setColor(roundTextColor);
paint.setStrokeWidth(0);//

paint.getTextBounds(text,0,text.length(),textRect);

//文字包裹矩形的坐下标
int textX = cx- textRect.width()/2;
int textY = cx+ textRect.height()/2;

canvas.drawText(text,textX,textY,paint);
}
}

02 修改布局文件 使用自定义的 视图对象

<!--绘制圆环 -->
<com.example.a01drawround.ui.RoundCircleProgress
android:id="@+id/circle1"

android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center" />

2. 绘制饼状图

1. 创建饼状图对应对象

package com.example.a01drawround.ui;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import com.example.a01drawround.UIUtils.UIUtils;

/**
* Created by chen on 2017/6/24.
* 自定义视图1：绘制圆环比例图的
*/

public class RoundFillProgress extends View {

//1. 测量尺寸--对于圆形
private int width;//视图宽度(高度)
private int hight;//视图高度==宽度
private int roundCircleWidth = UIUtils.px2dp(this.getContext(), 40);

//2. 设置颜色
private int roundCircleColor = Color.GRAY; //圆环颜色
private int roundProgressColor = Color.RED; //进度颜色
private int roundTextColor = Color.BLUE;    //字体颜色

//3. 字体大小
private int roundTextSize = UIUtils.px2dp(this.getContext(), 80);
private float roundMax = 100;
private float roundProgress = 60f;

//4. 画笔
private Paint paint;

public RoundFillProgress(Context context) {
this(context, null);
}

public RoundFillProgress(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}

public RoundFillProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

//初始化画笔
paint = new Paint();
paint.setAntiAlias(true); //画笔去除毛边
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = this.getMeasuredWidth(); //视图宽
hight = this.getMeasuredHeight();//获取视图高
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//圆心位置
int cx = width / 2;
int cy = hight / 2;

//半径
int radios = width / 2 - roundCircleWidth / 2;

//1. 绘制圆环
paint.setColor(roundCircleColor);
paint.setStyle(Paint.Style.FILL); //边界
paint.setStrokeWidth(roundCircleWidth);

canvas.drawCircle(cx, cy, radios, paint);

//2. 绘制进度

//绘制圆形对应的矩形的左上 右下坐标

RectF oval = new RectF(roundCircleWidth / 2, roundCircleWidth / 2, width - roundCircleWidth / 2, hight - roundCircleWidth / 2);

float startAngle = 0;
float sweepAngle = roundProgress * 360 / roundMax;

paint.setColor(roundProgressColor);
canvas.drawArc(oval, startAngle, sweepAngle, true, paint);

//3. 绘制文字
String text = roundProgress + "%";

//获取文字对应的包裹矩形的左下角坐标
Rect textRect = new Rect();

paint.setTextSize(roundTextSize);
paint.setColor(roundTextColor);
paint.setStrokeWidth(0);

paint.getTextBounds(text, 0, text.length(), textRect);

//文字包裹矩形的坐下标
int textX = cx - textRect.width() / 2;
int textY = cx + textRect.height() / 2;

canvas.drawText(text, textX, textY, paint);
}
}

2. 使用自定义的试图对象

<!--绘制饼状图 -->
<com.example.a01drawround.ui.RoundFillProgress
android:id="@+id/circle2"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center" />