自定义加载View

效果图：

效果图

核心代码如下：

public class LoadCircleView extends LinearLayout {

    private static final String TAG = "LoadCircleView";

    private Context mContext;


    public LoadCircleView(Context context) {
        this(context, null);
    }

    public LoadCircleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LoadCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public LoadCircleView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        this.mContext = context;
        setOrientation(HORIZONTAL);//设置水平布局
        setGravity(Gravity.CENTER);//设置子View居中显示
        CircleView circleView;
        LinearLayout.LayoutParams lp;
        for (int i = 0; i < 3; i++) {
            circleView = new CircleView(mContext);
            lp = new LayoutParams(40, 40);
            if (i != 0) {
                lp.leftMargin = 30;
            }
            addView(circleView, lp);
        }
        postDelayed(new Runnable() {
            @Override
            public void run() {
                startAnim(getChildAt(0));
            }
        },1000);
        postDelayed(new Runnable() {
            @Override
            public void run() {
                startAnim(getChildAt(1));
            }
        }, 1250);
        postDelayed(new Runnable() {
            @Override
            public void run() {
                startAnim(getChildAt(2));
            }
        }, 1500);
    }

//
//    private void startAnim(View view) {
//        ScaleAnimation scaleAnimation = new ScaleAnimation(1f, 0.6f, 1f, 0.6f,
//                ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
//        int duration = 350;
//        if (childViewIndex % 2 == 0) {
//            duration = 300;
//        }
//        scaleAnimation.setDuration(duration);
//        childViewIndex++;
//        scaleAnimation.setInterpolator(new LinearInterpolator());
//        scaleAnimation.setRepeatCount(Integer.MAX_VALUE);
//        scaleAnimation.setRepeatMode(Animation.REVERSE);
//        view.startAnimation(scaleAnimation);
//    }

    private void startAnim(View view) {
        AnimatorSet animatorSet = new AnimatorSet();//组合动画
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1, 0.5f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1, 0.5f);
        scaleX.setRepeatCount(ValueAnimator.INFINITE);
        scaleX.setRepeatMode(ValueAnimator.REVERSE);
        scaleY.setRepeatCount(ValueAnimator.INFINITE);
        scaleY.setRepeatMode(ValueAnimator.REVERSE);

        animatorSet.setDuration(500);
        animatorSet.setInterpolator(new DecelerateInterpolator());
        animatorSet.play(scaleX).with(scaleY);//两个动画同时开始
        animatorSet.start();
    }

    /**
     * 静态内部类，圆形View
     */
    private static class CircleView extends View {

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

        public CircleView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
        }

        public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }

        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            Paint paint = new Paint();
            Random random = new Random();
            int i = random.nextInt(3);
            paint.setColor(getContext().getResources().getColor(R.color.colorAccent));
            paint.setAntiAlias(true);//抗锯齿
            paint.setStyle(Paint.Style.FILL);
            int height = getHeight();
            int width = getWidth();
            int radius = 0;
            if (height > width) {
                radius = width / 2;
            } else {
                radius = height / 2;
            }
            canvas.drawCircle(width / 2, height / 2, width / 2, paint);
        }
    }
}

这里默认添加了3个小圆圈，有兴趣的可以参考上述代码修改

1. 继承线性布局，设置水平布局，居中排列
2. 添加CircleView，设置左边距
3. 以一定间隔时间依次开始动画