Android自定義View-畫扇形比例圖
扇形統計圖，顯示百分比
ShanView自定義類：
package com.wonder.collectionsystem.view;
import java.util.List;
import com.wonder.collectionsystem.bean.ShanData;
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.util.AttributeSet;
import android.view.View;
/**
* @author Administrator
* @時間 下午4:18:44
* @描述 扇形統計圖
*/
public class ShanView extends View {
private int mHeight, mWidth;// 寬高
private Paint mPaint;// 扇形的畫筆
private Paint mTextPaint;// 畫文字的畫筆
private int centerX, centerY;// 中心座標
private int maxNum;// 扇形圖的最大塊數 超過的item就合併到其他
// 顏色 默認的顏色
private int[] mColors = { Color.parseColor("#9dff9d"), Color.parseColor("#50b9f1"),
Color.parseColor("#ffa4c4"), Color.parseColor("#ffd2da"), Color.parseColor("#fff579") };
private int radius = 100;// 半徑
private int total;// 數據的總和
private int[] datas;// 數據集
private String[] texts;// 每個數據對應的文字集
private String text = "待辦工單";// 待辦工單數量
public ShanView(Context context) {
super(context);
}
public ShanView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
// 初始化
private void init() {
mPaint = new Paint();
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setAntiAlias(true);
mTextPaint = new Paint();
mTextPaint.setTextSize(40);
mTextPaint.setStrokeWidth(3);
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.BLACK);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 獲取寬高 不要設置wrap_content
mHeight = MeasureSpec.getSize(heightMeasureSpec);
mWidth = MeasureSpec.getSize(widthMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
int oldL = left;
int oldT = top;
int oldB = right;
int oldR = bottom;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 畫布中心點
centerX = (getRight() - getLeft()) / 2;
centerY = (getBottom() - getTop()) / 2;
int min = mHeight > mWidth ? mWidth : mHeight;
if (radius > min / 2) {
radius = (int) ((min - getPaddingTop() - getPaddingBottom()) / 3.5);
setRadius(radius);// 根據半徑大小設置字體大小
}
// 無數據
if (datas == null || datas.length == 0) {
// 在中心點畫白色圓圈
mPaint.setColor(Color.parseColor("#ffffff"));
canvas.drawCircle(centerX, centerY, radius, mPaint);
// 畫文字
text = "待辦工單(0)";
drawTextRect(canvas, Color.parseColor("#efcc06"));// 黃
} else {
canvas.save();// 畫扇形
drawCircle(canvas);
canvas.restore();
canvas.save();
drawLineAndText(canvas);// 線與文字
canvas.restore();
}
}
/**
** 畫扇形
*
* @param canvas
*/
private void drawCircle(Canvas canvas) {
RectF rect = new RectF((float) (centerX - radius), centerY - radius, centerX + radius,
centerY + radius);
int start = 0;
int num = maxNum < datas.length ? maxNum : datas.length;
for (int i = 0; i < num; i++) {
float angles = (float) ((datas[i] * 1.0f / total) * 360);
if (i == (num - 1)) {// 最後一塊,添加該判斷後不顯示“其他”部分
angles = 360 - start;
}
mPaint.setColor(mColors[i % mColors.length]);
canvas.drawArc(rect, start, angles, true, mPaint);
start += angles;
}
drawTextRect(canvas, Color.parseColor("#ffffff"));// 畫文字 白
}
/**
** 畫文字
*
* @param canvas 畫布
* @param color 字體顏色
*/
private void drawTextRect(Canvas canvas, int color) {
// 畫文字
Rect centerTextRec = new Rect();
Paint paint = new Paint();
paint.setColor(color);
paint.setTextSize(radius / 4);
paint.setStrokeWidth(10);
paint.setAntiAlias(true);
paint.getTextBounds(text, 0, text.length(), centerTextRec);
int centerW = centerTextRec.width();
int centerH = centerTextRec.height();
canvas.drawText(text, 0, text.length(), centerX - (centerW / 2), centerY + (centerH / 3), paint);
}
/**
** 遍歷數據畫線與文字
*
* @param canvas
*/
private void drawLineAndText(Canvas canvas) {
int start = 0;
canvas.translate(centerX, centerY);// 平移畫布到中心
mPaint.setStrokeWidth(4);// 設置線條的粗細
int num = maxNum < datas.length ? maxNum : datas.length;
for (int i = 0; i < num; i++) {
float angles = (float) ((datas[i] * 1.0f / total) * 360);
if (i == (num - 1)) {// 最後一塊,添加該判斷後不顯示“其他”部分
angles = 360 - start;
}
drawLine(canvas, start, angles, texts[i], mColors[i % mColors.length]);
start += angles;
}
// // 畫其他
// if (start < 359) {
// drawLine(canvas, start, 360 - start, "其他", Color.GRAY);
// }
}
/**
** 畫線與文字
*
* @param canvas
* @param start
* @param angles
* @param text
* @param color
*/
private void drawLine(Canvas canvas, int start, float angles, String text, int color) {
mPaint.setColor(color);
int line = 75;// line爲伸出去的直線的長度
float startX = (float) ((radius - 20) * Math.cos((2 * start + angles) / 2 * Math.PI / 180));
float startY = (float) ((radius - 20) * Math.sin((2 * start + angles) / 2 * Math.PI / 180));
float stopX = (float) ((radius + line) * Math.cos((2 * start + angles) / 2 * Math.PI / 180));
float stopY = (float) ((radius + line) * Math.sin((2 * start + angles) / 2 * Math.PI / 180));
// 畫凸起的指示直線
canvas.drawLine(startX, startY, stopX, stopY, mPaint);
// 測量文字大小
Rect rect = new Rect();
mTextPaint.getTextBounds(text, 0, text.length(), rect);
int w = rect.width();
int h = rect.height();
int offset = 10;// 文字在橫線的偏移量
// 畫橫線
int hLine = 50;// 橫線的長度
int endX;
if (stopX > 0) {// 右
endX = (centerX - getPaddingRight() - 20);
endX = (int) (stopX + hLine);// hLine爲橫線的長度
} else {// 左
endX = (-centerX + getPaddingLeft() + 20);
endX = (int) (stopX - hLine);// hLine爲橫線的長度
}
// 畫橫線
canvas.drawLine(stopX, stopY, endX, stopY, mPaint);
// 畫圓點
canvas.drawCircle(endX, stopY, (float) 3.6, mPaint);
// 判斷橫線是畫在左邊還是右邊
int dx = (int) (endX - stopX);
// 畫文字
canvas.drawText(text, 0, text.length(), dx > 0 ? endX + offset : endX - w - offset, stopY - 5,
mTextPaint);
// 測量百分比大小
String percentage = angles / 3.60 + "";
percentage = "(" + percentage.substring(0, percentage.length() > 4 ? 4 : percentage.length()) + "%)";
mTextPaint.getTextBounds(percentage, 0, percentage.length(), rect);
w = rect.width();// 百分比字體的寬度
// 畫百分比
canvas.drawText(percentage, 0, percentage.length(), dx > 0 ? endX + offset : endX - w - offset,
stopY + h, mTextPaint);
}
/**
* 設置扇形區域顏色
*
* @param mColors
*/
public void setColors(int[] mColors) {
this.mColors = mColors;
invalidate();// 繪製刷新
}
/**
* 設置字體大小
*
* @param mTextSize
*/
public void setTextSize(int mTextSize) {
mTextPaint.setTextSize(mTextSize);
invalidate();// 繪製刷新
}
/**
** 設置半徑大小
*
* @param radius
*/
public void setRadius(int radius) {
this.radius = radius;
setTextSize(radius / 6);
invalidate();// 繪製刷新
}
/**
** 設置字體描述
*
* @param str
*/
public void setTextDescript(String str) {
text = str;
}
/**
* *設置最大塊數
*
* @param maxNum
*/
public void setMaxNum(int maxNum) {
this.maxNum = maxNum;
invalidate();// 繪製刷新
}
/**
* 設置數據
*/
public void setData(List<ShanData> listData) {
if (listData != null) {
text = "待辦工單";// 初始化
total = 0;// 總數置爲0
int size = listData.size();
datas = new int[size];
texts = new String[size];
for (int i = 0; i < size; i++) {
ShanData shanData = listData.get(i);
total += shanData.getData();
datas[i] = shanData.getData();
texts[i] = shanData.getText() + "(" + datas[i] + ")";
}
text = text + "(" + total + ")";
}
invalidate();// 繪製刷新
}
}
布居中調用：<color name="none">#00FFFFFF</color> <!-- 透明 -->
<com.wonder.collectionsystem.view.ShanView
android:id="@+id/shanView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/none"/>
Activity中使用：
設置最大顯示部分，下面設置的5，即可以將整個扇形劃分爲5塊。
ShanView shanView = UIUtil.findView(view, R.id.shanView);
shanView.setMaxNum(5);// 設置可以顯示的最大數值 該數值之後的會合併爲其他
shanView.setRadius(205);// 設置圓盤半徑
給扇形界面設置數據：
listData = new ArrayList<ShanData>();
listData.clear();
ShanData shanData = new ShanData();// 數據實體類
shanData.setData(6);
shanData.setText("計量異常");
listData.add(shanData);
shanData = new ShanData();
shanData.setData(8);
shanData.setText("採集異常");
listData.add(shanData);
shanView.setData(listData);// 將list數據傳遞到view中
public class ShanData {
private int data;
private String text;
public int getData() {
return data;
}
public void setData(int data) {
this.data = data;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}