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

转载请注明出处：[http://blog.csdn.net/wingichoy/article/details/50334595](http://blog.csdn.net/wingichoy/article/details/50334595) #### 起因 ~~~ **注：本文由于是在学习过程中写的，存在大量问题(overdraw onDraw new对象)，请读者们不要被误导！！解决办法见后面的博客。** 最近公司项目有需求需要用到轻量级图表如下图，是一些简单的扇形图，圆形图，折线图，虽然有好用的三方库MPChart （教程地址http://blog.csdn.net/wingichoy/article/details/50428246）， 但是过于庞大，像这样的简约的界面明显不合适，又因为许久没有坚持写博客，觉得自己很是堕落，深知自学不易，于是便想写一些博客来帮助后来像我一样的初学者，所以便想把这些效果写一个系列。其中包括： 1.圆形百分比图表 2.简易折线图图表 3.简易柱状图图表 ~~~  #### 效果图 说了这么多没有效果图还是废话，效果图如下：  #### 预备知识 本篇博客的预备知识内容有: 1.自定义属性 2.自定义view 关于以上两点，可以查看 [Hongyang大神的博客:自定义View(一)](http://blog.csdn.net/lmj623565791/article/details/24252901 "Android 自定义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](https://github.com/githubwing/CirclePercentView)克隆到源码。（求star） 你还可以看本系列第二篇博客：简易折线图，链接：[http://blog.csdn.net/wingichoy/article/details/50434634](http://blog.csdn.net/wingichoy/article/details/50434634)。