一个自定义Loading控件的实现

偶然在网上发现一个loading的gif

感觉效果不错，于是就试着用代码来实现一下。

分析

观察这个gif可以发现图形主要包含了两个部分，一是两个白色的半圆弧形，二是白色圆弧下的阴影。这里我准备用绘图的方式将它们画出来。

接着来看看动画。动画方面有一个起始的放大效果，接着两个半圆弧连同其阴影长度由小变大，与此同时图形开始顺时针旋转，然后圆弧的长度开始缩小，最后loading结束时图形缩小。分析完可以发现动画主要是有一个圆弧的长度变化和旋转效果，这里长度变化和旋转效果都会用绘图的方式实现

代码

首先定义一个RotateLoading继承View，并编写构造方法。

public RotateLoading(Context context) {
        super(context);
        initView(context, null);
    }

    public RotateLoading(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    public RotateLoading(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        int color = Color.WHITE;
        width = dpToPx(context, DEFAULT_WIDTH);
        shadowPosition = dpToPx(getContext(), DEFAULT_SHADOW_POSITION);

        mPaint = new Paint();
        mPaint.setColor(color);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(width);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
    }

生成RotateLoading时会调用initView()方法，对mPaint进行初始化。width为圆弧和阴影的宽度，shadowPosition为阴影与圆弧之间的位移量。

接着我们开始绘制图形。

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

        arc = 10;

        loadingRectF = new RectF(2 * width, 2 * width, w - 2 * width, h - 2 * width);
        shadowRectF = new RectF(2 * width + shadowPosition, 2 * width + shadowPosition, w - 2 * width + shadowPosition, h - 2 * width + shadowPosition);
    }