Android繪制自定義餅狀圖
- Android繪制自定義餅狀圖
- 繪制圓環
- 建立自定義圓環對應的類
- 修改布局檔案 使用自定義的 視圖對象
- 繪制餅狀圖
效果
Android繪制自定義餅狀圖Android繪制自定義餅狀圖 1.繪制圓環
草圖
Android繪制自定義餅狀圖Android繪制自定義餅狀圖 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,);
}
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(),);
//2. 設定顔色
private int roundCircleColor = Color.GRAY; //圓環顔色
private int roundProgressColor = Color.RED; //進度顔色
private int roundTextColor = Color.BLUE; //字型顔色
//3. 字型大小
private int roundTextSize = UIUtils.px2dp(this.getContext(),);
private float roundMax = ;
private float roundProgress = f;
//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/;
int cy = hight/;
//半徑
int radios = width/ - roundCircleWidth/;
//1. 繪制圓環
paint.setColor(roundCircleColor);
paint.setStyle(Paint.Style.STROKE); //邊界
paint.setStrokeWidth(roundCircleWidth);
canvas.drawCircle(cx,cy,radios,paint);
//2. 繪制進度
//繪制圓形對應的矩形的左上 右下坐标
RectF oval = new RectF(roundCircleWidth/,roundCircleWidth/,width-roundCircleWidth/,hight-roundCircleWidth/);
float startAngle = ;
float sweepAngle = roundProgress*/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();//
paint.getTextBounds(text,,text.length(),textRect);
//文字包裹矩形的坐下标
int textX = cx- textRect.width()/;
int textY = cx+ textRect.height()/;
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(), );
//2. 設定顔色
private int roundCircleColor = Color.GRAY; //圓環顔色
private int roundProgressColor = Color.RED; //進度顔色
private int roundTextColor = Color.BLUE; //字型顔色
//3. 字型大小
private int roundTextSize = UIUtils.px2dp(this.getContext(), );
private float roundMax = ;
private float roundProgress = f;
//4. 畫筆
private Paint paint;
public RoundFillProgress(Context context) {
this(context, null);
}
public RoundFillProgress(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, );
}
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 / ;
int cy = hight / ;
//半徑
int radios = width / - roundCircleWidth / ;
//1. 繪制圓環
paint.setColor(roundCircleColor);
paint.setStyle(Paint.Style.FILL); //邊界
paint.setStrokeWidth(roundCircleWidth);
canvas.drawCircle(cx, cy, radios, paint);
//2. 繪制進度
//繪制圓形對應的矩形的左上 右下坐标
RectF oval = new RectF(roundCircleWidth / , roundCircleWidth / , width - roundCircleWidth / , hight - roundCircleWidth / );
float startAngle = ;
float sweepAngle = roundProgress * / 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();
paint.getTextBounds(text, , text.length(), textRect);
//文字包裹矩形的坐下标
int textX = cx - textRect.width() / ;
int textY = cx + textRect.height() / ;
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" />
