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

来源：互联网发布：咸鱼卖家申请淘宝介入编辑：程序博客网时间：2024/05/21 06:50

一、概述

本次自定义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);    }

0 0