自定义view————loading框

写自定义view，怎么能没有自己写的loading框了，今天给大家送上一个loading框，前期losing框是很简单的效果，三个状态：loading、success、error，不逼逼了，先上给糙一点的效果GIF，回头继续完善。

糙一点的loading框效果看完了，接下来说一下实现过程，采用WindowManager将losing框的view置于显示view的上层，起初上来是loading转圈状态，根据加载返回的结构设置成功或者失败。

loading状态

ValueAnimator实现AnimatorUpdateListener、AnimatorListener监听方法，AnimatorUpdateListener中接受valueAnimator.getAnimatedValue();(不断回调的在0-1这个范围内，经过插值器插值之后的返回值),然后去画圈圈

这里画的是一个通过改变不同起始角度画给一个240度的圆弧，以此达到loading效果

mPath = new Path();
loadingrectF = new RectF(-100, -100, 100, 100);
mPath.addArc(loadingrectF, mAnimatorValue * 360, 240);
canvas.drawPath(mPath, mPaint);
canvas.drawColor(Color.parseColor("#33000000"));

mAnimatorValue值的变化是AnimatorUpdateListener函数里面回调的值，然后通知重绘

loadingvalueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                // 不断回调的在0-1这个范围内，经过插值器插值之后的返回值
                mAnimatorValue = (float) valueAnimator.getAnimatedValue();
                 //重绘
                invalidate();

            }
        });

为了保证转了一圈过后继续转，这里引进Handler，在AnimatorListener的结束方法中进行通知动画继续

loadingvalueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                // getHandle发消息通知动画状态更新
                mAnimatorHandler.sendEmptyMessage(0);
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });

附上Handler相关代码

mAnimatorHandler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                switch (mcurrentState) {
                    case LODING:
                        //保持loading时一直执行动画
                        loadingvalueAnimator.start();
                        break;
                    case SUCCES:
                        break;
                    case ERROR:
                        break;
                    default:
                        break;
                }

            }
        };

到此为止，loading就能一直转了，接下来就是success、error两个状态了的讲解了

success状态

成功状态时，loading消失，显示成功的相关提醒（原谅我是一个程序员，做的loading不好看，准备后期功能完善后，会把loading、success、error状态的显示弄的像UI设计的一样），废话不多说了，该上菜了

/**
   * 成功
   */
  public void setSuccess() {
      loadingvalueAnimator.removeAllListeners();
      errorvalueAnimator.removeAllListeners();
      addSuccesLoadingListener();
      successvalueAnimator.start();
  }

移除掉其他ValueAnimator对应的监听方法，为success加上ValueAnimator的监听方法，这里就是显示一下success状态的文案，保持500ms，然后显示（这一块可以改成其他动画酷炫效果）

successvalueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                //动画开始，去绘制success的文案
                mcurrentState = State.SUCCES;
                invalidate();
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                //动画结束，隐藏状态
                LoadingView.this.setVisibility(GONE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });

error状态

和success状态同理，只是文案不一样

代码中使用

添加到activity开始loading动画，待结果返回时然后设置相关状态显示500ms，然后显示消失，接下来贴出模拟的loading—>success—>dismiss的一个过程

        loadingRoundView = new LoadingView(this);
        loadingRoundView.addPartentViewStartLoading(MainActivity.this);

        mErrorHandler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                if (error <= 50) {
                    if (error == 0) {

                        loadingRoundView.startLoading();

                    }
                    error += 1;
                    mErrorHandler.sendEmptyMessageDelayed(0, 100);
                } else {
                    loadingRoundView.setError();

                }
            }
        };
//
        mSuccesHandler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                if (succes <= 50) {
                    succes += 1;
                    mSuccesHandler.sendEmptyMessageDelayed(0, 100);
                } else {
                    loadingRoundView.setSuccess();

                    mErrorHandler.sendEmptyMessageDelayed(0, 1000);
                }
            }
        };

        mSuccesHandler.sendEmptyMessageDelayed(0, 100);

设置loading方式

目前只写了三个loading方式

//loading的类型
    private Type mcurrentType = Type.ROUND;

    //loading type
    public enum Type {
        ARC,//传统弧形转圈
        CIRCLE,//天女散花
        ROUND,//渐变的圆圈旋转
    }

然后根据不同的loading方法，ondraw()里面执行的方法也不一样

case LODING:
                if (mcurrentType == Type.ARC) {
                    mPath = new Path();
                    RectF loadingrectF = new RectF(-radius, -radius, radius, radius);
                    mPath.addArc(loadingrectF, mAnimatorValue * 360, 240);
                    canvas.drawPath(mPath, mPaint);
                } else if (mcurrentType == Type.CIRCLE) {
                    mPaint.setStyle(Paint.Style.FILL);
                    mPath = new Path();
                    for (int i = 0; i < 10; i++) {
                        mPath.addCircle(mAnimatorValue * mwidth / 2 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 2 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                        mPath.addCircle(mAnimatorValue * mwidth / 3 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 3 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                        mPath.addCircle(mAnimatorValue * mwidth / 4 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 4 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                        mPath.addCircle(mAnimatorValue * mwidth / 5 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 5 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                        mPath.addCircle(mAnimatorValue * mwidth / 6 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 6 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                    }
                    canvas.drawPath(mPath, mPaint);
                } else if (mcurrentType == Type.ROUND) {
                    mPaint.setStyle(Paint.Style.FILL);
                    Path path = new Path();
                    path.addCircle(0, 0, radius, Path.Direction.CW);           // 添加一个圆形
                    PathMeasure pathMeasure = new PathMeasure(path, false);
                    pathMeasure.getPosTan(pathMeasure.getLength() * mAnimatorValue, pos, tan);

//              mPath = new Path();
                    //使用 Math.atan2(tan[1], tan[0]) 将 tan 转化为角(单位为弧度)的时候要注意参数顺序。
                    float angle = (float) Math.atan2(tan[1], tan[0]);
                    for (int i = 0; i < roundCount; i++) {
                        //用path一次性画的，透明度不好设置
//              mPath.addCircle((float) (Math.cos(angle + i*0.4) * 100), (float) (Math.sin(angle+ i*0.4) * 100), 16, Path.Direction.CW);
                        mPaint.setAlpha(onealpha * i);
                        canvas.drawCircle((float) (Math.cos(angle + i * 0.4) * radius), (float) (Math.sin(angle + i * 0.4) * radius), circleRadius, mPaint);
                    }
//              canvas.drawPath(mPath, circlePaint);
                }

                break;

附上loadingview完整代码

package com.loadingview;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;


/**
 * Created by wujun on 2017/7/31.
 *
 * @author madreain
 * @desc loading框  目前支持三种状态及三种样式
 */

public class LoadingView extends View {
    //屏幕的宽高
    int mwidth;
    int mheight;
    int backgroudColor;

    //主
    Paint mPaint;
    //属性
    int mpaintColor;
    float mpaintStrokeWidth;

    Path mPath;
    //转圈的半径
    float radius = 100;
    //画圆圈的半径
    float circleRadius = 16;
    //设置转圈的圆点数量
    private int roundCount = 10;
    //1-255
    private int onealpha;

    private float[] pos;                // 当前点的实际位置
    private float[] tan;                // 当前点的tangent值,用于计算图片所需旋转的角度

    //loading的动效
    ValueAnimator loadingvalueAnimator;
    //loading 动画数值(用于控制动画状态,因为同一时间内只允许有一种状态出现,具体数值处理取决于当前状态)
    private float mAnimatorValue = 0;

    //loading 用于控制动画状态转换
    private Handler mAnimatorHandler;

    State mcurrentState = State.LODING;

    //loading状态，loading，成功，失败
    private enum State {
        LODING,
        SUCCES,
        ERROR,
    }

    //成功失败的画笔
    Paint textPaint;
    int textPaintColor;
    float textPaintStrokeWidth;
    float textPaintTextSize;

    //成功的动效
    ValueAnimator successvalueAnimator;
    //失败的动效
    ValueAnimator errorvalueAnimator;


    //loading的类型
    private Type mcurrentType = Type.ROUND;

    //loading type
    public enum Type {
        ARC,//传统弧形转圈
        CIRCLE,//天女散花
        ROUND,//渐变的圆圈旋转
    }

    public LoadingView(Context context) {
        super(context);
        initPaint();
        initHandler();
        initListener();
    }


    public LoadingView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initTypedArray(context, attrs);
        initPaint();
        initHandler();
        initListener();
    }

    private void initTypedArray(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LoadingView);
        backgroudColor=typedArray.getColor(R.styleable.LoadingView_backgroudColor,Color.parseColor("#66000000"));
        mpaintColor = typedArray.getColor(R.styleable.LoadingView_mpaintColor, Color.BLUE);
        mpaintStrokeWidth = typedArray.getFloat(R.styleable.LoadingView_mpaintStrokeWidth, 16);
        textPaintColor = typedArray.getColor(R.styleable.LoadingView_textPaintColor, Color.BLUE);
        textPaintStrokeWidth = typedArray.getFloat(R.styleable.LoadingView_textPaintStrokeWidth, 6);
        textPaintTextSize = typedArray.getFloat(R.styleable.LoadingView_textPaintTextSize, 60);
        radius = typedArray.getFloat(R.styleable.LoadingView_radius, 100);
        circleRadius = typedArray.getFloat(R.styleable.LoadingView_circleRadius, 16);
        roundCount = typedArray.getInteger(R.styleable.LoadingView_roundCount, 10);
        int type = typedArray.getInt(R.styleable.LoadingView_Type, 0);
        if (type == 0) {
            mcurrentType = Type.ARC;
        } else if (type == 1) {
            mcurrentType = Type.CIRCLE;
        } else if (type == 2) {
            mcurrentType = Type.ROUND;
        }
    }


    public LoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initTypedArray(context, attrs);
        initPaint();
        initHandler();
        initListener();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mwidth = w;
        mheight = h;
    }

    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(mpaintColor);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(mpaintStrokeWidth);
        mPaint.setStyle(Paint.Style.STROKE);

        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(textPaintColor);
        textPaint.setStrokeCap(Paint.Cap.ROUND);
        textPaint.setStrokeWidth(textPaintStrokeWidth);
        textPaint.setStyle(Paint.Style.STROKE);
        textPaint.setTextSize(textPaintTextSize);

        pos = new float[2];
        tan = new float[2];

        //计算透明度
        onealpha = 255 / roundCount;

    }

    private void initHandler() {
        mAnimatorHandler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                switch (mcurrentState) {
                    case LODING:
                        //保持loading时一直执行动画
                        loadingvalueAnimator.start();
                        break;
                    case SUCCES:
                        break;
                    case ERROR:
                        break;
                    default:
                        break;
                }

            }
        };
    }

    private void initListener() {
        // 创建0－1的一个过程,任何复杂的过程都可以采用归一化，然后在addUpdateListener回调里去做自己想要的变化
        loadingvalueAnimator = ValueAnimator.ofFloat(0, 1);
        // 设置过程的时间为2S
        loadingvalueAnimator.setDuration(2000);

        successvalueAnimator = ValueAnimator.ofFloat(0, 1);
        successvalueAnimator.setDuration(500);

        errorvalueAnimator = ValueAnimator.ofFloat(0, 1);
        errorvalueAnimator.setDuration(500);
    }

    private void addLoadingListener() {
        loadingvalueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                // 不断回调的在0-1这个范围内，经过插值器插值之后的返回值
                mAnimatorValue = (float) valueAnimator.getAnimatedValue();
                // 获取当前点坐标封装到mCurrentPosition
//                mPathMeasure.getPosTan(mAnimatorValue, mCurrentPosition, null);
                //重绘
                invalidate();

            }
        });

        loadingvalueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                // getHandle发消息通知动画状态更新
                mAnimatorHandler.sendEmptyMessage(0);
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
    }

    private void addSuccesLoadingListener() {
//        successvalueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
//            @Override
//            public void onAnimationUpdate(ValueAnimator valueAnimator) {
//
//
//            }
//        });

        successvalueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                mcurrentState = State.SUCCES;
                invalidate();
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                //动画结束，隐藏状态
                LoadingView.this.setVisibility(GONE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
    }

    private void addErrorLoadingListener() {
//        errorvalueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
//            @Override
//            public void onAnimationUpdate(ValueAnimator valueAnimator) {
//
//
//            }
//        });

        errorvalueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                mcurrentState = State.ERROR;
                invalidate();
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                //动画结束，隐藏状态
                LoadingView.this.setVisibility(GONE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //移到屏幕中间
        canvas.translate(mwidth / 2, mheight / 2);
        //都添加背景
        canvas.drawColor(backgroudColor);
        drawLoading(canvas);

    }

    private void drawLoading(Canvas canvas) {
        switch (mcurrentState) {
            case LODING:
                if (mcurrentType == Type.ARC) {
                    mPath = new Path();
                    RectF loadingrectF = new RectF(-radius, -radius, radius, radius);
                    mPath.addArc(loadingrectF, mAnimatorValue * 360, 240);
                    canvas.drawPath(mPath, mPaint);
                } else if (mcurrentType == Type.CIRCLE) {
                    mPaint.setStyle(Paint.Style.FILL);
                    mPath = new Path();
                    for (int i = 0; i < 10; i++) {
                        mPath.addCircle(mAnimatorValue * mwidth / 2 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 2 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                        mPath.addCircle(mAnimatorValue * mwidth / 3 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 3 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                        mPath.addCircle(mAnimatorValue * mwidth / 4 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 4 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                        mPath.addCircle(mAnimatorValue * mwidth / 5 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 5 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                        mPath.addCircle(mAnimatorValue * mwidth / 6 * (float) Math.cos(30 * i), mAnimatorValue * mwidth / 6 * (float) Math.sin(30 * i), 16, Path.Direction.CW);
                    }
                    canvas.drawPath(mPath, mPaint);
                } else if (mcurrentType == Type.ROUND) {
                    mPaint.setStyle(Paint.Style.FILL);
                    Path path = new Path();
                    path.addCircle(0, 0, radius, Path.Direction.CW);           // 添加一个圆形
                    PathMeasure pathMeasure = new PathMeasure(path, false);
                    pathMeasure.getPosTan(pathMeasure.getLength() * mAnimatorValue, pos, tan);

//              mPath = new Path();
                    //使用 Math.atan2(tan[1], tan[0]) 将 tan 转化为角(单位为弧度)的时候要注意参数顺序。
                    float angle = (float) Math.atan2(tan[1], tan[0]);
                    for (int i = 0; i < roundCount; i++) {
                        //用path一次性画的，透明度不好设置
//              mPath.addCircle((float) (Math.cos(angle + i*0.4) * 100), (float) (Math.sin(angle+ i*0.4) * 100), 16, Path.Direction.CW);
                        mPaint.setAlpha(onealpha * i);
                        canvas.drawCircle((float) (Math.cos(angle + i * 0.4) * radius), (float) (Math.sin(angle + i * 0.4) * radius), circleRadius, mPaint);
                    }
//              canvas.drawPath(mPath, circlePaint);
                }

                break;
            case SUCCES:

                canvas.drawCircle(0, 0, radius, textPaint);

                canvas.drawLine(-radius / 2, 0, 0, radius / 2, textPaint);
                canvas.drawLine(0, radius / 2, radius / 2, -radius / 2, textPaint);

                break;
            case ERROR:
                canvas.drawCircle(0, 0, radius, textPaint);

                canvas.drawLine(radius / 2, radius / 2, -radius / 2, -radius / 2, textPaint);
                canvas.drawLine(radius / 2, -radius / 2, -radius / 2, radius / 2, textPaint);

                break;
            default:
                break;
        }
    }


    /**
     * 添加到activity的上层并执行动画
     * @param activity
     *
     */
    public void addPartentViewStartLoading(Activity activity) {
        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        //Activity中View布局的最祖宗布局,是一个FrameLayout,叫做DecorView,通过getWindow().getDecorView()可以获取到
        FrameLayout view = (FrameLayout) activity.getWindow().getDecorView();
        view.addView(this,layoutParams);
        startLoading();
    }


    /**
     * 设置loading开始
     */
    public void startLoading() {
        if (loadingvalueAnimator != null) {
            mcurrentState = State.LODING;
            addLoadingListener();
            successvalueAnimator.removeAllListeners();
            errorvalueAnimator.removeAllListeners();
            //如果是gone --->VISIBLE
            if (this.getVisibility() == GONE) {
                this.setVisibility(VISIBLE);
            }
            loadingvalueAnimator.start();
        }
    }

    /**
     * 成功
     */
    public void setSuccess() {
        loadingvalueAnimator.removeAllListeners();
        errorvalueAnimator.removeAllListeners();
        addSuccesLoadingListener();
        successvalueAnimator.start();
    }

    /**
     * 失败
     */
    public void setError() {
        loadingvalueAnimator.removeAllListeners();
        successvalueAnimator.removeAllListeners();
        addErrorLoadingListener();
        errorvalueAnimator.start();
    }

    /**
     * 整个事件的消费来保证loading状态不可操作
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return true;
    }

    /**
     * 设置loading的背景颜色
     * @param backgroudColor
     */
    public void setBackgroudColor(int backgroudColor) {
        this.backgroudColor = backgroudColor;
    }

    /**
     *
     * @param mpaintColor
     */
    public void setMpaintColor(int mpaintColor) {
        this.mpaintColor = mpaintColor;
    }

    /**
     *
     * @param mpaintStrokeWidth
     */
    public void setMpaintStrokeWidth(float mpaintStrokeWidth) {
        this.mpaintStrokeWidth = mpaintStrokeWidth;
    }

    /**
     *
     * @param textPaintColor
     */
    public void setTextPaintColor(int textPaintColor) {
        this.textPaintColor = textPaintColor;
    }

    /**
     *
     * @param textPaintStrokeWidth
     */
    public void setTextPaintStrokeWidth(float textPaintStrokeWidth) {
        this.textPaintStrokeWidth = textPaintStrokeWidth;
    }

    /**
     *
     * @param textPaintTextSize
     */
    public void setTextPaintTextSize(float textPaintTextSize) {
        this.textPaintTextSize = textPaintTextSize;
    }

    /**
     *
     * @param radius
     */
    public void setRadius(float radius) {
        this.radius = radius;
    }

    /**
     *
     * @param circleRadius
     */
    public void setCircleRadius(float circleRadius) {
        this.circleRadius = circleRadius;
    }

    /**
     *
     * @param roundCount
     */
    public void setRoundCount(int roundCount) {
        this.roundCount = roundCount;
    }

    /**
     *
     * @param mcurrentType
     */
    public void setType(Type mcurrentType){
        this.mcurrentType=mcurrentType;
    }

}

最后为大家献上自定义view————loading框 github demo，后期会将loading框优化，添加各种样式