一个渐变色的过渡的自定义view（通过颜色变化过渡表示状态）

这个自定义view的出现背景是因为我们的项目中有直播，所以需要一个控件来显示给用户当前的直播状态。其实就是一个圆角矩形，并不难画。难画的是中间有一个圆点需要在两种颜色渐变过渡。当时也是想了好久。写在这里希望对自己对大家有些帮助。看下效果

直播

为什么视频转换成gif都会变得很卡，但是之前的效果真的是不卡 真的不卡 真的不卡

公司招了一个动效设计师，所以他是拼命的给app设计动效，我们这些开发也是拼了命的去实现。不夸张的说我们公司的app首页没有不能动的。即使是提示文字也会动起来。他说这样用户体验会很好。哈哈哈，用户的视觉体验确实好了。有时候自己看还是感觉很流弊。

好吧说重点

首先我们要先画一个圆角矩形。圆角矩形还是很好画的。但是这是需求改过一次的，之前他让从一个点慢慢过渡到圆角矩形，后来以不能实现给婉拒了。（其实用path很好实现）哈哈哈

// 画出外圆角边框

mPaint.setColor(ContextCompat.getColor(mContext, R.color.notice_color));mPaint.setStyle(Paint.Style.STROKE);canvas.drawRoundRect(new RectF(3, 3, mWidth - 3, mHeight - 3), radius, radius, mPaint);

---

上面是画了圆角的边框，颜色固定还是特别好画。对自定义view入门的同学也是非常的简单。

// 画出左方的圆点mPaint.setStyle(Paint.Style.FILL);int colorFrom = getColorFrom(ContextCompat.getColor(mContext, R.color.circle_start_color), ContextCompat.getColor(mContext, R.color.circle_end_color), change_color * 0.1f);mPaint.setColor(colorFrom);canvas.drawCircle(30, (mHeight) / 2, circle_radius, mPaint);

---

上面是画重中之重的圆点。我们可以看到有一个方法特别的重要---getColorFrom();这个方法可以取到渐变色的某一点的颜色，我们让有一个时间差，那么渐变色的渐变过渡的效果就做出来了。

/** * 暴露给外层调用 用于提示给用户摄像头的播放状态 * * @param text */public void setNoticeText(String text) { this.text_notice = text; invalidate();}

---

这个方法是暴露给外层，如果摄像头的状态改变，那么也可以实时通知用户。

/** * 取两个颜色间的渐变区间 中的某一点的颜色 * * @param startColor * @param endColor * @param radio * @return */public int getColorFrom(int startColor, int endColor, float radio) { int redStart = Color.red(startColor); int blueStart = Color.blue(startColor); int greenStart = Color.green(startColor); int redEnd = Color.red(endColor); int blueEnd = Color.blue(endColor); int greenEnd = Color.green(endColor); int red = (int) (redStart + ((redEnd - redStart) * radio + 0.5)); int greed = (int) (greenStart + ((greenEnd - greenStart) * radio + 0.5)); int blue = (int) (blueStart + ((blueEnd - blueStart) * radio + 0.5)); return Color.argb(255, red, greed, blue);}

---

这个方法通过取两个颜色渐变区间中某一点的颜色，那么我们每次重绘的时候，都会取这一点下一点的颜色。那么就会有过渡的效果。

---

目前我重新整理了一下代码，编辑了styleable文件，将很多属性暴露了出来。

包括渐变起始颜色，文字显示等等。

有需要的可以看看指正。

源码