Android圆环选择View

作者：_LINXIONG

博客：http://blog.csdn.net/lilinxiong

Android圆环选择View

无奈产品喜欢在APP中加入各种动画，再加上UI小姐姐的奇思妙想，然后就设计出了一大堆动画，前两周才把动画写完，故有了此篇博客来记录一下当时所遇到的坑，效果图镇楼，如下：

注：点击哪个那个旋转到最下面，旋转到最下面的为选中状态。

哇，当时看到这效果，真的是有辞职的冲动，但是转眼一想，哎，反正动画也不太熟悉，那就把这个做出来吧，我们先不加动画，就先实现静态的，如下图： 

后面的圆环是怎么画出来的？

先实现简单的吧，我们可以看到后面有个圆环，我们都知道圆环嘛，大圆套小圆，就可以实现，但是现在的圆环颜色是不一样的，我们若还是用普通的圆来实现的话，就有点儿困难了。既然直接画圆不行，那就用圆弧把这个圆拼出来吧，代码如下：

额……若是RectF不知道是什么玩意儿的话…简单总结RectF、Rect 和Matrix ,还有Paint的使用方法这篇博客里面有讲。同理啦，圆环是大圆套小圆的，那么画小圆的方法和这个类似，只是改变了paint的颜色罢了，这就不贴代码啦，继续解决下一个问题~

圆环上的圆位置是怎么确定的？

主要的代码如下：

没错，就是重写onLayout来确定圆环上圆的位置，每当要旋转时就调用requestLayout()重新确定圆的位置~

圆环上的圆旋转的角度是怎么确定的？

在效果图上可以看到，点击哪个哪个就旋转到最下面，这中间有个问题，就是：我们人眼是可以看到那个在最上面，那个在左，在右，但是，在代码中实现的时候，我们并不知道它们的位置是在哪里，这就有个问题了，我们不知道位置，所以就没办法确定到底要旋转多少度，不知道要旋转的角度，那么这个效果就无法实现了。 
后来想了半天，其实我们可以这样想，如下图：

首先我们可以获取的资源如下：当前选中的ImageView，要选中的ImageView，当前ImageView的在数组中的下标和要选中的ImageView在数组中的下标。这些我们是可以知道的，假如，现在选中了下标为1的ImageView，那么我不管是要选中下标为2还是0的都旋转90度，那么这个角度就可以用要选中的ImageView的下标来减去当前选中 X 90就好了，然后顺时针转还是逆时针转就看需求啦~但是还有一个要解决的，就是，当前选中的下标为0，那么左右的下标就是3和1了，这样（3-0) X 90要旋转的角度就不是我们想要的角度了，所以，在0和3的时候要有个判断，分析结束，主要的代码如下：

ok，这里用了ValueAnimator属性动画，主要就是通过返回的数值，达到旋转的效果~

实现背景圆环同步旋转

我们在效果图上可以看到后面的圆环也是可以同步旋转的哈，其实要实现同步旋转很简单，在RingView加属性动画，然后外部调用就好啦！如下:

外部调用:

圆环颜色美化

在效果图上，可以看到当圆环在旋转的时候之前选中的颜色渐渐显示，要选中的渐渐隐藏，这个其实很简单，还是借助ValueAnimator属性动画就可以实现啦，同样的我们在外部调用它，在RingView里面添加如下代码:

由于每段圆弧的颜色透明度不一样，所以要判断下当前的圆环和要选择的圆环的透明度。而它们的条件就是是否可以被2整除！ 
外部调用如下：

圆弧上的ImageView美化

效果图上，可以看到圆弧上的ImageView是带有动画的，其实加动画也不难，主要的就是在点击后，有个缩放动画，主要代码如下：

就不多做解释啦，里面都注释了。

简单总结RectF：

http://blog.csdn.net/struggle323/article/details/50818320

Rect 和Matrix：

http://blog.csdn.net/struggle323/article/details/50818320

Paint的使用方法：

http://blog.csdn.net/struggle323/article/details/50818320

码源：

https://github.com/lilinxiong/RingView

一命二运三风水，四修阴德五读书！

刘桂林

微信号 : Android_LiuGuiLin

新浪微博：@刘某人程序员