什么也不说先上图
做一个类似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是梯度渐变,结合矩阵,形成镜像。做成渐变。