按照國際慣例，先上效果圖
1.png
2.png
3.png
數據結構
從圖可以看出我們需要標志類型的label 數量value 所占的角度angle 還有代表的顏色，得出數據結構如下
public static class Entry implements Comparable {
public String label;
public int value;
public float angle;
public int color;
public Entry(String label, int value) {
this.label = label;
this.value = value;
}
@Override
public int compareTo(@NonNull Object o) {
Entry e = (Entry) o;
if (value > e.value)
return -1;
if (value < e.value)
return 1;
return 0;
}
}
需求分析
按照數據總數平分一個圓，但是可能存在不能整分的情況，還有可能分的角度太小都看不到。
- 最小角度為2，小于2度的設置成2度，方便查看
- 按照Entry 的value 值分配角度e.angle = (360.0f * e.value) / count + arrearage;（count總個數，arrearage為上一個虧欠的度數）
- 上面虧欠的度數arrearage = e.angle - 2f (<0) ,由下一個項目補償
- 如果全部計算完畢之后arrearage < 0 ，既還有欠費，那么再循環一遍，重新分配一次
- 為了簡化程序，arrearage 虧欠補償是由下一個補償的，沒有考慮平均分攤，而且只有補償之后e.angle + arrearage > 2 角度仍然大于2度的才有資格替上面一個補償虧欠
代碼
注釋已經寫的很清楚了，這里就不再解釋，具體的坐標計算了，里面包括了一些數學的東西，橢圓的知識忘了可以百度一下，還有解決了TextPaint 繪制文字重疊不自動換行的問題，具體參考 Canvas的drawText繪制文本自動換行（支持設置顯示最大行數）。
自定義view ： PieChart.java
public class PieChart extends View {
ArrayList<Entry> mDataSet = new ArrayList<>();
Paint mPaint;
//寫小圓文字 自動換行和限制最大行數
private TextPaint mTextPain;
private static final int MAX_LINE = 2;
public PieChart(Context context) {
super(context);
init();
}
public PieChart(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public PieChart(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public PieChart(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
/**
*
* @param data 由于CompanyInfo 限制，最多只有 6個數據項
* @param centerText
*/
public void setData(ArrayList<Entry> data, String centerText) {
mDataSet.clear();
if (data != null) {
mDataSet.addAll(data);
}
mCenterText = centerText;
preCalcute();
this.requestLayout();
}
public void setData(String[] labels, int values[], String centerText) {
mDataSet.clear();
for (int i = 0; i < labels.length; i++) {
mDataSet.add(new Entry(labels[i], values[i]));
}
mCenterText = centerText;
preCalcute();
this.requestLayout();
}
// 計算角度，顏色
private void preCalcute() {
//計算 顏色（最大->最小 按COLORS數字依次分配，所以先排序
ArrayList<PieChart.Entry> tmp = new ArrayList<>(mDataSet.size());
tmp.addAll(mDataSet);
Collections.sort(tmp);
int i = 0;
for (Entry e : tmp) {
e.color = COLORS[i++];
}
if (mSortData) {
Collections.sort(mDataSet);
}
int count = 0;
for (Entry e : mDataSet) {
count += e.value;
}
mCount = count;
//計算角度
float arrearage = 0;//用于補償的中間變量，初始化0
for (Entry e : mDataSet) {
e.angle = (360.0f * e.value) / count + arrearage;
// 角度太小，就畫不出來了,所以設置最小角度為2，把多占用的讓下一個承擔
if (e.angle < 2f) {
arrearage = e.angle - 2f;//這是欠的度數
e.angle = 2;
} else {
arrearage = 0;
}
}
if (arrearage < 0) {//最后還有欠費，就再循環一遍，讓大家（下一個）分擔下欠費
for (Entry e : mDataSet) {
if (e.angle + arrearage > 2) {//如果分擔后仍然大于2，就讓他分擔
e.angle += arrearage;
break;
}
}
}
Locale locale = Locale.getDefault();
if (tmp.size() < 6) {//下面的小圓小于6個
singleItemWidth = convertDpToPixel(63);
} else {
singleItemWidth = convertDpToPixel(56);
}
if (locale.getLanguage().toLowerCase().startsWith("zh")) {
textSizeLabel = convertDpToPixel(14);
} else {
if (tmp.size() < 6) {
textSizeLabel = convertDpToPixel(13);
} else {
textSizeLabel = convertDpToPixel(11);
}
}
}
//是否需要對數據進行排序
boolean mSortData;
public void setSort(boolean sort) {
mSortData = sort;
}
//預制顏色，從大到小
final int COLORS[] = {0xFF00A7CF, 0xFF8E7BE6, 0xFF0179B1, 0xFF73AC1A, 0xFFF5B910, 0xFFA5BBD1,
0xFF00A7CF, 0xFF8E7BE6, 0xFF0179B1, 0xFF73AC1A, 0xFFF5B910, 0xFFA5BBD1,};
//中心的文字“總量”多語言由外面傳入
String mCenterText;
//總量
int mCount;
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mTextPain = new TextPaint();
mTextPain.setAntiAlias(true);
}
// 上下padding
float padding = convertDpToPixel(12);
// 大圓的半徑
float radius = convertDpToPixel(65);
// 圓環的寬度
float border = radius / 4;
// 小圓半徑
float sradius = convertDpToPixel(15);
//大圓心 數字大小
float textSizeBigCount = convertDpToPixel(18);
//大圓心 文字大小
float textSizeBigCircle2 = convertDpToPixel(20);
// label文字大小
float textSizeLabel = convertDpToPixel(14);
// label數字字大小
float textSizeSmallCount = convertDpToPixel(12);
//線條的寬度
float lineStrokeWidth = convertDpToPixel(1);
//陰影的半徑
float shadownRadisu = convertDpToPixel(2);
//總量的間距
float paddingTotal = convertDpToPixel(5);
//下面圓與上面圓的間距
float paddingBottomCircle = convertDpToPixel(15);
//下面每一個item的寬度
float singleItemWidth = convertDpToPixel(61);
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR2)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//背景涂成白色
canvas.drawColor(0xffffffff);
int width = getWidth();
int height = getHeight();
//計算圓心，
float cx = width / 2;
float cy = radius + padding;//加上頂部偏移，美觀一點
mPaint.setColor(Color.WHITE);
float strokeWidth = mPaint.getStrokeWidth();
//繪制圓環的陰影
// setLayerType(LAYER_TYPE_SOFTWARE,mPaint);
mPaint.setShadowLayer(shadownRadisu, 0, shadownRadisu, 0xffAAAAAA);//第一個參數為模糊半徑，越大越模糊。 第二個參數是陰影離開文字的x橫向距離。 第三個參數是陰影離開文字的Y橫向距離。 第四個參數是陰影顏色
mPaint.setStrokeWidth(border + shadownRadisu / 2);//圓環的著色寬度 1/4大圓環半徑的+1/2 外部陰影寬度
mPaint.setColor(Color.WHITE);
mPaint.setStyle(Paint.Style.STROKE);//白色 描邊
//內部圓環 + 圓環 +陰影
canvas.drawCircle(cx, cy, radius - border / 2, mPaint);
//取消陰影
mPaint.clearShadowLayer();
//恢復線框寬度
mPaint.setStyle(Paint.Style.FILL);
//對于如果只有2個數據，繪制線條， label
if (mDataSet.size() == 2) {
//繪制線條
float ex = 0, ey = 0;
// 橢圓方程 (x/a)^2+(y/b）^2=1
float b = radius + border / 4;//比圓多1/16半徑做橢圓短軸
float a = radius + border;//比圓多1/4半徑做橢圓長軸
/* paint.setColor(Color.RED);
for(float x=-a;x<a;x++){
float y =(float) Math.sqrt(( 1 - x*x/(a*a))*b*b);
canvas.drawPoint(cx+x,cy+y,paint);
canvas.drawPoint(cx+x,cy-y,paint);
}*/
mPaint.setStrokeWidth(lineStrokeWidth);
//繪制 2個 線條和文字label
float tmp = 0;
for (int i = 0; i < mDataSet.size(); i++) {
Entry e = mDataSet.get(i);
int sg = 1;
//所占圓環中心角度 加上上一個角度如果小于180 畫右邊設置右對齊
//這個是為了讓上下兩個圖的文字靠近圓環端能夠對齊在一條直線上
if (tmp + e.angle / 2 > 180) {
sg = -1;
mPaint.setTextAlign(Paint.Align.RIGHT);
} else {
mPaint.setTextAlign(Paint.Align.LEFT);
}
float angle = e.angle;
if (angle > 180) {
angle = 240;
} else {
if (angle > 120)
angle = 120;
}
//圓環上所占區域中心點到原點 與Y軸的夾角
angle = (float) ((angle / 2) * Math.PI / 180);
float k2 = (float) (1 / Math.tan(angle));
//圓環上所占區域中心點到原點直線與 橢圓的交點坐標
ex = (float) Math.sqrt(1 / (1 / (a * a) + (k2 * k2) / (b * b)));
ey = k2 * ex;
//圓環上所占區域中心點到原點直線與 圓的交點坐標
float sx = cx + sg * (float) (radius * Math.sin(angle));
float sy = cy - (float) (radius * Math.cos(angle));
//最邊上（左右邊）到文字對齊的線的距離（默認大小為 半徑 + 1/8 半徑） 既給文字 + 橫線（1/8 半徑） 留出的寬度
float linepad = radius + border * 2;
mPaint.setColor(e.color);
//圓環上的點到橢圓上的點的斜線
canvas.drawLine(sx, sy, cx + sg * ex, cy - ey, mPaint);
//橢圓上的點到文字邊上的 橫線（border * 2）
canvas.drawLine(cx + sg * ex, cy - ey, cx + sg * (linepad), cy - ey, mPaint);
//畫文字描述（這里太長會跑出界面，如果需要處理，請參考下面小圓文字的處理）
mPaint.setColor(0xff5f5f5f);
mPaint.setTextSize(textSizeLabel);
canvas.drawText(e.label, cx + sg * (linepad) + sg * textSizeLabel / 2, cy - ey + textSizeLabel * 1 / 3, mPaint);
tmp += e.angle;//下一個圓環區域中心點的起始角度
}
}
//再繪制白色圓環，把外邊緣的白色漏出來（再畫一次，）
mPaint.setColor(Color.WHITE);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(border + shadownRadisu / 2);
canvas.drawCircle(cx, cy, radius - border / 2, mPaint);
mPaint.setStrokeWidth(strokeWidth);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.save();
//剪切內小圓，再繪制扇形，就成了扇形圓環
Path path = new Path();
path.addCircle(cx, cy, radius - border, Path.Direction.CCW);
canvas.clipPath(path, Region.Op.DIFFERENCE);
float startAngle = -90f;//12點位置
//內圓環的外接正方形
RectF arcRect = new RectF(cx - radius, cy - radius, cx + radius, cy + radius);
for (int i = 0; i < mDataSet.size(); i++) {//繪制扇形圓環
Entry e = mDataSet.get(i);
mPaint.setColor(e.color);
//留1個角度的空白
canvas.drawArc(arcRect, startAngle, e.angle == 360 ? e.angle : (e.angle - 1), true, mPaint);
startAngle += e.angle;
}
canvas.restore();
//繪制大圓中心文字數字
if (!TextUtils.isEmpty(mCenterText)) {
mPaint.setColor(Color.BLACK);
mPaint.setTextSize(textSizeBigCount);
mPaint.setTextAlign(Paint.Align.CENTER);
canvas.drawText("" + mCount, cx, cy - paddingTotal, mPaint);
mPaint.setTextSize(textSizeBigCircle2);
String text = mCenterText;
//只有一個數據的時候，中間文字為數據類型標簽，不是傳進來的mCenterText
if (mDataSet.size() == 1)
text = mDataSet.get(0).label;
canvas.drawText(text, cx, cy + textSizeBigCircle2, mPaint);
}
// 底部繪制 小圓圈，及label
if (mDataSet.size() > 2) {
float scx, scy;
float sdif = singleItemWidth;
//最左邊到第一個item的距離（留白）
float sw = (width - mDataSet.size() * sdif) / 2;
//第一個小圓的圓心
scy = padding + radius * 2 + paddingBottomCircle + sradius;
scx = sw + sdif / 2;
//由于外部限制，這里最多只有6個數據，所以沒做多行小圓 的情況處理
//需求也沒有大量數據項的情況，所以其他情況讀者自行處理
for (int i = 0; i < mDataSet.size(); i++) {
Entry e = mDataSet.get(i);
mPaint.setColor(e.color);
canvas.drawCircle(scx, scy, sradius, mPaint);
mPaint.setColor(Color.WHITE);
mPaint.setTextSize(textSizeSmallCount);
canvas.drawText("" + e.value, scx, scy + textSizeSmallCount * 1 / 3, mPaint);
canvas.save();
mTextPain.setTextSize(textSizeLabel);
mTextPain.setTextAlign(Paint.Align.CENTER);
mTextPain.setColor(0xFF5F5F5F);
//getWidth()表示繪制多寬后換行
int end = e.label.length();
//繪制的文字 色設置固定寬度并自動換行，最多顯示兩行
StaticLayout sl = null;
Class clazz = null;
try {
clazz = Class.forName("android.text.StaticLayout");
} catch (ClassNotFoundException e1) {
e1.printStackTrace();
}
Constructor con = null;
StaticLayout tmp = null;
try {
con = clazz.getConstructor(CharSequence.class, int.class, int.class, TextPaint.class, int.class,
Layout.Alignment.class, TextDirectionHeuristic.class, float.class, float.class, boolean.class,
TextUtils.TruncateAt.class, int.class, int.class);
} catch (NoSuchMethodException e1) {
e1.printStackTrace();
}
try {
tmp = (StaticLayout) con.newInstance("" + e.label, 0, end, mTextPain, (int) sdif - 1, Layout.Alignment.ALIGN_NORMAL, TextDirectionHeuristics.FIRSTSTRONG_LTR, 1.0f, 0.0f, true, TextUtils.TruncateAt.MIDDLE, (int) (sdif - 3 * sradius), 2);
} catch (InstantiationException e1) {
e1.printStackTrace();
} catch (IllegalAccessException e1) {
e1.printStackTrace();
} catch (InvocationTargetException e1) {
e1.printStackTrace();
}
sl = tmp;
// StaticLayout sl = new StaticLayout(""+e.label, 0, end, mTextPain, (int)sdif - 1, Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, true, TextUtils.TruncateAt.MIDDLE, (int)(sdif - 3 * sradius));
//從0,0開始繪制
canvas.translate(scx, scy + sradius + paddingTotal);
sl.draw(canvas);
canvas.restore();
// canvas.drawText(""+e.label,scx,scy+sradius*2+paddingTotal,mPaint);
scx += sdif;
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//這里沒有調用父類，因為默認的只是調用了setMeasuredDimension 方法，下面我們自己調用
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int minheight = (int) (padding + radius * 2 + padding);
if (mDataSet.size() > 2) {
//加上小面小圓+小圓label文字 + 留白的高度(粗略使用7倍小圓半徑)，這里是粗略計算，具體自行調節
minheight += (sradius * 7);
}
setMeasuredDimension(
Math.max(getSuggestedMinimumWidth(),
resolveSize(width,
widthMeasureSpec)),
Math.max(getSuggestedMinimumHeight(),
resolveSize(minheight,
heightMeasureSpec)));
}
float convertDpToPixel(float dp) {
return getResources().getDisplayMetrics().density * dp;
}
public static class Entry implements Comparable {
public String label;
public int value;
public float angle;
public int color;
public Entry(String label, int value) {
this.label = label;
this.value = value;
}
@Override
public int compareTo(@NonNull Object o) {
Entry e = (Entry) o;
if (value > e.value)
return -1;
if (value < e.value)
return 1;
return 0;
}
}
}
使用
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.philos.piechartdemo.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#15212121"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_launcher"
android:drawablePadding="8dp"
android:gravity="center_vertical"
android:padding="8dp"
android:text="單個圓中間顯示名字和數量"
android:textSize="16dp" />
<com.example.philos.piechartdemo.PieChart
android:id="@+id/pie_chart"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#FFFFFF"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_launcher"
android:drawablePadding="8dp"
android:gravity="center_vertical"
android:padding="8dp"
android:text="兩個顯示橫線和名稱"
android:textSize="16dp" />
<com.example.philos.piechartdemo.PieChart
android:id="@+id/pie_chart1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#FFFFFF"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_launcher"
android:drawablePadding="8dp"
android:gravity="center_vertical"
android:padding="8dp"
android:text="兩個顯示橫線和名稱"
android:textSize="16dp" />
<com.example.philos.piechartdemo.PieChart
android:id="@+id/pie_chart12"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#FFFFFF"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_launcher"
android:drawablePadding="8dp"
android:gravity="center_vertical"
android:padding="8dp"
android:text="超過3個顯示小圓"
android:textSize="16dp" />
<com.example.philos.piechartdemo.PieChart
android:id="@+id/pie_chart2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#FFFFFF"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_launcher"
android:drawablePadding="8dp"
android:gravity="center_vertical"
android:padding="8dp"
android:text="最多6項"
android:textSize="16dp" />
<com.example.philos.piechartdemo.PieChart
android:id="@+id/pie_chart3"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
public class MainActivity extends AppCompatActivity {
private PieChart mPieChart;
private PieChart mPieChart1;
private PieChart mPieChart12;
private PieChart mPieChart2;
private PieChart mPieChart3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPieChart = (PieChart) findViewById(R.id.pie_chart);
mPieChart1 = (PieChart) findViewById(R.id.pie_chart1);
mPieChart12 = (PieChart) findViewById(R.id.pie_chart12);
mPieChart2 = (PieChart) findViewById(R.id.pie_chart2);
mPieChart3 = (PieChart) findViewById(R.id.pie_chart3);
CompanyInfo companyInfo = new CompanyInfo(20, 0, 0, 0, 0, 0);
ArrayList tmp = createPieChart(companyInfo);
mPieChart.setData(tmp, "總共有");
CompanyInfo companyInfo1 = new CompanyInfo(450, 3, 0, 0, 0, 0);
ArrayList tmp1 = createPieChart(companyInfo1);
mPieChart1.setData(tmp1, "總共有");
CompanyInfo companyInfo12 = new CompanyInfo(370, 0, 0, 600, 0, 0);
ArrayList tmp12 = createPieChart(companyInfo12);
mPieChart12.setData(tmp12, "總共有");
CompanyInfo companyInfo2 = new CompanyInfo(0, 0, 0, 50, 200, 10);
ArrayList tmp2 = createPieChart(companyInfo2);
mPieChart2.setData(tmp2, "總共有");
CompanyInfo companyInfo3 = new CompanyInfo(15000, 10, 190, 7, 210, 80);
ArrayList tmp3 = createPieChart(companyInfo3);
mPieChart3.setData(tmp3, "總共有");
}
private ArrayList createPieChart(CompanyInfo companyInfo) {
ArrayList tmp = new ArrayList();
int count = 0;
if(companyInfo.trademarks_count > 0) {
count += companyInfo.trademarks_count;
tmp.add(new PieChart.Entry("商標",companyInfo.trademarks_count));//trademark
}
if(companyInfo.domains_count > 0) {
count += companyInfo.domains_count;
tmp.add(new PieChart.Entry("域名",companyInfo.domains_count));//trademark
}
if(companyInfo.patents_count > 0) {
count += companyInfo.patents_count;
tmp.add(new PieChart.Entry("專利",companyInfo.patents_count));//trademark
}
if(companyInfo.soft_count > 0) {
count += companyInfo.soft_count;
tmp.add(new PieChart.Entry("軟件著作權",companyInfo.soft_count));//trademark
}
if(companyInfo.original_count > 0) {
count += companyInfo.original_count;
tmp.add(new PieChart.Entry("原創著作權公司資質認證",companyInfo.original_count));//trademark
}
if(companyInfo.certificate_count > 0) {
count += companyInfo.certificate_count;
tmp.add(new PieChart.Entry("公司資質認證",companyInfo.certificate_count));//trademark
}
return tmp;
}
class CompanyInfo {
public int trademarks_count;
public int domains_count;
public int patents_count;
public int soft_count;
public int original_count;
public int certificate_count;
public CompanyInfo(int trademarks_count, int domains_count, int patents_count, int soft_count, int original_count, int certificate_count) {
this.trademarks_count = trademarks_count;
this.domains_count = domains_count;
this.patents_count = patents_count;
this.soft_count = soft_count;
this.original_count = original_count;
this.certificate_count = certificate_count;
}
}
}
