渐变色仪表盘的实现(带初始化动画和多次改变动画始终点)

首先，需求很突然。本来已经确定了这个view的呈现方式。但是在准备上线的前一天，产品突然说，已经确定好的view显示不怎么好看 需要改。然后就是互相沉默。在UI设计师的加班加点之后，终于新版的view已经确定下来了。那就是我下面要说的渐变色仪表盘了。它是这样的....

渐变色仪表盘

好。需求已经出来了。那么就只能看看这个view要分成几个部分才能够更简单的做。终究胳膊扭不过大腿。

首先是最外面的边框是虚线并且渐变色。里面的实线也是渐变色的。

然后就是中间的虚线长短不一，颜色不一。中间的字体是白色和另外一种颜色，大小不一。

最后的一点就是红色的指针。并且指针也要有动画，指针最后的位置要指向环形进度条的位置。

1.画环形渐变色的虚线

bPaint.setShader(null); PathEffect pathEffect = new DashPathEffect(new float[]{ScreenUtils.dipToPx(1,mContext), ScreenUtils.dipToPx(3,mContext), ScreenUtils.dipToPx(1,mContext), ScreenUtils.dipToPx(3,mContext)}, 0); bPaint.setPathEffect(pathEffect); bPaint.setColor(Color.parseColor("#30FFFFFF")); bPaint.setStrokeWidth(ScreenUtils.dipToPx(8,mContext)); canvas.drawArc(new RectF(ScreenUtils.dipToPx(10,mContext),ScreenUtils.dipToPx(10,mContext),getWidth() - ScreenUtils.dipToPx(10,mContext), getHeight() - ScreenUtils.dipToPx(10,mContext)),150,240,false,bPaint);

2.画内环渐变色实线

bPaint.setPathEffect(null); bPaint.setStrokeWidth(ScreenUtils.dipToPx(6,mContext)); canvas.drawArc(new RectF(ScreenUtils.dipToPx(22,mContext),ScreenUtils.dipToPx(22,mContext),getWidth() - ScreenUtils.dipToPx(22,mContext), getHeight() - ScreenUtils.dipToPx(22,mContext)),150,240,false,bPaint);

3.画中间不同颜色的弧度，这里采用了两种虚线相间的方式。具体实现方式就是距离不一 颜色不一

PathEffect pathEffect1 = new DashPathEffect(new float[]{ScreenUtils.dipToPx(1,mContext), ScreenUtils.dipToPx(15,mContext), ScreenUtils.dipToPx(1,mContext), ScreenUtils.dipToPx(15,mContext)}, 0); bPaint.setPathEffect(pathEffect1); bPaint.setStrokeWidth(ScreenUtils.dipToPx(11,mContext)); canvas.drawArc(new RectF(ScreenUtils.dipToPx(32,mContext),ScreenUtils.dipToPx(32,mContext),getWidth() - ScreenUtils.dipToPx(32,mContext), getHeight() - ScreenUtils.dipToPx(32,mContext)),150,250,false,bPaint); PathEffect pathEffect2 = new DashPathEffect(new float[]{ScreenUtils.dipToPx(1,mContext), ScreenUtils.dipToPx(15,mContext), ScreenUtils.dipToPx(1,mContext), ScreenUtils.dipToPx(15,mContext)}, 0); bPaint.setPathEffect(pathEffect2); bPaint.setColor(Color.WHITE); bPaint.setStrokeWidth(ScreenUtils.dipToPx(6,mContext)); canvas.drawArc(new RectF(ScreenUtils.dipToPx(32,mContext),ScreenUtils.dipToPx(32,mContext),getWidth() - ScreenUtils.dipToPx(32,mContext), getHeight() - ScreenUtils.dipToPx(32,mContext)),160,230,false,bPaint);

4.然后就是指针箭头的绘制。这里因为当时时间很紧，就没有用canvas去画，直接让UI设计师给切了一张指针图。

指针

就是这样的指针图，因为指针要根据环形进度条的位置改变。所以我们要对这张图进行旋转操作。但是bitmap的旋转是按照中心点旋转的。所以我让UI设计师将指针切了上面看上去那么长。一半是指针，另外一半是空白。

首先是先加载指针图片。

BitmapDrawable drawable = (BitmapDrawable) (getResources().getDrawable(R.mipmap.iv_rate_view)); bitmap = drawable.getBitmap(); ByteArrayOutputStream out = new ByteArrayOutputStream(); bitmap.compress(Bitmap.CompressFormat.JPEG, 50, out);

然后根据环形进度条的位置进行旋转，那么我这里就用到了Matrix矩阵对bitmap进行了旋转。

Matrix m = new Matrix(); m.setRotate(240 + mDefaultPercent * 240 * 0.01f, (float) bitmap.getWidth() / 2, bitmap.getHeight()); Bitmap bm1 = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), m, true); canvas.drawBitmap(bm1,getWidth() / 2 - bm1.getWidth() / 2,getHeight() / 2 - bm1.getHeight() / 2 ,mPaint);

现在其实就已经差不多了。但是还有一个很重要的点。因为要有从0到100的动画，还要环形进度条的颜色是渐变色。所以我根据属性动画存储进度条每次增长的位置，然后取两种颜色中的某一点过渡色。具体取过渡色的方法如下。

public int getGradient(float fraction, int startColor, int endColor) { if (fraction > 1) fraction = 1; int alphaStart = Color.alpha(startColor); int redStart = Color.red(startColor); int blueStart = Color.blue(startColor); int greenStart = Color.green(startColor); int alphaEnd = Color.alpha(endColor); int redEnd = Color.red(endColor); int blueEnd = Color.blue(endColor); int greenEnd = Color.green(endColor); int alphaDifference = alphaEnd - alphaStart; int redDifference = redEnd - redStart; int blueDifference = blueEnd - blueStart; int greenDifference = greenEnd - greenStart; int alphaCurrent = (int) (alphaStart + fraction * alphaDifference); int redCurrent = (int) (redStart + fraction * redDifference); int blueCurrent = (int) (blueStart + fraction * blueDifference); int greenCurrent = (int) (greenStart + fraction * greenDifference); return Color.argb(alphaCurrent, redCurrent, greenCurrent, blueCurrent); }

然后view中的两个文字我就不贴出来了。有需要的q我就行。其实到这view已经差不多了。主要是动画的起始。这里就不贴出了。源码供上。有什么写的不好的地方，还请各位大神多多指教！

渐变色仪表盘