Android简单完成加载loading框(以圆形背景 波浪lo

2017-05-10  本文已影响0人  打不垮的墙
我的视频 2_clip.gif

loading框至今,github上已经有许许多多大神的作品,扩展性也很强,可以满足大多数使用,不过在有些时候,我们只是想要个简简单单的loading框(结合公司ui设计),无须去依赖整个jar包,增加项目的体量,可以通过简单的几步自定义View来完成。
废话不多说,直接上代码,后续有空了,再来解释
<pre>
package com.example.cloud.demmm;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;

/**

public class ProgressDIY extends View {
private Paint mPaintBg;
private Paint mPaintText;
private Paint mPaintPs;

private String mProgress="0%";
private Rect mProgressRect;
private int waveR=10;//波浪半径
private int progress;
private float waveAffet=1;//波浪幅度0-1
public ProgressDIY(Context context) {
    super(context);
    init();
}

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

private void init() {
    mPaintBg=new Paint();
    mPaintBg.setColor(Color.GRAY);
    mPaintBg.setAntiAlias(true);
    mPaintBg.setStyle(Paint.Style.FILL);

    mPaintText=new Paint();
    mPaintText.setColor(Color.WHITE);
    mPaintText.setAntiAlias(true);
    mPaintText.setStyle(Paint.Style.STROKE);
    mPaintText.setTextSize(20);

    mPaintPs=new Paint();
    mPaintPs.setColor(Color.BLUE);
    mPaintPs.setAntiAlias(true);
    mPaintPs.setStyle(Paint.Style.FILL);

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    mProgressRect=new Rect();
    mPaintText.getTextBounds(mProgress,0,mProgress.length()-1,mProgressRect);
    int mode = MeasureSpec.getMode(widthMeasureSpec);
    int mode2 = MeasureSpec.getMode(heightMeasureSpec);
    setMeasuredDimension(mode==MeasureSpec.AT_MOST?100:MeasureSpec.getSize(widthMeasureSpec),mode2==MeasureSpec.AT_MOST?100:MeasureSpec.getSize(heightMeasureSpec));
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(getMeasuredWidth()/2,getMeasuredHeight()/2,100,mPaintBg);
    canvas.save();
    RectF rect = new RectF(getMeasuredWidth() / 2 - 100, getMeasuredHeight() / 2 - 100, getMeasuredWidth() / 2 + 100, getMeasuredHeight() / 2 + 100);

// canvas.clipRect(rect);
Path path1=new Path();
path1.moveTo(rect.left,rect.top+100);
path1.addCircle(getMeasuredWidth() / 2,getMeasuredHeight() / 2,100,Path.Direction.CW);
canvas.clipPath(path1);
canvas.clipRect(rect);
Path path = new Path();
path.moveTo(rect.left,rect.bottom-progress2);
path.lineTo(rect.left,rect.bottom);
path.lineTo(rect.right,rect.bottom);
path.lineTo(rect.right,rect.bottom-progress
2);
path.quadTo(getMeasuredWidth()/2+50,rect.bottom-progress2+(waveRwaveAffet),getMeasuredWidth()/2,rect.bottom-progress2);
path.quadTo(getMeasuredWidth()/2-50,rect.bottom-progress
2-(waveRwaveAffet),rect.left,rect.bottom-progress2);
canvas.drawPath(path,mPaintPs);

    canvas.drawText(mProgress,getMeasuredWidth()/2-mProgressRect.right,getMeasuredHeight()/2-mProgressRect.top/2,mPaintText);
    canvas.restore();
}

public void setProgress(int progress) {
    if (progress>100){
        throw  new RuntimeException("progress isn't more than 100%");
    }
    ValueAnimator animator = ValueAnimator.ofInt(0, progress);
    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.setDuration(10000);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int value = (int) animation.getAnimatedValue();
            ProgressDIY.this.progress = value;
            mProgress=value+"%";

/
if (value/5%2==0){
waveAffet=-1*value%10/10f;
}else {
waveAffet=value%10/10f;
}

            invalidate();
        }

    });
    animator.start();

}

}

</pre>

上一篇 下一篇

猜你喜欢

热点阅读