安卓自定义view之仿极客学院动态加载

一、概述

本次自定义view，仿的是极客学院的一个动态加载图，四个小圆交替轮循。项目代码简洁，用到了如下知识点：
1、ValueAnimator动画与监听
2、View的测量与绘制
3、canvas绘制图形

二、思路

1、在onMeasure方法中确定view的大小
2、在onDraw方法中根据fraction绘制四个圆形，
3、在我们通过startAnim开启动画的时候，用ValueAnimator.ofFloat(0, 1)来模拟一个0~1的过程，监听此过程，通过此fraction的改变来改变四个小圆的位置坐标并引导view重绘来完成小圆的平移动画
4、当不需要动画时，调用stopAnim来取消动画，否则可能造成内存泄漏（在动画运行的线程调用）

三、实现

难点主要在于四个点的位置坐标的计算，以左上角为例：
// left-top
canvas.drawCircle(radius + fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintRed);
前面两个参数用户设置圆的半径，左上的圆初始时据左距右都有半径大小的长度，当fraction变化时，x方向的总位移是(width - 2) * radius,乘以fraction就可以得到x方向的变化量，y方向同理。其他几个点类似，注意方向与正负
注意：
1、fraction不可为int类类型，否则达不到想要的效果
2、要记得调用invalidate()方法，否则无效果

package com.yu.myloaderview;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;

/**
 * Created by pecu on 2016/09/15.
 */
public class LoaderView extends View {
    private static final int radius = 12;  // 圆的半径
    private static final int width = 8;  // radius*width为view的宽度
    private static final int textSize = 50;
    private static float fraction = 0;
    private Paint mPaintRed, mPaintBlue, mPaintGreen, mPaintYellow;
    private ValueAnimator animator;

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

    public LoaderView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private void init() {
        mPaintRed = new Paint();
        mPaintBlue = new Paint();
        mPaintGreen = new Paint();
        mPaintYellow = new Paint();

        mPaintRed.setAntiAlias(true);
        mPaintBlue.setAntiAlias(true);
        mPaintGreen.setAntiAlias(true);
        mPaintYellow.setAntiAlias(true);

        mPaintYellow.setColor(Color.parseColor("#ff9933"));
        mPaintGreen.setColor(Color.GREEN);
        mPaintBlue.setColor(Color.parseColor("#ff3399ff"));
        mPaintRed.setColor(Color.RED);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(width * radius, width * radius);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制四个圆，通过fraction来改变他们的位置
        // left-top
        canvas.drawCircle(radius + fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintRed);
        // left-bottom
        canvas.drawCircle(radius + fraction * (width - 2) * radius, radius * (width - 1) - fraction * (width - 2) * radius, radius, mPaintYellow);
        // right-top
        canvas.drawCircle(radius * (width - 1) - fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintBlue);
        // right-bottom
        canvas.drawCircle(radius * (width - 1) - fraction * (width - 2) * radius, radius * (width - 1) - fraction * (width - 2) * radius, radius, mPaintGreen);

    }

    /**
     * 开启动画
     */
    public void startAnim() {
        animator = ValueAnimator.ofFloat(0, 1);
        animator.setDuration(800);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.REVERSE);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                fraction = animation.getAnimatedFraction();  // 设置fraction
                invalidate();  // 使view重绘
            }
        });
        animator.start();
    }

    /**
     * 停止动画，在动画运行的线程中调用
     */
    public void stopAnim() {
        if (animator != null) {
            animator.cancel();
        }
    }

}

在MainActivity中使用

package com.yu.myloaderview;

import android.os.Bundle;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

public class MainActivity extends AppCompatActivity {
    LoaderView loaderView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        loaderView = (LoaderView) findViewById(R.id.laodview);
        loaderView.startAnim();

        new Thread(){
            @Override
            public void run() {
                super.run();
                SystemClock.sleep(5000); // 模拟耗时

                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                    //    loaderView.stopAnim(); // 停止动画,主线程调用
                        Log.e("TAG", "stopAnim");
                    }
                });
            }
        }.start();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        loaderView.stopAnim();
    }
}

四、效果图

效果图如下，有点卡顿是因为制作图的原因

---

中秋版，祝大家中秋快乐~ （有点卡顿，录屏的原因）

这个主要添加了文字，只有onDraw部分有变化，并且注意绘制文字时，y是按基线绘制的，即左下角为参考点。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制四个圆，通过fraction来改变他们的位置

        // right-top
        canvas.drawCircle(radius * (width - 1) - fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintBlue);
        mPaintBlue.setTextSize(textSize);
        canvas.drawText("乐", 0, 1, -radius / 2 + radius * (width - 1) - fraction * (width - 2) * radius, radius * 3 / 2 + fraction * (width - 2) * radius, mPaintRed);

        // left-bottom
        canvas.drawCircle(radius + fraction * (width - 2) * radius, radius * (width - 1) - fraction * (width - 2) * radius, radius, mPaintYellow);
        mPaintRed.setTextSize(textSize);
        canvas.drawText("快", 0, 1, radius / 2 + fraction * (width - 2) * radius, radius / 2 + radius * (width - 1) - fraction * (width - 2) * radius, mPaintRed);

        // right-bottom
        canvas.drawCircle(radius * (width - 1) - fraction * (width - 2) * radius, radius * (width - 1) - fraction * (width - 2) * radius, radius, mPaintGreen);
        mPaintRed.setTextSize(textSize);
        canvas.drawText("秋", 0, 1, -radius / 2 + radius * (width - 1) - fraction * (width - 2) * radius, radius / 2 + radius * (width - 1) - fraction * (width - 2) * radius, mPaintRed);

        // left-top
        canvas.drawCircle(radius + fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintRed);
        mPaintBlue.setTextSize(textSize);
        canvas.drawText("中", 0, 1, radius / 2 + fraction * (width - 2) * radius, radius * 3 / 2 + fraction * (width - 2) * radius, mPaintBlue);

    }