Android-打造一个简单通用的Material加载LoadingView

三好码农

发布于 2018-09-11 10:54:47

2.9K0

发布于 2018-09-11 10:54:47

我们开发App时，都难免要向服务器请求数据，在数据返回之前一般都需要有个进度指示器来告诉用户，程序正在拼命帮你加载，当数据返回后展示正常数据，这是个很简单也很常用的功能，但是可能每一个页面都需要为这个简单功能浪费精力体力，所以我们需要一个简单通用的加载LoadingView。

实现Material Progressbar

因为网络请求的时间一般是未知的，所以我们一般都是用一个循环的圆圈指示器来提示用户，如下图。

Material-Progressbar

这个View，仔细观察，可以按下面的步骤做无限循环来显示：

1.根据起始弧度startArc和要画的弧度arc，画一个弧形，弧度arc逐渐加大。 2.判读弧度arc是否大于maxArc，如果为真，起始弧度startArc开始增加，弧度arc逐渐减少。 3.当弧度arc小于minArc时，回到第1步。同时，整个画布canvas在按照一个角速度做旋转。除此之外还有一件事情要做，需要在弧形中间画一个圆形，来擦除中间部分的颜色，我们可以用Xfermode来实现，Xfermode可以对多个图层按规则进行混合，具体可以自行Google哦。

我们开始动手实现，篇幅关系，只贴一些关键代码片段（项目已经共享到Github，结尾会给出链接）。

public class MaterialCircleView extends View {

/**
 * 是否需要对画笔颜色进行渐变处理
 */
private boolean bGradient;
/**
 * 画笔颜色
 */
private int circleColor;
/**
 * 画圆圈宽度
 */
private int circleWidth;
/**
 * 圆圈半径
 */
private int radius;
public MaterialCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    TypedArray t = null;
    try {
        t = context.obtainStyledAttributes(attrs, R.styleable.MaterialCircleView,
                0, defStyleAttr);
        setbGradient(t.getBoolean(R.styleable.MaterialCircleView_bGradient, true));
        circleColor = t.getColor(R.styleable.MaterialCircleView_circleColor,
                getResources().getColor(android.R.color.holo_blue_light));
        circleWidth = t.getDimensionPixelSize(R.styleable.MaterialCircleView_circleWidth,
                10);
        radius = t.getDimensionPixelSize(R.styleable.MaterialCircleView_radius,
                50);
    } finally {
        if (t != null) {
            t.recycle();
        }
    }

    mPaint = new Paint();
    if (isbGradient()) {
        mPaint.setColor(Color.rgb(red, green, blue));
    }else {
        mPaint.setColor(circleColor);
    }
    mPaint.setAntiAlias(true);
    setBackgroundColor(getResources().getColor(android.R.color.transparent));
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    sWidth = this.getMeasuredWidth();
    sHeight = this.getMeasuredHeight();
    halfWidth = sWidth / 2;
    halfHeight = sHeight / 2;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //计算startAngle和endAngle，
    //保证它们在maxAngle和minAngle之间循环递增递减
    if (startAngle == minAngle) {
        endAngle += 6;
    }
    if (endAngle >= 280 || startAngle > minAngle) {
        startAngle += 6;
        if(endAngle > 20) {
            endAngle -= 6;
        }

    }
    if (startAngle > minAngle + 280) {
        minAngle = startAngle;
        startAngle = minAngle;
        endAngle = 20;
    }

    checkPaint();
    //旋转canvas
    canvas.rotate(curAngle += rotateDelta, halfWidth, halfHeight);
    //将弧度和擦除圆形绘制在bitmap上
    Bitmap bitmap = Bitmap.createBitmap(sWidth, sHeight, Bitmap.Config.ARGB_8888);
    Canvas bmpCanvas = new Canvas(bitmap);
    bmpCanvas.drawArc(new RectF(0, 0, sWidth, sHeight), startAngle, endAngle, true, mPaint);
    Paint transparentPaint = new Paint();
    transparentPaint.setAntiAlias(true);
    transparentPaint.setColor(getResources().getColor(android.R.color.transparent));
    transparentPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    bmpCanvas.drawCircle(halfWidth, halfHeight,
            halfWidth - circleWidth, transparentPaint);
    canvas.drawBitmap(bitmap, 0, 0, new Paint());
    //保证绘制动画延续
    invalidate();
}

整个实现过程就是这样，代码量比较少，这里顺带提一下，我们额外实现了一个颜色渐变的过程，R.styleable.MaterialCircleView_bGradient属性是true时启用，其实就一直改变mPaint的颜色。

private int colorDelta = 2;
private void checkPaint() {
    if (isbGradient()) {
        switch (phase % 5) {
            case 0:
                green += colorDelta;
                if (green > 255) {
                    green = 255;
                    phase ++;
                }
                break;
            case 1:
                red += colorDelta;
                green -= colorDelta;
                if (red > 255) {
                    red = 255;
                    green = 0;
                    phase ++;
                }
                break;
            case 2:
                blue -= colorDelta;
                if (blue < 0) {
                    blue = 0;
                    phase ++;
                }
                break;
            case 3:
                red -= colorDelta;
                green += colorDelta;
                if (red < 0) {
                    red = 0;
                    green = 255;
                    phase ++;
                }
                break;
            case 4:
                green -= colorDelta;
                blue += colorDelta;
                if (green < 0) {
                    green = 0;
                    blue = 255;
                    phase ++;
                }
                break;
        }
        mPaint.setColor(Color.rgb(red, green, blue));
    }
}

实现UniversalLoadingView

现在已经有了圆形指示器，还需要一个textView来显示文字，所以我们再封装一个ViewGroup，来管理加载的几种状态，包括指示器的隐藏和现实，textView文本的改变等。同样只贴关键代码片段。

public class UniversalLoadingView extends ViewGroup{
public enum State{
    GONE,
    LOADING,
    LOADING_FALIED,
    LOADING_EMPTY
}

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

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

public UniversalLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    TypedArray t = null;
    try {
        t = context.obtainStyledAttributes(attrs, R.styleable.MaterialCircleView,
                0, defStyleAttr);
        bGradient = t.getBoolean(R.styleable.MaterialCircleView_bGradient, true);
        circleColor = t.getColor(R.styleable.MaterialCircleView_circleColor,
                getResources().getColor(android.R.color.holo_blue_light));
        circleWidth = t.getDimensionPixelSize(R.styleable.MaterialCircleView_circleWidth,
                10);
        radius = t.getDimensionPixelSize(R.styleable.MaterialCircleView_radius,
                MaterialCircleView.dpToPx(50, getResources()));
    } finally {
        if (t != null) {
            t.recycle();
        }
    }

    try {
        t = context.obtainStyledAttributes(attrs, R.styleable.UniversalLoadingView,
                0, defStyleAttr);
        setbTransparent(t.getBoolean(R.styleable.UniversalLoadingView_bg_transparent, false));
        alpha = t.getDimensionPixelSize(R.styleable.UniversalLoadingView_bg_alpha,
                255);
    } finally {
        if (t != null) {
            t.recycle();
        }
    }

    materialCircleView = new MaterialCircleView(context, attrs, defStyleAttr);
   //add circle view
    addView(materialCircleView);

    mTipTextView = new TextView(context);
    mTipTextView.setText(LOADING_TIP);
    mTipTextView.setTextSize(16f);
    mTipTextView.setGravity(Gravity.CENTER);
    mTipTextView.setSingleLine(false);
    mTipTextView.setMaxLines(2);
    mTipTextView.setTextColor(getResources().getColo r(android.R.color.darker_gray));
    addView(mTipTextView);

    this.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            if (mLoadState == State.LOADING_EMPTY || mLoadState == State.LOADING_FALIED) {
                if (mReloadListener != null) {
                    mReloadListener.reload();
                }
            }
        }
    });

    mHandler = new Handler();

    if (isbTransparent()) {
        setBackgroundColor(getResources().getColor(android.R.color.transparent));
    }
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
//        return super.onInterceptTouchEvent(ev);
    return true;
}


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    measureChildren(widthMeasureSpec, heightMeasureSpec);
    LayoutParams params = (LayoutParams) materialCircleView.getLayoutParams();
    sWidth = MeasureSpec.getSize(widthMeasureSpec);
    sHeight = MeasureSpec.getSize(heightMeasureSpec);
    params.left = (sWidth - radius) / 2;
    params.top = (sHeight - radius) / 2 - radius;
    params.width = radius;
    params.height = radius;

    LayoutParams tipParams = (LayoutParams) mTipTextView.getLayoutParams();
    int tipWidth = MaterialCircleView.dpToPx(100, getResources());
    int tipHeight = MaterialCircleView.dpToPx(50, getResources());
    tipParams.left = (sWidth - tipWidth) / 2;
    tipParams.top = (sHeight - radius) / 2 ;
    tipParams.width = tipWidth;
    tipParams.height = tipHeight;

    setMeasuredDimension(sWidth, sHeight);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    LayoutParams params = (LayoutParams) materialCircleView.getLayoutParams();
    materialCircleView.layout(params.left, params.top, params.left + params.width
                , params.top + params.height);
    LayoutParams tipParams = (LayoutParams) mTipTextView.getLayoutParams();
    mTipTextView.layout(tipParams.left, tipParams.top, tipParams.left + tipParams.width,
            tipParams.top + tipParams.height);
}

我们还需要一个暴露一个重试加载数据的接口，因为总有网络不好的时候。

public void setOnReloadListener(ReloadListner listener) {
    this.mReloadListener = listener;
}

/**
 * reload interface
 */
public interface ReloadListner {
    public void reload();
}

在Activity的Xml布局文件中，我们可以直接添加

  <com.sw.library.widget.library.UniversalLoadingView
    android:id="@+id/loadingView"
    app:bGradient="false"
    app:radius="50dp"
    app:bg_transparent="false"
    app:circleColor="@android:color/holo_green_dark"
    android:background="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></com.sw.library.widget.library.UniversalLoadingView>

也可以直接new UniversalLoadingView来创建，然后addView到布局根容器中。这个项目我已经共享到Github了 https://github.com/aliouswang/UniversalLoadingView 现在功能还比较弱，还有很多地方可以改进，欢迎大家pull request，共同进步. 最后是运行效果图，有图有真相。