一. 前言;
- 兜兜转转,不知不觉做Android开发已经快2年了,上半年一直在搞
wifi
模块开发,导致不务正业,写个自定义UI还要折腾半天,真是对不起自己的良心了!最近要对接小米开放平台,不小心看到了一个控制双色灯的界面,大概就仿了下来,特此写下此文,共勉技术!
二. 效果图;

三. 功能实现;
四. 原理图;
- 下图中,基本可以看到各个绘图中需要的点的坐标了。这个有助于我们快速绘图呢!

五. 绘图步骤;
- 第一步先绘制灯泡,灯泡的绘制分为绘制上面的圆弧部分+下面的缺角的矩形!注意此要有自定义view的基本常识!
Path mPathCircle = new Path();
mPathCircle.addCircle(getWidth() / 2, getHeight() / 2, mCircleRadial, Path.Direction.CW);
Path mPathReact = new Path();
mPathReact.moveTo(mHalfWidth - mOffsetDistance + 10, mHalfHeight + mCircleRadial - 12);
mPathReact.lineTo(mHalfWidth - mOffsetDistance + 10, mHalfHeight + (int) (4 * mCircleRadial / 3));
mPathReact.lineTo(mHalfWidth + mOffsetDistance - 10, mHalfHeight + (int) (4 * mCircleRadial / 3));
mPathReact.lineTo(mHalfWidth + mOffsetDistance - 10, mHalfHeight + mCircleRadial - 12);
mPathReact.close();
mPathCircle.op(mPathReact, Path.Op.UNION);
canvas.drawPath(mPathCircle, mPaintLight);
- 第二步绘制涟漪圆圈,步骤是画4个实心圆圈,注意是逐渐把透明度降低以及不断增加半径,这样就达到了涟漪的效果啦!
for (int i = 0; i < 5; i++) {
mPaintCircle.setAlpha(partValue * i * 2);
canvas.drawCircle(mHalfWidth, mHalfHeight + 10, mCircleRadial + 100 * i, mPaintCircle);
mPaintLight.setAlpha((int) (2.5 * progressShow));
}
第三步绘制灯泡下面的直线。
- 这里其实没什么好说的,注意其的起点和终点在上面灯泡矩形的转折点的
y
坐标加数值即可!
六. 透明的和色彩的变化;
public synchronized void setProgressTemper(int tempProgressTemper) {
int progressTemper = (int) (tempProgressTemper * 2.5);
this.progressTemper = progressTemper;
mPaintLight.setARGB(255, 255, progressTemper / 4 + 183, progressTemper);
mPaintCircle.setARGB(150, 255, progressTemper / 4 + 183, progressTemper);
postInvalidate();
}
七. 其他;

下载:https://download.csdn.net/download/xh870189248/10445098
gitHub:https://github.com/xuhongv/SmartLightView