这个自定义view的出现背景是因为我们的项目中有直播，所以需要一个控件来显示给用户当前的直播状态。其实就是一个圆角矩形，并不难画。难画的是中间有一个圆点需要在两种颜色渐变过渡。当时也是想了好久。写在这里希望对自己对大家有些帮助。看下效果
直播
为什么视频转换成gif都会变得很卡，但是之前的效果真的是不卡 真的不卡 真的不卡
公司招了一个动效设计师，所以他是拼命的给app设计动效，我们这些开发也是拼了命的去实现。不夸张的说我们公司的app首页没有不能动的。即使是提示文字也会动起来。他说这样用户体验会很好。哈哈哈，用户的视觉体验确实好了。有时候自己看还是感觉很流弊。
好吧说重点
首先我们要先画一个圆角矩形。圆角矩形还是很好画的。但是这是需求改过一次的，之前他让从一个点慢慢过渡到圆角矩形，后来以不能实现给婉拒了。哈哈哈
// 画出外圆角边框 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); }
这个方法通过取两个颜色渐变区间中某一点的颜色，那么我们每次重绘的时候，都会取这一点下一点的颜色。那么就会有过渡的效果。
网友评论