自定义圆形统计图(静态)

    最近项目中有这个需求，将总资产的组成以图形的形态展现出来，所以就写了个自定义View来实现这个需求。

    其实试下这个思路还是挺简单的，因为只需要在onDraw方法中使用画笔画出一个又一个的扇形，就能实现这样的效果。

    以下是我的思路，首先介绍下canvas.drawArc()方法。

    RectF rectF = new RectF(100, 100, 500, 500);
    //绘制扇形
    canvas.drawArc(rectF, startAngle, endAngle, true, paint);

    参数说明：

    rectF：绘制扇形的区域

    startAngle：扇形的开始绘制的角度(是角度值不是弧度值)

    endAngle：扇形绘制结束的角度值

    true：是否从圆心开始画扇形

    paint：画笔

    所以实现起来的思路就是：

    通过给定的数据值，也就是一个包含数字的数组，然后算出每个数字的比重，乘上360度，算出每个数字所占的扇形的角度值，然后通过给不同数字的画上颜色不同的扇形，当处理完所有的数据后，就可以看到由不同颜色扇形所组成的一个圆，这当然不是我们所想要的，所以在最后，以相同的圆心画一个白色的圆，当然这个圆的半径要比刚刚那个彩色的圆的半径要小，最后剩下的就是我们想要的结果，最后在扇形的中间写上我们需要的文字即可。

    这个是画上几个扇形后的效果。

在中间画一个白色的圆之后就变成这样的了

其实这个时候就已经初见成效了。最后加上文字就好了。

最后提供自定义的控件。

SelfStatistics.java

package com.cretin.testprogress.views;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

/**
* Created by cretin on 16/6/23.
*/
public class SelfStatistics extends View {
   private Paint paint;
   //对外提供注入数据的变量
   private float[] datas;
   //自定义view内部存储数据信息
   private List<Infos> listDatas = new ArrayList<>();
   //默认统计图的颜色配置 如果数据大于4 则颜色轮询
   private String colorRes[] = new String[]{"#fdb128", "#4a90e2", "#89c732", "#f46950"};
   private int mPanelWidth;

   public SelfStatistics(Context context) {
       super(context);
       init();
   }

   private void init() {
       paint = new Paint();
   }

   public SelfStatistics(Context context, AttributeSet attrs) {
       super(context, attrs);
       init();
   }

   public SelfStatistics(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       init();
   }

   @TargetApi(Build.VERSION_CODES.LOLLIPOP)
   public SelfStatistics(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
       super(context, attrs, defStyleAttr, defStyleRes);
       init();
   }

   public float[] getDatas() {
       return datas;
   }

   public void startDraw() {
       invalidate();
   }

   public void setDatas(float[] datas) {
       this.datas = datas;
   }

   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       if (datas != null && datas.length > 0) {
           calculateDatas();
           //获取圆心的x坐标
           int center = mPanelWidth / 2;
           //圆环的半径
           int radius = center - 10;
           //消除锯齿
           paint.setAntiAlias(true);
           //给外圈设置样式
           paint.setStyle(Paint.Style.FILL_AND_STROKE);
           //设置StrokeWidth
           paint.setStrokeWidth(20);
           //给外圈设置颜色
           paint.setColor(Color.WHITE);
           //画最外层的圈
           canvas.drawCircle(center, center, radius, paint);
           //设置进度的颜色
           for (Infos infos : listDatas) {
           //定义一个RectF类
               paint.setColor(Color.parseColor(infos.getColor()));
               RectF rectF = new RectF(center - radius, center - radius, center + radius, center + radius);
               //绘制扇形
               canvas.drawArc(rectF, infos.getStartAngle(), infos.getEndAngle(), true, paint);
           }
            //画最外层的圈
           paint.setColor(Color.WHITE);
           canvas.drawCircle(center, center, radius - 50, paint);

           drawTexts(canvas, center);
       }
   }

   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       int widthSize = MeasureSpec.getSize(widthMeasureSpec);
       int widthMode = MeasureSpec.getMode(widthMeasureSpec);

       int heightSize = MeasureSpec.getSize(heightMeasureSpec);
       int heightMode = MeasureSpec.getMode(heightMeasureSpec);

       int width = Math.min(widthSize, heightSize);
       if (widthMode == MeasureSpec.UNSPECIFIED) {
           width = heightSize;
       } else if (heightMode == MeasureSpec.UNSPECIFIED) {
           width = widthSize;
       }
       setMeasuredDimension(width, width);
   }

   @Override
   protected void onSizeChanged(int w, int h, int oldw, int oldh) {
       super.onSizeChanged(w, h, oldw, oldh);
       mPanelWidth = Math.min(w,h);
   }

   private void drawTexts(Canvas canvas, int center) {
       float total = 0;
       for (int i = 0; i < datas.length; i++) {
           total += datas[i];
       }
       String totalStr = total + "元";
       paint.setStrokeWidth(2);
       //设置进度扇形的样式
       paint.setStyle(Paint.Style.FILL);
       //设置文字的大小
       paint.setTextSize(35);
       int widthStr1 = (int) paint.measureText("总资产");
       int widthStr2 = (int) paint.measureText(totalStr);
       paint.setColor(Color.parseColor("#333333"));
       float baseX = center - widthStr1 / 2;
       float baseY = center + 20 / 4;
       Paint.FontMetrics fontMetrics = paint.getFontMetrics();
       float fontTotalHeight = fontMetrics.bottom - fontMetrics.top;
       float offY = fontTotalHeight / 2 - fontMetrics.bottom - 30;
       float newY = baseY + offY;
       canvas.drawText("总资产", baseX, newY, paint);

       paint.setColor(Color.parseColor("#fc561f"));
       float baseX1 = center - widthStr2 / 2;
       float baseY1 = center + 20 / 4;
       Paint.FontMetrics fontMetrics1 = paint.getFontMetrics();
       float fontTotalHeight1 = fontMetrics1.bottom - fontMetrics1.top;
       float offY1 = fontTotalHeight1 / 2 - fontMetrics1.bottom + 30;
       float newY1 = baseY1 + offY1;
       canvas.drawText(totalStr, baseX1, newY1, paint);
   }

   //为绘画做基本的计算
   private void calculateDatas() {
       float total = 0;
       float tempAngle = 270;
       //计算出总数
       for (int i = 0; i < datas.length; i++) {
           total += datas[i];
       }
       //创建不同的Infos对象
       Infos infos;
       for (int i = 0; i < datas.length; i++) {
           infos = new Infos();
           float currData = datas[i];
           float startAngle = tempAngle;
           float endAngle = (float) (currData * 100 / total * 3.6);
           infos.setStartAngle(startAngle);
           infos.setEndAngle(endAngle);
           infos.setColor(colorRes[i % colorRes.length]);
           tempAngle = endAngle + tempAngle;
           listDatas.add(infos);
       }
   }

   class Infos {
       private float startAngle;
       private float endAngle;
       private String color;

       public String getColor() {
           return color;
       }

       public void setColor(String color) {
           this.color = color;
       }

       public float getStartAngle() {
           return startAngle;
       }

       public void setStartAngle(float startAngle) {
           this.startAngle = startAngle;
       }

       public float getEndAngle() {
           return endAngle;
       }

       public void setEndAngle(float endAngle) {
           this.endAngle = endAngle;
       }
   }
}

最后提供使用的方法：

布局文件：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.cretin.testprogress.MainActivity">

   <com.cretin.testprogress.views.SelfStatistics
       android:id="@+id/progress"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
</RelativeLayout>

主函数的调用：

package com.cretin.testprogress;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.cretin.testprogress.views.SelfStatistics;

public class MainActivity extends AppCompatActivity {

   private SelfStatistics selfStatistics;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       selfStatistics = (SelfStatistics) findViewById(R.id.progress);
       float datas[] = new float[]{4000,3000,7000,8000};
       selfStatistics.setDatas(datas);
       selfStatistics.startDraw();
   }
}

最后我写了一个demo，欢迎下载，重在分享，不要积分哦，哈哈

下载地址为：http://download.csdn.net/detail/u010998327/9557747