什么也不说先上图
做一个类似qq记步的j进度条，直接上代码
首先在onmeasure方法中测量View的宽高
protected voidonMeasure(intwidthMeasureSpec,intheightMeasureSpec) {intdefaultWidth = Integer.MAX_VALUE;intwidth;intheight;intwidthMode = MeasureSpec.getMode(widthMeasureSpec);intwidthSize = MeasureSpec.getSize(widthMeasureSpec);// int heightMode = MeasureSpec.getMode(heightMeasureSpec); // int heightSize = MeasureSpec.getSize(heightMeasureSpec);if(widthMode == MeasureSpec.EXACTLY|| widthMode == MeasureSpec.AT_MOST) {
//在这两种测量模式下，宽的取值width = widthSize;}else{width = defaultWidth;}intdefaultHeight = (int) (width * 1.f /mRatio);//高取宽的一定比列height = defaultHeight;setMeasuredDimension(width, height);Log.i("TAG","width:"+ width +"| height:"+ height);}@Overrideprotected voidonSizeChanged(intw,inth,intoldw,intoldh) {super.onSizeChanged(w, h, oldw, oldh);mWidth= w;mHeight= h;mArcCenterX= (int) (mWidth/ 2.f);mArcCenterY= (int) (160.f / 525.f *mHeight);mArcRect=newRectF();//这里为外切矩形设置显示比列mArcRect.left=mArcCenterX- 125.f / 450.f *mWidth;mArcRect.top=mArcCenterY- 125.f / 525.f *mHeight;mArcRect.right=mArcCenterX+ 125.f / 450.f *mWidth;mArcRect.bottom=mArcCenterY+ 125.f / 525.f *mHeight;mArcWidth= 20.f / 450.f *mWidth;// mBarWidth = 16.f / 450.f * mWidth; //画笔的宽度一定要在这里设置才能自适应allPaint.setStrokeWidth(mArcWidth);progressPaint.setStrokeWidth(mArcWidth);// mBarPaint.setStrokeWidth(mBarWidth); }
说一下 在onMeasure()方法中的测量值会在onSizeChanged（）被应用，在测量的方法中主要判断了测量模式不同时，即（
widthMode == MeasureSpec.EXACTLY|| widthMode == MeasureSpec.AT_MOST）宽和高的取值，高取宽的(width * 1.f /mRatio)倍，
一些值的初始化 ，赋值，一般放到onSizeChanged（）方法中。
onSizeChanged（），很重要，它决定了这个View是按照怎样的比列进行绘制的，这样的话，无论该View的大小是多少，view的内容还是一样。
下面来说一下ondraw()方法，
@Overrideprotected voidonDraw(finalCanvas canvas) {super.onDraw(canvas);floatright = getWidth()/2;floatleft = getWidth()/2;//此处设置渐变色Shader mShader =newSweepGradient(right,left,new int[]{Color.parseColor("#ff2b00"), Color.parseColor("#ffd200"), Color.parseColor("#61f09a"), Color.parseColor("#61f09a")},null);Matrix matrix =newMatrix();matrix.setRotate(130, right, left);//很重要mShader.setLocalMatrix(matrix);progressPaint.setShader(mShader);//画整个圆弧canvas.drawArc(mArcRect,135,270,false,allPaint);if(isDraw){//画进度canvas.drawArc(mArcRect,135, 270-currceProgress,false,progressPaint);}/** *测量后的 */ //4.绘制圆弧里面的文字xPos=mArcCenterX;yPos= (int) (mArcCenterY- 40.f / 525.f *mHeight);hintPaint.setTextAlign(Paint.Align.CENTER);hintPaint.setTextSize(15.f / 450.f *mWidth);canvas.drawText("截至22:50分已走",xPos,yPos,hintPaint);vTextPaint.setTextAlign(Paint.Align.CENTER);vTextPaint.setTextSize(42.f / 450.f *mWidth);// vTextPaint.setColor(mThemeColor);canvas.drawText("50",mArcCenterX,mArcCenterY,vTextPaint);yPos= (int) (mArcCenterY+ 50.f / 525.f *mHeight);curSpeedPaint.setColor(Color.parseColor("#C1C1C1"));curSpeedPaint.setTextSize(13.f / 450.f *mWidth);canvas.drawText("好友平均5620步",mArcCenterX,yPos,curSpeedPaint);}
此处注意，画的圆弧的位置由mArcRect决定（外切矩形），这里附上一张图
由于矩形的坐标是按view宽高比列设置的，所以，View在设置不同的dp的时候才不会变形。
再说一下渐变色的原理，
Shader mShader =newSweepGradient(right,left,new int[]{Color.parseColor("#ff2b00"), Color.parseColor("#ffd200"), Color.parseColor("#61f09a"), Color.parseColor("#61f09a")},null);Matrix matrix =newMatrix();matrix.setRotate(130, right, left);//很重要mShader.setLocalMatrix(matrix);progressPaint.setShader(mShader);
Shader
有四个子类，都是用于颜色渐变的，我们用的SweepGradient是梯度渐变，结合矩阵，形成镜像。做成渐变。
