自定义View实战：空调遥控器

今天的文章来自 陈秀相 的投稿，教大家绘制出一个可以切换度数的空调遥控器。本文涉及到自定义View的各种知识点的应用，以及一些数学计算知识，对自定义View感兴趣的朋友们千万不要错过。

陈秀相 的博客地址：

http://blog.****.net/u012305710

简介

效果图

用到的技术

1. View 的测量

2. Canvas 绘图技巧

3. 触摸事件的计算

4. 接口回调

整体思路

1. 需要画两个圆弧一个是底部固定不变的另一个是更随手指移动渐变的圆弧。

2. 圆环上的分割线可以利用画布的旋转进行画线。

3. 文字的显示需要根据到圆心的距离进行计算。

4. 根据手指滑动的x、y求当前滑动的范围的角度根据起始度数相加。

代码解读

画底部圆环

使用 drawArc(RectF oval，float startAngle, float sweepAngle, boolean useCenter, Paint paint) 。

参数解读：

• oval：圆环外的矩形 

• startAngle：开始角度 

• sweepAngle：扫描角度 

• useCenter：是否和圆心连线 

• paint：画笔 

开始的0度角如下图 :

画带渐变色的圆

渐变色使用的是 SweepGradient :

画线

每隔3度旋转故整个圆需要120条线：

画文字

这个比较复杂些需要计算x、y轴坐标 :

由图可以看出构成一个夹角为45度的直角三角形，斜边z 的长度为 mRadius + circleWidth / 2 + 45; 

circleWidth ：为圆的宽度 ;

45 为文字离圆的距离 ;

所以x点为：

//斜边
int c = mRadius + circleWidth / 2 + 45;
x = (int) Math.sqrt((c * c / 2));

下面是画文字的代码：

这样整个界面就完成了但是还没加上滑动监听。

滑动监听

手指滑动需要 得到当前手指所在象限才好计算度数 ，因为 每个象限和圆心的夹角都是0~90度。

首先先计算每个象限的夹角 ：

可以根据手指移动的x点计算出cos，然后求出对应的角度。

float v = x / (float) Math.sqrt(x * x + y * y);
// 根据cos求角度
double acos = Math.acos(v);
acos = Math.toDegrees(acos);

整个计算角度的代码如下： 

这样整个程序就完成了。 

如果想要下载本文的源码，请点击下方的 阅读原文 链接。

---

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：