LoadingDotView：一个跑马灯加载控件

LoadingDotView：一个跑马灯加载控件

先上效果图

是不是看起来很眼熟，好像不少平台使用过类似的加载动画。
好久没写过自定义View,也好久没写过博客，一时兴起想练练手，先从简单点开始哈

使用起来很简单，只要设置相关属性即可

xml布局

 <com.kch.loadingdotview_lib.LoadingDotView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/loading_dot_view1"
    app:dot_color="#B452CD"
    app:dot_radius="10dp"
    app:dot_num="3"
    app:dot_space="5dp"
    app:anim_speed="180"
    app:dot_scaled_radius="15dp"
    android:layout_marginBottom="20dp"/>

属性简介

• dot_color 圆点颜色
• dot_radius 圆点半径
• dot_scaled_radius 圆点放大后的半径
• dot_space 圆点之间的间隔
• anim_speed 圆点缩放的时间间隔
• dot_num 圆点的数量
• scale_interpolator 插值器类型

代码设置属性

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    loading_dot_view1 = (LoadingDotView) findViewById(R.id.loading_dot_view1);
    loading_dot_view2 = (LoadingDotView) findViewById(R.id.loading_dot_view2);
    loading_dot_view3 = (LoadingDotView) findViewById(R.id.loading_dot_view3);

    loading_dot_view1.setDotNum(7);
    loading_dot_view1.setDotRadius(35);
    loading_dot_view2.setDotColor(Color.CYAN);
    loading_dot_view2.setMaxDotRadius(250);
    loading_dot_view3.setDotSpace(35);
    loading_dot_view3.setInterpolator(AnimationUtils.loadInterpolator(this,android.R.interpolator.anticipate));

}

实现思路很简单，通过ValueAnimator不断获取到动态变化的半径，并重新绘制circle，用一个指针指向正在变化的圆点，每执行完一次动画就改变指针的位置，在两端之间来回移动
主要实现代码是下面这个方法

/**
 * 圆点执行动画的方法
 */
private void startRace(){
    if (isScaling){
        return;
    }
    ValueAnimator animator = new ValueAnimator().setDuration(mSpeed);
    float startValue = mDotRadius;
    float maxValue = mMaxDotRadius;
    PropertyValuesHolder value = PropertyValuesHolder.ofFloat("radius",startValue,maxValue,startValue);
    animator.setValues(value);
    animator.setInterpolator(mInterpolator);

    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mScalingDotRadius = (float) animation.getAnimatedValue("radius");
            invalidate();
        }
    });
    animator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            isScaling = true;
            Log.d(TAG,"onAnimationStart"+"isScaling:"+isScaling+";isReset"+isReset);
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            isScaling=false;
            Log.d(TAG,"onAnimationEnd:"+"isScaling:"+isScaling+";isReset"+isReset);
            mScalingDotRadius = mDotRadius;
            //计算圆点来回跑的算法
            if (mScalePosition == mDotNum - 1) {
                mLastScalePosition = mScalePosition;
                mScalePosition--;
            } else if (mScalePosition == 0) {
                mLastScalePosition = mScalePosition;
                mScalePosition++;
            } else if (mLastScalePosition < mScalePosition) {
                mLastScalePosition = mScalePosition;
                mScalePosition++;
            } else if (mLastScalePosition > mScalePosition) {
                mLastScalePosition = mScalePosition;
                mScalePosition--;
            }
            //重置位置，恢复到初始状态
            if (isReset){
                isReset=false;
                mScalePosition = 0;
                mLastScalePosition = -1;
                invalidate();
            }else {
                invalidate();
                startRace();
            }


        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    });
    animator.start();
}

而onDraw方法只要区别正在变化的圆点和静止的圆点即可

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for (int i=0;i<mDotNum;i++){
        if (i==mScalePosition){
            canvas.drawCircle(mDots[i].x,mDots[i].y,mScalingDotRadius,mPaint);
        }else
            canvas.drawCircle(mDots[i].x,mDots[i].y,mDotRadius,mPaint);
    }

}

另外在onMeasure里要计算好整个控件所占的空间，主要注意圆点之间的空隙和圆点放大后所占的空间。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width = (int) (2*mDotRadius*mDotNum+(mDotNum-1)*mDotSpace+(mMaxDotRadius-mDotRadius)*2);
    int height = (int) mMaxDotRadius*2;
    setMeasuredDimension(width,height);

}

整体实现大概这样子,想要查看LoadingDotView的源码请前往github
地址：
https://github.com/MRKCH/LoadingDotView