Android UI设计之<十四>自定义ViewGroup，实现绚丽的仿支付宝咻一咻雷达脉冲效果

转载请注明出处：http://blog.csdn.net/llew2011/article/details/52801147

        去年春节的时候支付宝推行的集福娃活动着实火的不能再火了，更给力的是春晚又可以全民参与咻一咻集福娃活动，集齐五福就可平分亿元大红包，只可惜没有敬业福……那时候在家没事写了个咻一咻插件，只要到了咻一咻的时间点插件就可以自动的点击咻一咻来咻红包，当时只是纯粹练习这部分技术代码没有公开，后续计划写篇关于插件这方面的文章，扯远了(*^__^*) ……我们知道在支付宝的咻一咻页面有个雷达扩散的动画效果，当时感觉动画效果非常棒，于是私下尝试着实现了类似的效果，后来在github发现有大神也写有类似效果，于是读了一下大神的代码发现我们的核心思想都是一样的，只是细节不同，然后我就择其善者而从之，把两份代码整合了一下......整合之后的运行效果如下所示：

        开始讲解实现之前我们先分析一下支付宝的咻一咻效果，进入支付宝咻一咻页面后点击了咻一咻按钮，屏幕上先出现一个圆在不断的进行放大操作，在该圆进行放大操作的同时其透明度也在由大到小进行变化，接着该圆没有消失之前又会出现新的圆也在进行同样的动画操作……通过观察我们发现这些圆都是按照固定的时间间隔在依次的执行放大和透明度渐变的动画操作，所以要实现同样的效果，首先要有一个ViewGroup，然后给这个ViewGroup添加固定数量的子View，最后让这些子View执行放大和透明度渐变动画就可以实现该效果了。清楚了这个大纲流程，实现起来就好办了。

        首先定义我们的ViewGroup，由于该ViewGroup仅仅是添加固定数量的子View，然后让这些子View执行一系列动画，所以可以直接继承FrameLayout，代码如下所示：

public class RadarLayout extends FrameLayout {

    public RadarLayout(Context context) {
        super(context);
    }

    public RadarLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public RadarLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

        我们为自己的咻一咻效果控件取名为RadarLayout，radar为雷达的意思，RadarLayout就表示在不断的进行扫描的意思。通过前边的分析我们知道RadarLayout是由固定数量的子View组成的，因此RadarLayout需要有表示子View数量的属性并且该属性外界可访问可修改；由于子View的执行动画是放缩和透明度渐变同时进行的，所以RadarLayout需要用动画集来组装各个动画；由于动画执行时需要知道执行时间所以RadarLayout需要有表示执行时间的属性并且该属性外界可访问可修改；由于RadarLayout的动画效果是子View来执行的，在咻一咻页面是个圆，所以需要定义子View并画在屏幕上，而画在屏幕上需要有画笔，画笔需要有颜色，还需要知道画在哪，所以可定义我们的RadarLayout定义如下所示：

public class RadarLayout extends FrameLayout {

    public static final int INFINITE = 0;

    private static final int DEFAULT_COUNT = 4;
    private static final int DEFAULT_COLOR = Color.rgb(0, 116, 193);
    private static final int DEFAULT_DURATION = 7000;
    private static final int DEFAULT_REPEAT = INFINITE;
    private static final int DEFAULT_STROKE_WIDTH = 2;

    private int mCount;
    private int mDuration;
    private int mRepeat;

    private AnimatorSet mAnimatorSet;
    
    private Paint mPaint;
    private int mColor;
    private float m