admin 管理员组

文章数量: 888387

Android开发自定义View之仿米家APP双色灯控制UI：做一个智能家居产品的简单智能灯UI ！(附带Demo)

一. 前言；

  • 兜兜转转，不知不觉做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坐标加数值即可！

六. 透明的和色彩的变化；

  • 上面做好了还只是一个静态的页面，最主要的是如何提供接口，可以实现动态地更新暗亮变化和颜色的变化相结合！

    • 技术点①：第一个图看到的亮度调节只是调节亮度，不参与色温的调节！ 同样地，色温调节只是调节色彩，不参与亮度的调节！这个理解就是亮度调节只是调节画笔的透明度，而色温调节只是改变了画笔的颜色！

    • 技术点②：透明度的调节其实是简单的，其只需要调节一个数值即可！但是色温的调节是个技术活，需要自己计算下，下面是我总结出来的公式！注意我们的最暖色其实就是橘黄色！

    • 技术点③：下图的分析总结下，最暖色（255，183，0）和最冷色（255，255，255）变化的只是后面的2个参数green和blue，抓住这2个参数的变化，我发现每当blue加4，green才加一。所以下面要除于4！

 public synchronized void setProgressTemper(int tempProgressTemper) {//得到色温调节的数值，范围是0到100；需要转换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();}

七. 其他；

下载：
gitHub：

本文标签： Android开发自定义View之仿米家APP双色灯控制UI做一个智能家居产品的简单智能灯UI ！(附带Demo)

版权声明：本文标题：Android开发自定义View之仿米家APP双色灯控制UI：做一个智能家居产品的简单智能灯UI ！(附带Demo) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1688274298h200192.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。