先看效果(原谅我的渣像素)，进度的刻度、宽度、颜色可以随意设定：

【项目github地址: https://github.com/zhangke3016/CircleLoading】

实现起来并不难，通过本文，我们可以学到：

1、自定义属性的使用。

2、shader的使用

3、自定义View中对onmeasure的处理

4、增深对PathMeasure工具类的了解

5、最主要的是对自定义View有个比较清晰的思路认识

一、原理介绍

做这样一个进度效果，我们可以拆分如下步骤来实现：

1、从外部圆环开始测量绘制；

2、再加入刻度条效果；

3、再加入刻度随进度增加而增加效果；

4、增加自定义属性增加可定制性；

5、控件使用方法介绍

【zhangke3016 http://blog.csdn.net/zhangke3016】

OK,有了这个思路，那我们开始吧：

1、测量绘制外部圆环

首先我们要开始绘制外部的圆环，这步很简单，主要是使用canvas的drawArc()方法，

  1.     /*
  2.      * @param oval 画弧线矩形区域
  3.      * @param startAngle 开始的角度
  4.      * @param sweepAngle 划过的角度
  5.      * @param useCenter 如果为true 为实心圆弧
  6.      * @param paint     画笔
  7.      * /
  8.  public void drawArc(RectF oval, float startAngle, float sweepAngle,boolean useCenter,Paint paint)

这个相对简单，主要是确定开始角度，并不断增加绘制划过角度，圆弧就出现在界面中了，这里需要注意的是RectF oval的大小确定：

在确定RectF oval之前，我们要先测量确定当前控件的宽高，根据当前控件的宽高来确定oval的合适大小。

测量当前控件的大小一般我们在onmeasure()方法中处理，resolveMeasured()方法传递两个参数，第一各参数为widthMeasureSpec或者heightMeasureSpec，第二个参数为期望值也就是默认值。

  1. @Override
  2.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  3.     setMeasuredDimension(resolveMeasured(widthMeasureSpec, nDesired), resolveMeasured(heightMeasureSpec, nDesired));
  4.     }
  6. /**
  7.      *
  8.      * @param measureSpec
  9.      * @param desired
  10.      * @return
  11.      */
  12.     private int resolveMeasured(int measureSpec, int desired)
  13.     {
  14.         int result = 0;
  15.         int specSize = MeasureSpec.getSize(measureSpec);
  16.         switch (MeasureSpec.getMode(measureSpec)) {
  17.             case MeasureSpec.UNSPECIFIED: //
  18.                 result = desired;
  19.                 break;
  20.             case MeasureSpec.AT_MOST:  //wrap-content
  21.                 result = Math.min(specSize, desired);
  22.                 break;
  23.             case MeasureSpec.EXACTLY:  //match-content
  24.             default:
  25.                 result = specSize;
  26.         }
  27.         return result;
  28.     }

在测量之后我们就可以来求oval的具体大小 ，我把这步操作放在了onSizeChanged方法中，求出最小一边的一半减去圆环的宽度，得到圆弧的半径，然后根据半径以控件中心为中心绘制我们所需要的矩形区域。

  1. radiu = (int) ((Math.min(getWidth(), getHeight()))/2-mPaint.getStrokeWidth());
  3.             oval.left = getWidth()/2-radiu;
  4.             oval.top = getHeight()/2-radiu;
  5.             oval.right = getWidth()/2+radiu;
  6.             oval.bottom = getHeight()/2+radiu;

这样下来，基本上就可以绘制比较理想的弧线了，在这里也把绘制中心文字也说下吧，主要通过getTextBounds()方法获取文字区域的宽高，然后在drawText()方法中将坐标进行适当偏移以使文字居中显示。

  1. String strProgressText = "";
  2.         if(mOnProgressListener !=null){//如果不为空  则为接口返回的值
  3.             strProgressText = mOnProgressListener.OnProgress(mMax, mProgress);
  4.         }else{
  5.             strProgressText = mProgress+"/"+mMax;
  6.         }
  7.         mTextPaint.getTextBounds(strProgressText, 0, strProgressText.length(), bounds);
  8.         canvas.drawText(strProgressText, oval.centerX()-bounds.width()/2, oval.centerY()+bounds.height()/2, mTextPaint);

最后还有一个小点就是渐变色的绘制，用的SweepGradient，我们可以看下Shader的子类,shader类是很强大的，类似与圆形图片、渐变效果都可以用它来实现，这里就不过多展开了：

  1. SweepGradient sweepGradient = new SweepGradient(getWidth()/2, getHeight()/2, colors, null);
  2.   p.setShader(sweepGradient);

到这里为止，我们的圆环已经绘制好了，包括中间的文字以及圆环的渐变效果都已经实现了，就是这样的：

2、加入刻度效果

  1. 接下来要加入刻度效果，实现思路是这样的，我先默认实现两个圆弧(注意这两个圆弧只是我们假定添加的，并不是真正加在控件中显示)，然后获取相同角度，根据相对位置获取两个圆环上的点进行连线，将这两个点连起的刻度线封装成对象添加在集合中，最后在onDraw方法中遍历集合，进行绘制。
  1. oval2 = new RectF();//内环
  2.             oval2.left = getWidth()/2-radiu/4f*3;
  3.             oval2.top = getHeight()/2-radiu/4f*3;
  4.             oval2.right = getWidth()/2+radiu/4f*3;
  5.             oval2.bottom = getHeight()/2+radiu/4f*3;
  7.             oval3 = new RectF();//外环
  8.             oval3.left = getWidth()/2-radiu/8f*7;
  9.             oval3.top = getHeight()/2-radiu/8f*7;
  10.             oval3.right = getWidth()/2+radiu/8f*7;
  11.             oval3.bottom = getHeight()/2+radiu/8f*7;
  13. //然后初始化数据
  14.     /**
  15.      * 初始化数据
  16.      */
  17.     private void initData() {
  18.         mLinesList.clear();
  20.         Path path = new Path();
  21.         Path path1 = new Path();
  22.         //从startAngle开始 绘制180角度
  23.         path.addArc(oval2, mStartAngle, mGraduationSweepAngle);
  24.         path1.addArc(oval3, mStartAngle, mGraduationSweepAngle);
  26.         PathMeasure pm = new PathMeasure(path, false);
  27.         float itemLength = pm.getLength()/(nGraduationCount-1);
  29.         PathMeasure pm1 = new PathMeasure(path1, false);
  31.         float[] pos = new float[2];
  32.         float[] postemp = new float[2];
  33.         for (int i = 0; i < nGraduationCount; i++) {
  34.             pm.getPosTan(itemLength*i, pos , null );
  35.      pm1.getPosTan(itemLength*i/pm.getLength()*pm1.getLength(), postemp , null);
  36.             Line line = new Line();
  37.             line.p1.x = pos[0];
  38.             line.p1.y = pos[1];
  39.             line.p2.x = postemp[0];
  40.             line.p2.y = postemp[1];
  41.             mLinesList.add(line);
  42.         }
  43.     }
  45. //ondraw方法：
  46. for (int i = 0; i < mLinesList.size(); i++) {
  47.                 Line line = mLinesList.get(i);
  48.                 canvas.drawLine(line.p1.x, line.p1.y, line.p2.x, line.p2.y, mRollPaint);
  49.             }

这里用到了PathMeasure这个辅助工具，这里简单讲一下：

  1. public PathMeasure()
  3. //path：需要测量的path  forceClosed：是否关闭path
  4. public PathMeasure(Path path, boolean forceClosed)
  6. //指定需要测量的path
  7. public void setPath(Path path, boolean forceClosed)
  9. //返回当前path的总长度。
  10. getLength()
  12. //返回值是boolean，如过path为空，则返回false 传入参数有三个：
  13. //distance：传入距离起点的距离。
  14. //pos[]:意思是position，分别对应点的x，y坐标
  15. //tan[]：获取切线值，不常用。
  16. public boolean getPosTan(float distance, float pos[], float tan[])
  18. //返回一个处理好的matrix，但是这个matrix是以左上角作为旋转点，所以需要将这个点移动到中心点。 其中一个参数flags，指这个martrix需要什么信息。flags的值有如下两个
  19. PathMeasure.POSITION_MATRIX_FLAG:位置信息
  20. pathMeasure.TANGENT_MATRIX_FLAG:切边信息，方位角信息
  21. public boolean getMatrix(float distance, Matrix matrix, int flags)
  23. //这个方法返回boolean，如果截取的长度为0则返回false，否则为true。参数如下
  24. //startD：起始距离
  25. //stopD：终点距离
  26. //dst：接收截取的path
  27. //startWithMoveTo：是否把截取的path，moveto到起始点。
  28. public boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)

3、加入刻度随进度增加而增加效果,并增加进度变化回调方便操作

加入刻度随进度增加而增加，我们可以这样想，首先我总的刻度数是一定的，判断划过的角度占圆周的百分比，随之就可以得到划过刻度数占总刻度数的百分比，进而就求出划过的刻度数了。

  1. for (int i = 0; i < Math.round(mSweepAngle*nGraduationCount/360f); i++) {
  2.             if(i<mLinesList.size()){
  3.                 Line line = mLinesList.get(i);
  4.                 canvas.drawLine(line.p1.x, line.p1.y, line.p2.x, line.p2.y, mRollDrawPaint);
  5.             }
  6.         }

将划过的刻度数用画笔再绘制一次，随进度增加的刻度效果就出现啦！

  1. /**
  2.      * 设置进度监听
  3.      * @param mOnProgressListener
  4.      */
  5.     public void setOnProgressListener(OnProgressListener mOnProgressListener) {
  6.         this.mOnProgressListener = mOnProgressListener;
  7.     }
  8.     /**
  9.      * 用于外部判断当前进度状态
  10.      */
  11.     interface OnProgressListener{
  12.         /**
  13.          * 返回中间部分文字内容
  14.          * @param max
  15.          * @param progress
  16.          * @return
  17.          */
  18.         String OnProgress(int max,int progress);
  19.     }

设置回调监听，这样在每次进度变化的时候，可以随意变化中间部分文字显示的内容。

4、增加自定义属性增加可定制性

attrs.xml:

  1.        <declare-styleable name="LoadingStyle">
  2.         <attr name="textSize" format="dimension|reference"/><!-- 字体大小 -->
  3.         <attr name="textColor" format="color|reference"/><!-- 字体颜色 -->
  4.         <attr name="strokeWidth" format="dimension|reference"/><!-- 圆环大小 -->
  5.         <attr name="isShowGraduationBackground" format="boolean"/><!-- 是否显示背景刻度 -->
  6.         <attr name="isShowOutRoll" format="boolean"/><!-- 是否显示外部进度框 -->
  7.         <attr name="startAngle" format="integer|reference"/><!-- 开始的角度 -->
  8.         <attr name="max" format="integer|reference"/><!-- 最大值 -->
  9.         <attr name="progress" format="integer|reference"/><!-- 默认进度值 -->
  10.         <attr name="graduationBackgroundColor" format="color|reference"/><!-- 刻度的背景颜色 -->
  11.         <attr name="graduationWidth" format="dimension|reference"/><!-- 刻度的宽度 -->
  12.         <attr name="graduationCount" format="integer|reference"/><!-- 刻度的个数 -->
  13.     </declare-styleable>

layout文件：

  1.  xmlns:app="http://schemas.android.com/apk/res-auto"<!--设置命名空间 -->
  3.   <com.mrzk.circleloadinglibrary.CircleLoadingView
  4.         android:id="@+id/lv_loading"
  5.         android:layout_width="250dp"
  6.         android:layout_height="250dp"
  7.         android:layout_centerInParent="true"
  8.         app:textSize="35sp"
  9.         app:textColor="#f60"
  10.         app:strokeWidth="10dp"
  11.         app:isShowGraduationBackground="true"
  12.         app:startAngle="0"
  13.         app:max="300"
  14.         app:progress="100"
  15.         app:graduationBackgroundColor="#ccc"
  16.         app:graduationWidth="5dp"
  17.         app:graduationCount="10"
  18.         app:isShowOutRoll="false"
  19.         />

获取自定义属性值:

  1. TypedArray typedArray = getResources().obtainAttributes(attrs, R.styleable.LoadingStyle);
  2.         mTextSize = (int) typedArray.getDimension(R.styleable.LoadingStyle_textSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()));
  3.         mStrokeWidth = (int) typedArray.getDimension(R.styleable.LoadingStyle_strokeWidth, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics()));
  4.         mGraduationWidth = (int) typedArray.getDimension(R.styleable.LoadingStyle_graduationWidth, mStrokeWidth/2);
  5.         mTextColor = (int) typedArray.getColor(R.styleable.LoadingStyle_textColor, Color.BLACK);
  6.         mGraduationBackgroundColor = (int) typedArray.getColor(R.styleable.LoadingStyle_graduationBackgroundColor, Color.BLACK);
  7.         mStartAngle = (int) typedArray.getInt(R.styleable.LoadingStyle_startAngle, 180);
  8.         mMax = (int) typedArray.getInt(R.styleable.LoadingStyle_max, 0);
  9.         mProgress = (int) typedArray.getInt(R.styleable.LoadingStyle_progress, 0);
  10.         nGraduationCount = (int) typedArray.getInt(R.styleable.LoadingStyle_graduationCount, 35);
  11.         isShowGraduationBackground =  typedArray.getBoolean(R.styleable.LoadingStyle_isShowGraduationBackground, true);
  12.         isShowOutRoll =  typedArray.getBoolean(R.styleable.LoadingStyle_isShowOutRoll, true);
  13.         typedArray.recycle();

5、使用方法

  1. int[] colors = {0xFFE5BD7D, 0xFFFAAA64,
  2.                     0xFFFFFFFF, 0xFF6AE2FD,
  3.                     0xFF8CD0E5, 0xFFA3CBCB,
  4.                     0xFFBDC7B3, 0xFFD1C299, 0xFFE5BD7D};
  5.         lv_loading.setTextColor(Color.BLACK);//设置中心文字颜色
  6.         lv_loading.setMax(500);//设置最大进度
  7.         lv_loading.setShowGraduationBackgroundEnable(true);//是否显示刻度背景
  8.         lv_loading.setGraduationBackgroundColor(Color.GRAY);//刻度的背景颜色
  9.         lv_loading.setStartAngle(180);//设置开始旋转角度
  10.         lv_loading.setGraduationCount(10);//设置刻度数
  11.         lv_loading.setGraduationWidth(5);//设置刻度的宽度
  12.         lv_loading.setOutColors(colors);//设置外部圆环颜色
  13.         lv_loading.setInnerGraduationColors(colors);//设置内部刻度进度颜色
  14.         lv_loading.setTextSize(35);//设置内部文字字体大小
  15.         lv_loading.setShowOutRollEnable(false);//设置是否显示外部进度框
  16.         lv_loading.setOnProgressListener(new OnProgressListener() {
  17.             @Override
  18.             public String OnProgress(int max, int progress) {
  20.                 return progress*100f/max+"%";
  21.             }
  22.         });

二、源码附上

  1. /**
  2.  * 进度视图
  3.  * @author zhang
  4.  *
  5.  */
  6. public class CircleLoadingView extends View{
  7.     /** 圆环的画笔 */
  8.     private Paint mPaint;
  9.     /** 文字的画笔 */
  10.     private Paint mTextPaint;
  11.     /** 刻度的画笔 */
  12.     private Paint mRollPaint;
  13.     //进度刻度的画笔
  14.     private Paint mRollDrawPaint;
  15.     /** 圆环的宽度 */
  16.     private int mStrokeWidth = 0;
  17.     /** 字体的大小 */
  18.     private int mTextSize = 0;
  19.     /** 字体的颜色 */
  20.     private int mTextColor = 0;
  21.     /** 圆环所在区域 */
  22.     private RectF oval;
  23.     private Rect bounds;//获取文字的宽高  使文字居中
  24.     private float mStartAngle = 180;//开始的角度
  25.     private float mSweepAngle = 0;//划过的角度
  26.     /** 刻度的背景色 */
  27.     private int mGraduationBackgroundColor = Color.BLACK;
  28.     /** 刻度的宽度 */
  29.     private int mGraduationWidth = 0;
  30.     private float mGraduationSweepAngle = 359.9f;//刻度划过的角度 如果为360度  获取刻度会默认从右边划过
  31.     private int mMax = 0;//设置的最大值
  32.     private int mProgress = 0;//设置的进度
  33.     //分段颜色 外环
  34.     private int[] OUT_SECTION_COLORS = {
  35.             0xFFE5BD7D, 0xFFFAAA64,
  36.             0xFFFFFFFF, 0xFF6AE2FD,
  37.             0xFF8CD0E5, 0xFFA3CBCB,
  38.             0xFFBDC7B3, 0xFFD1C299,
  39.             0xFFE5BD7D};
  40.     //内部刻度
  41.     private int[] INNER_SECTION_COLORS = {
  42.             0xFFE5BD7D, 0xFFFAAA64,
  43.             0xFFFFFFFF, 0xFF6AE2FD,
  44.             0xFF8CD0E5, 0xFFA3CBCB,
  45.             0xFFBDC7B3, 0xFFD1C299,
  46.             0xFFE5BD7D};
  47.     /** 宽高的默认值 */
  48.     private int nDesired = 0;
  49.     private RectF oval2;//临时的内圆
  50.     private RectF oval3;//临时的外圆
  51.     /** 刻度的个数 */
  52.     private int nGraduationCount = 35;
  53.     /** 所有线的集合 */
  54.     private List<Line> mLinesList = new ArrayList<LoadingView.Line>();
  55.     /** 进度监听器 */
  56.     private OnProgressListener mOnProgressListener;
  57.     /**
  58.      * 是否显示进度条的背景 默认为
  59.      * @see #setShowGraduationBackgroundEnable(boolean)
  60.      * */
  61.     private boolean isShowGraduationBackground = true;
  62.     /**
  63.      *  是否显示外部进度框
  64.      *  @see #setShowOutRollEnable(boolean)
  65.      *  */
  66.     private boolean isShowOutRoll = true;
  67.     public CircleLoadingView(Context context) {
  68.         this(context,null);
  69.     }
  70.     public CircleLoadingView(Context context, AttributeSet attrs) {
  71.         this(context, attrs,0);
  72.     }
  73.     public CircleLoadingView(Context context, AttributeSet attrs, int defStyle) {
  74.         super(context, attrs, defStyle);
  75.         TypedArray typedArray = getResources().obtainAttributes(attrs, R.styleable.LoadingStyle);
  76.         mTextSize = (int) typedArray.getDimension(R.styleable.LoadingStyle_textSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()));
  77.         mStrokeWidth = (int) typedArray.getDimension(R.styleable.LoadingStyle_strokeWidth, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics()));
  78.         mGraduationWidth = (int) typedArray.getDimension(R.styleable.LoadingStyle_graduationWidth, mStrokeWidth/2);
  79.         mTextColor = (int) typedArray.getColor(R.styleable.LoadingStyle_textColor, Color.BLACK);
  80.         mGraduationBackgroundColor = (int) typedArray.getColor(R.styleable.LoadingStyle_graduationBackgroundColor, Color.BLACK);
  81.         mStartAngle = (int) typedArray.getInt(R.styleable.LoadingStyle_startAngle, 180);
  82.         mMax = (int) typedArray.getInt(R.styleable.LoadingStyle_max, 0);
  83.         mProgress = (int) typedArray.getInt(R.styleable.LoadingStyle_progress, 0);
  84.         nGraduationCount = (int) typedArray.getInt(R.styleable.LoadingStyle_graduationCount, 35);
  85.         isShowGraduationBackground =  typedArray.getBoolean(R.styleable.LoadingStyle_isShowGraduationBackground, true);
  86.         isShowOutRoll =  typedArray.getBoolean(R.styleable.LoadingStyle_isShowOutRoll, true);
  87.         typedArray.recycle();
  88.         init();
  89.     }
  90.     /**
  91.      * 设置进度监听
  92.      * @param mOnProgressListener
  93.      */
  94.     public void setOnProgressListener(OnProgressListener mOnProgressListener) {
  95.         this.mOnProgressListener = mOnProgressListener;
  96.     }
  97.     private void init() {
  98.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//消除锯齿
  99.         mPaint.setStyle(Paint.Style.STROKE);
  100.         mPaint.setColor(0xFF0099CC);
  101.         mPaint.setStrokeWidth(mStrokeWidth);
  102.         mPaint.setStrokeCap(Paint.Cap.ROUND);
  104.         mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  105.         mPaint.setStyle(Paint.Style.STROKE);
  106.         mTextPaint.setColor(mTextColor);
  107.         mTextPaint.setFakeBoldText(true);//设置字体加粗
  108.         mTextPaint.setTextSize(mTextSize);
  110.         mRollPaint = new Paint(mPaint);
  111.         mRollPaint.setColor(mGraduationBackgroundColor);
  112. //        mRollPaint.setStrokeWidth(mStrokeWidth/2);
  113.         mRollPaint.setStrokeWidth(mGraduationWidth);
  115.         mRollDrawPaint = new Paint(mPaint);
  116.         mRollDrawPaint.setStrokeWidth(mGraduationWidth);
  118.         oval = new RectF();
  119.         bounds = new Rect();
  121.         nDesired = dip2px(60);
  122.     }
  123.     /**
  124.      * 初始化数据
  125.      */
  126.     private void initData() {
  127.         mLinesList.clear();
  129.         Path path = new Path();
  130.         Path path1 = new Path();
  131.         //从startAngle开始 绘制180角度
  132.         path.addArc(oval2, mStartAngle, mGraduationSweepAngle);
  133.         path1.addArc(oval3, mStartAngle, mGraduationSweepAngle);
  135.         PathMeasure pm = new PathMeasure(path, false);
  136.         float itemLength = pm.getLength()/(nGraduationCount-1);
  138.         PathMeasure pm1 = new PathMeasure(path1, false);
  140.         float[] pos = new float[2];
  141.         float[] postemp = new float[2];
  142.         for (int i = 0; i < nGraduationCount; i++) {
  143.             pm.getPosTan(itemLength*i, pos , null );
  144.             pm1.getPosTan(itemLength*i/pm.getLength()*pm1.getLength(), postemp , null);
  145.             Line line = new Line();
  146.             line.p1.x = pos[0];
  147.             line.p1.y = pos[1];
  148.             line.p2.x = postemp[0];
  149.             line.p2.y = postemp[1];
  150.             mLinesList.add(line);
  151.         }
  152.     }
  154.     public int dip2px(int dip){
  155.         return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics());
  156.     }
  157.     @Override
  158.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  159.         setMeasuredDimension(resolveMeasured(widthMeasureSpec, nDesired), resolveMeasured(heightMeasureSpec, nDesired));
  160.     }
  161.     /**
  162.      * 设置渐变颜色
  163.      */
  164.     private void setSweepShader(int[] colors,Paint p) {
  165.         SweepGradient sweepGradient = new SweepGradient(getWidth()/2, getHeight()/2, colors, null);
  166.         p.setShader(sweepGradient);
  167.     }
  168.     /** 设置层叠颜色 */
  169.     public void setOutColors(int[] colors){
  170.         OUT_SECTION_COLORS = colors;
  171.         setSweepShader(OUT_SECTION_COLORS,mPaint);
  172.     }
  173.     /** 设置层叠颜色 */
  174.     public void setInnerGraduationColors(int[] colors){
  175.         INNER_SECTION_COLORS = colors;
  176.         setSweepShader(INNER_SECTION_COLORS,mRollDrawPaint);
  177.     }
  178.     /**
  179.      *
  180.      * @param measureSpec
  181.      * @param desired
  182.      * @return
  183.      */
  184.     private int resolveMeasured(int measureSpec, int desired)
  185.     {
  186.         int result = 0;
  187.         int specSize = MeasureSpec.getSize(measureSpec);
  188.         switch (MeasureSpec.getMode(measureSpec)) {
  189.             case MeasureSpec.UNSPECIFIED: //
  190.                 result = desired;
  191.                 break;
  192.             case MeasureSpec.AT_MOST:  //wrap
  193.                 result = Math.min(specSize, desired);
  194.                 break;
  195.             case MeasureSpec.EXACTLY:  //match
  196.             default:
  197.                 result = specSize;
  198.         }
  199.         return result;
  200.     }
  201.     @Override
  202.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  203.         super.onSizeChanged(w, h, oldw, oldh);
  204.         int radiu = 0;
  205.         if(oval.bottom<=0){
  206.              radiu = (int) ((Math.min(getWidth(), getHeight()))/2-mPaint.getStrokeWidth());
  208.             oval.left = getWidth()/2-radiu;
  209.             oval.top = getHeight()/2-radiu;
  210.             oval.right = getWidth()/2+radiu;
  211.             oval.bottom = getHeight()/2+radiu;
  213.             oval2 = new RectF();
  214.             oval2.left = getWidth()/2-radiu/4f*3;
  215.             oval2.top = getHeight()/2-radiu/4f*3;
  216.             oval2.right = getWidth()/2+radiu/4f*3;
  217.             oval2.bottom = getHeight()/2+radiu/4f*3;
  219.             oval3 = new RectF();
  220.             oval3.left = getWidth()/2-radiu/8f*7;
  221.             oval3.top = getHeight()/2-radiu/8f*7;
  222.             oval3.right = getWidth()/2+radiu/8f*7;
  223.             oval3.bottom = getHeight()/2+radiu/8f*7;
  224.         }
  225.          //初始化数据
  226.         initData();
  227.         //设置渐变色
  228.         setSweepShader(OUT_SECTION_COLORS,mPaint);
  229.         setSweepShader(INNER_SECTION_COLORS,mRollDrawPaint);
  230.     }
  231.     @Override
  232.     protected void onDraw(Canvas canvas) {
  233.         if(isShowOutRoll){
  234.             canvas.drawArc(oval, mStartAngle, mSweepAngle, false, mPaint);
  235.         }else{
  236.             canvas.drawArc(oval, mStartAngle, 360, false, mPaint);
  237.         }
  239.         if(isShowGraduationBackground){
  240.             for (int i = 0; i < mLinesList.size(); i++) {
  241.                 Line line = mLinesList.get(i);
  242.                 canvas.drawLine(line.p1.x, line.p1.y, line.p2.x, line.p2.y, mRollPaint);
  243.             }
  244.         }
  246. //      int degree = (int) (Math.round(mGraduationSweepAngle)/ITEMCOUNT);
  247. //      for (int i = 0; i < Math.round(mSweepAngle/degree); i++) {
  248.         for (int i = 0; i < Math.round(mSweepAngle*nGraduationCount/360f); i++) {
  249.             if(i<mLinesList.size()){
  250.                 Line line = mLinesList.get(i);
  251.                 canvas.drawLine(line.p1.x, line.p1.y, line.p2.x, line.p2.y, mRollDrawPaint);
  252.             }
  253.         }
  254.         String strProgressText = "";
  255.         if(mOnProgressListener !=null){//如果不为空  则为接口返回的值
  256.             strProgressText = mOnProgressListener.OnProgress(mMax, mProgress);
  257.         }else{
  258.             strProgressText = mProgress+"/"+mMax;
  259.         }
  260.         mTextPaint.getTextBounds(strProgressText, 0, strProgressText.length(), bounds);
  261.         canvas.drawText(strProgressText, oval.centerX()-bounds.width()/2, oval.centerY()+bounds.height()/2, mTextPaint);
  262.     }
  264.     /**
  265.      * 设置是否显示外部进度条
  266.      * @param isShowOutRoll
  267.      */
  268.     public void setShowOutRollEnable(boolean isShowOutRoll){
  269.         this.isShowOutRoll = isShowOutRoll;
  270.     }
  271.     /**
  272.      * 设置是否显示进度条的背景
  273.      * @param isShowGraduationBackground
  274.      */
  275.     public void setShowGraduationBackgroundEnable(boolean isShowGraduationBackground){
  276.         this.isShowGraduationBackground = isShowGraduationBackground;
  277.     }
  278.     /**
  279.      * 设置显示进度数量
  280.      * @param nGraduationCount
  281.      */
  282.     public void setGraduationCount(int nGraduationCount){
  283.         this.nGraduationCount = nGraduationCount;
  284.     }
  285.     /**
  286.      * 设置进度的背景颜色
  287.      * @param mGraduationBackgroundColor
  288.      */
  289.     public void setGraduationBackgroundColor(int mGraduationBackgroundColor){
  290.         this.mGraduationBackgroundColor = mGraduationBackgroundColor;
  291.          mRollPaint.setColor(mGraduationBackgroundColor);
  292.     }
  293.     /**
  294.      * 设置刻度的宽度
  295.      * @param mGraduationWidth
  296.      */
  297.     public void setGraduationWidth(int mGraduationWidth){
  298.         this.mGraduationWidth = mGraduationWidth;
  299.         mRollPaint.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mGraduationWidth, getResources().getDisplayMetrics()));
  300.         mRollDrawPaint.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mGraduationWidth, getResources().getDisplayMetrics()));
  301.     }
  303.     /**
  304.      * 设置最大进度值
  305.      * @param max
  306.      */
  307.     public void setMax(int max){
  308.         this.mMax = max;
  309.     }
  310.     /**
  311.      * 设置进度
  312.      * @param progress
  313.      */
  314.     public void setProgress(int progress){
  315.         this.mProgress = progress;
  316.         if(mMax==0){
  317.             throw new IllegalArgumentException("Max不能为0!");
  318.         }
  319.         mSweepAngle = 360f*mProgress/mMax;
  320.         postInvalidate();
  321.     }
  322.     /**
  323.      * 设置开始的角度  可以控制开始的位置 默认为180  即从左边开始
  324.      * @param mStartAngle
  325.      */
  326.     public void setStartAngle(float mStartAngle){
  327.         this.mStartAngle = mStartAngle;
  328.     }
  330.     /**
  331.      * 设置字体颜色
  332.      * @param mTextColor
  333.      */
  334.     public void setTextColor(int mTextColor){
  335.         this.mTextColor = mTextColor;
  336.         mTextPaint.setColor(mTextColor);
  337.     }
  338.     /**
  339.      * 设置字体大小
  340.      * @param mTextSize
  341.      */
  342.     public void setTextSize(int mTextSize){
  343.         this.mTextSize = mTextSize;
  344.         mTextPaint.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, mTextSize, getResources().getDisplayMetrics()));
  345.     }
  346.     /**
  347.      * 用于外部判断当前进度状态
  348.      */
  349.     interface OnProgressListener{
  350.         /**
  351.          * 返回中间部分文字内容
  352.          * @param max
  353.          * @param progress
  354.          * @return
  355.          */
  356.         String OnProgress(int max,int progress);
  357.     }
  358.     /**
  359.      * 刻度对象
  360.      */
  361.     class Line{
  362.         PointF p1 = new PointF();
  363.         PointF p2 = new PointF();
  364.     }
  365. }

从一个简洁的进度刻度绘制中了解自定义View的思路流程的更多相关文章

  1. Dialog详解（包括进度条、PopupWindow、自定义view、自定义样式的对话框）

    Dialog详解(包括进度条.PopupWindow.自定义view.自定义样式的对话框)   Android中提供了多种对话框,在实际应用中我们可能会需要修改这些已有的对话框.本实例就是从实际出发, ...

  2. Android自定义View研究--View中的原点坐标和XML中布局自定义View时View触摸原点问题

    这里只做个汇总~.~独一无二 文章出处:http://blog.csdn.net/djy1992/article/details/9715047 Android自定义View研究--View中的原点坐 ...

  3. iOS 在UITableViewCell中加入自定义view时view的frame设定注意

    由于需要重用同一个布局,于是在cellForRowAtIndexPath中把自定义view加在了cell上,我是这样设定view的frame的 var screenFrame = UIScreen.m ...

  4. Android中使用自定义View实现下载进度的显示

    一般有下载功能的应用都会有这样一个场景,需要一个图标来标识不同的状态.之前在公司的项目中写过一个,今天抽空来整理一下. 一般下载都会有这么几种状态:未开始.等待.正在下载.下载结束,当然有时候会有下载 ...

  5. iOS中 xib自定义View在storyboard中的使用

    1,创建UIView 的SubClass 命名为MyView 2, new一个名为MyView的xib p1 3,配置xib的属性 p2 4,为View 添加背景色,添加一个按钮并定制按钮约束,这里我 ...

  6. Android中实现自定义View组件并使其能跟随鼠标移动

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建An ...

  7. iOS开发小技巧--获取自定义的BarButtonItem中的自定义View的方法(customView)

    如果BarButtonItem是通过[[UIBarButtonItem alloc] initWithCustomView:(nonnull UIView *)]方法设置的.某些情况下需要修改BarB ...

  8. 我的Android进阶之旅------>Android自定义View实现带数字的进度条（NumberProgressBar）

    今天在Github上面看到一个来自于 daimajia所写的关于Android自定义View实现带数字的进度条(NumberProgressBar)的精彩案例,在这里分享给大家一起来学习学习!同时感谢 ...

  9. 自定义View实战--实现一个清新美观的加载按钮

    本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 在 Dribble 上偶然看到了一组交互如下: 当时在心里问自己能不能做,答案肯定是能做的,不过我比较懒,觉得中间那个伸缩变化要编写 ...

随机推荐

  1. bzoj 1925: [Sdoi2010]地精部落

    Description 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi, ...

  2. NOIWC颓废记

    NOIWC大概就干了3件事情:吃.睡.浪. 吃: 目测绍兴一中的饭比二中的好吃多了,每天都有挺多的肉菜,还有一些甜品,而且是自助,不错的,但是一个不好的是排队时间太长了,于是我这么珍惜时间急着回宿舍的 ...

  3. 在Cisco Catalyst 3750端口做策略限速 QOS

    今天任务是在3750上限制端口的速率,本来以为是很简单的事,speed命令搞定,敲进去才知道speed命令只能叫端口速率改成10M或100M,也就是说只能起到端口高低速率的切换功能,不能自定义速率,后 ...

  4. postgresql 安装使用

    www.postgresql.org去下载你需要的版本,我下载的9.6.8 安装过程中会让你输入一次密码,其余的默认就ok 默认超级用户名postgres 打开 pgadmin4,我们将语言改为中文会 ...

  5. [ Java学习基础 ] Java的抽象类与接口

    一.抽象类 1. 抽象类 Java语言提供了两种类:一种是具体类:另一种是抽象子类. 2. 抽象类概念: 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的 ...

  6. 利用生产者消费者模型和MQ模型写一个自己的日志系统-并发设计里一定会用到的手段

    一:前言 写这个程序主要是用来理解生产者消费者模型,以及通过这个Demo来理解Redis的单线程取原子任务是怎么实现的和巩固一下并发相关的知识:这个虽然是个Demo,但是只要稍加改下Appender部 ...

  7. 使用CSS让多出来的字变为省略号

    <style> .text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellips ...

  8. JS基础(二)

    一.JS中的循环结构 循环结构的执行步骤 1.声明循环变量: 2.判断循环条件: 3.执行循环体操作: 4.更新循环变量 然后,循环执行2-4,直到条件不成立时,跳出循环. while循环()中的表达 ...

  9. easyui datagrid属性和方法

    本文可以当做api来使用 使用方法(Usage Example) 从现有的表单元素创建数据表格,定义在html中的行,列和数据. <table class="easyui-datagr ...

  10. SQL Server 2016 非域Aways On环境搭建

    一.优点 aways on的优点,a. 构建主从数据库,分摊单点数据库压力.b.可以减少数据同步时间,提升用户体验.c.可以实现高可用,自动平滑切换. 二.缺点 及时同步最多只能提交3台,及时同步会导 ...