Android 自定义view --圆形百分比（进度条）

起因

    最近公司项目有需求需要用到轻量级图表如下图，是一些简单的扇形图，圆形图，折线图，虽然有好用的三方库MPChart      （教程地址http://blog.csdn.net/wingichoy/article/details/50428246），      但是过于庞大，像这样的简约的界面明显不合适，又因为许久没有坚持写博客，觉得自己很是堕落，深知自学不易，于是便想写一些博客来帮助后来像我一样的初学者，所以便想把这些效果写一个系列。其中包括：      1.圆形百分比图表        2.简易折线图图表      3.简易柱状图图表

效果图

说了这么多没有效果图还是废话，效果图如下：

预备知识

本篇博客的预备知识内容有:
1.自定义属性
2.自定义view
关于以上两点，可以查看 Hongyang大神的博客:自定义View(一)

知识点补充

如果你已经掌握了以上的基本知识，那么可以开始本篇博客的内容啦。但是还是有几点内容补充。

1.MeasureSpec对象包含了测量的模式和大小。他是一个32位的int值，其中高两位为测量的模式，低30位是测量的大小。采用位运算和运行效率有关。所以可以从一个MeasureSpec对象分别获取模式和值 如：

//获取模式  值为 EXACTLY AT_MOST UNSPECIFIED  int specMode = MeasureSpec.getMode(measureSpec);  //获取测量值  int specSize = MeasureSpec.getSize(measureSpec);

2.画扇形,调用drawArc()方法，其中第一个参数是圆所在的矩形，第二个参数是开始的弧度，值得主意的是，最顶的弧度是270度，而地图东方向的弧度为0.第三个参数是需要画的弧度，第四个参数是一个布尔值，表示是否连接圆心，画为扇形，第五个是Paint，即所需要的画笔。

canvas.drawArc(rect, 270, mEndAngle, true, sectorPaint);

现在开始吧

1.首先分析需求，我们的圆形进度总共分为三层，  最底层是一个大园形，作为底色。  第二层是一个扇形，大小跟底色一样，用来表示进度。  第三层是一个小圆形，比背景色小，用于实现弧线的效果。    2.新建一个类叫做CirclePercentView.java 他继承与View类重写他的构造函数，来获取他的自定义属性。

    public CirclePercentView(Context context) {          this(context, null);      }        public CirclePercentView(Context context, AttributeSet attrs) {          this(context, attrs, 0);      }        public CirclePercentView(Context context, AttributeSet attrs, int defStyleAttr) {          super(context, attrs, defStyleAttr);          // 获取自定义属性          TypedArray a=context.obtainStyledAttributes(attrs,R.styleable.CirclePercentView, defStyleAttr, 0);    //获取色带的宽度          mStripeWidth = a.getDimension(R.styleable.CirclePercentView_stripeWidth, PxUtils.dpToPx(30, context));          //获取当前的百分比          mCurPercent = a.getInteger(R.styleable.CirclePercentView_percent, 0);          //获取小园的颜色          mSmallColor = a.getColor(R.styleable.CirclePercentView_smallColor,0xffafb4db);          //获取大圆的颜色          mBigColor = a.getColor(R.styleable.CirclePercentView_bigColor,0xff6950a1);          //获取中心文字的大小          mCenterTextSize = a.getDimensionPixelSize(R.styleable.CirclePercentView_centerTextSize,PxUtils.spToPx(20,context));          //获取园的半径          mRadius = a.getDimensionPixelSize(R.styleable.CirclePercentView_radius,PxUtils.dpToPx(100,context));      }   

3.获取到了自定义属性以后，我们来测量这个view，告诉系统这个view有多大

    @Override      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {          //获取测量模式          int widthMode = MeasureSpec.getMode(widthMeasureSpec);          int heightMode = MeasureSpec.getMode(heightMeasureSpec);          //获取测量大小          int widthSize = MeasureSpec.getSize(widthMeasureSpec);          int heightSize = MeasureSpec.getSize(heightMeasureSpec);          //如果为确定大小值，则圆的半径为宽度/2          if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY) {              mRadius = widthSize / 2;              x = widthSize / 2;              y = heightSize / 2;              mWidth = widthSize;              mHeight = heightSize;          }          //如果为wrap_content 那么View大小为圆的半径大小*2          if(widthMode == MeasureSpec.AT_MOST&&heightMode ==MeasureSpec.AT_MOST){              mWidth = (int) (mRadius*2);              mHeight = (int) (mRadius*2);              x = mRadius;              y = mRadius;            }          //设置视图的大小          setMeasuredDimension(mWidth,mHeight);      }

4.测量完成后，我们就要开始画view了。首先画大圆,之后画扇形图，最后画小圆盖住  就有了圆形进度条的效果，之后把百分比进度文字画在上面就大功告成啦。

具体步骤如图：

    @Override      protected void onDraw(Canvas canvas) {              mEndAngle = (int) (mCurPercent * 3.6);          //绘制大圆          Paint bigCirclePaint = new Paint();          //消除锯齿          bigCirclePaint.setAntiAlias(true);          bigCirclePaint.setColor(mBigColor);          //x,y 为圆心坐标 mRadius为半径          canvas.drawCircle(x, y, mRadius, bigCirclePaint);             //饼状图          Paint sectorPaint = new Paint();          sectorPaint.setColor(mSmallColor);          sectorPaint.setAntiAlias(true);          RectF rect = new RectF(0, 0, mWidth, mHeight);          //参数说明见知识补充          canvas.drawArc(rect, 270, mEndAngle, true, sectorPaint);              //绘制小圆          Paint smallCirclePaint = new Paint();          smallCirclePaint.setAntiAlias(true);          smallCirclePaint.setColor(mBigColor);          //圆心是相同的 不过半径有差别，这个差别就是我们的 色带宽度          canvas.drawCircle(x, y, mRadius - mStripeWidth, smallCirclePaint);              //绘制文本          Paint textPaint = new Paint();          String text = mCurPercent + "%";            textPaint.setTextSize(mCenterTextSize);          //测量字符串长度          float textLength = textPaint.measureText(text);            textPaint.setColor(Color.WHITE);          //把文本画在圆心居中          canvas.drawText(text, x - textLength/2, y, textPaint);  }

值得注意的是，在编写的过程中，文字的位置总是不对，但是根据画图计算，  公式是没错的，最后才发现我先测量了字符串长度，又修改了字体的大小导致偏差。所以一定要注意这些细节，先改变字体大小，再去测量。  5.添加setPercent方法

public void setPercent(int percent) {  //百分比不可能超过100 如果超过100则抛出异常           if (percent > 100) {              throw new IllegalArgumentException("percent must less than 100!");          }            setCurPercent(percent);          }   //内部设置百分比 用于动画效果      private void setCurPercent(int percent) {            mPercent = percent;            new Thread(new Runnable() {              @Override              public void run() {                  for(int i =0;i<mPercent;i++){                      try {                          Thread.sleep(15);                      } catch (InterruptedException e) {                          e.printStackTrace();                      }                      mCurPercent = i;                      CirclePercentView.this.postInvalidate();                  }                  }            }).start();        }

这里在setPercent改变的时候，开启一个线程，来不断重绘view，达到一个动画效果。其实view的动画效果就是不停地重绘  (即执行onDraw()，因为每次执行onDraw()里面的参数会变化，所以会看到不同的画面)。这样便完成了一个轻量级的圆形百分比进度条自定义View。

你可以在https://github.com/githubwing/CirclePercentView克隆到源码。（求star）
你还可以看本系列第二篇博客：简易折线图，链接：http://blog.csdn.net/wingichoy/article/details/50434634。