什么也不说先上图
做一个类似qq记步的j进度条,直接上代码
首先在onmeasure方法中测量View的宽高
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int defaultWidth = Integer.MAX_VALUE; int width; int height; int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = 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; } int defaultHeight = (int) (width * 1.f / mRatio);//高取宽的一定比列 height = defaultHeight; setMeasuredDimension(width, height); Log.i("TAG", "width:" + width + "| height:" + height); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; mArcCenterX = (int) (mWidth / 2.f); mArcCenterY = (int) (160.f / 525.f * mHeight); mArcRect = new RectF();//这里为外切矩形设置显示比列 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()方法,
@Override protected void onDraw(final Canvas canvas) { super.onDraw(canvas); float right = getWidth()/2; float left = getWidth()/2; //此处设置渐变色 Shader mShader = new SweepGradient(right,left,new int[]{Color.parseColor("#ff2b00"), Color.parseColor("#ffd200"), Color.parseColor("#61f09a"), Color.parseColor("#61f09a")},null); Matrix matrix = new Matrix(); 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 = new SweepGradient(right,left,new int[]{Color.parseColor("#ff2b00"), Color.parseColor("#ffd200"), Color.parseColor("#61f09a"), Color.parseColor("#61f09a")},null); Matrix matrix = new Matrix(); matrix.setRotate(130, right, left);//很重要 mShader.setLocalMatrix(matrix); progressPaint.setShader(mShader);Shader有四个子类,都是用于颜色渐变的,我们用的SweepGradient是梯度渐变,结合矩阵,形成镜像。做成渐变。