安卓自定義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);

    }