Android渐变圆环加载控件实现

渐变圆环加载效果是一种常见的UI元素，广泛应用于淘宝、微信等知名应用中。今天我们将深入探讨并实现一个类似的自定义View。

自定义圆环.png

工作原理

通过提供开始和结束颜色，绘制一个渐变的圆环，并通过定时调用 invalidate 方法进行重绘，同时旋转画布以实现动画效果。我们使用 View 的 postDelayed() 方法来达到定时重绘的目的。如果需要更复杂的差值器效果，可以考虑使用动画框架。

完整代码

• 自定义属性

• Java代码

public class RingLoadingView extends View implements Runnable {
    private final int mDefaultStartColor = Color.argb(255, 180, 180, 180);
    private final int mDefaultEndColor = Color.argb(255, 255, 255, 255);
    private int[] mColors;
    private float mRingWidth;
    private boolean isAutoStart;
    private static final int DEFAULT_MIN_WIDTH = 100;
    private int mViewWidth;
    private int mViewHeight;
    private static final int INTERVAL_TIME = 15;
    private static final int TOTAL_ROTATION_ANGLE = 360;
    private int mCurrentAngle = 1;
    private float mRadius;
    private Paint mPaint;
    private RectF mCircleRect;

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

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

    public RingLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        initAttr(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mRingWidth);
        mPaint.setAntiAlias(true);
        mPaint.setShader(new SweepGradient(0, 0, mColors, null));
    }

    private void initAttr(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RingLoadingView, defStyleAttr, 0);
        int startColor = array.getColor(R.styleable.RingLoadingView_rlv_start_color, mDefaultStartColor);
        int endColor = array.getColor(R.styleable.RingLoadingView_rlv_end_color, mDefaultEndColor);
        mColors = new int[]{startColor, endColor};
        mRingWidth = array.getDimensionPixelSize(R.styleable.RingLoadingView_rlv_ring_width, dip2px(context, 2f));
        isAutoStart = array.getBoolean(R.styleable.RingLoadingView_rlv_auto_start, true);
        array.recycle();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mViewWidth = w;
        mViewHeight = h;
        mRadius = (Math.min(mViewWidth, mViewHeight) / 2f) * 0.8f;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(mViewWidth / 2, mViewHeight / 2);
        canvas.rotate(mCurrentAngle, 0, 0);
        if (mCircleRect == null) {
            mCircleRect = new RectF(-mRadius, -mRadius, mRadius, mRadius);
        }
        canvas.drawArc(mCircleRect, 0, 360, false, mPaint);
    }

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

    private int handleMeasure(int measureSpec) {
        int result = DEFAULT_MIN_WIDTH;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else if (specMode == MeasureSpec.AT_MOST) {
            result = Math.min(result, specSize);
        }
        return result;
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (isAutoStart) {
            start();
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stop();
    }

    @Override
    public void run() {
        if (mCurrentAngle >= TOTAL_ROTATION_ANGLE) {
            mCurrentAngle -= TOTAL_ROTATION_ANGLE;
        } else {
            mCurrentAngle += 10;
        }
        invalidate();
        postDelayed(this, INTERVAL_TIME);
    }

    private void start() {
        postDelayed(this, INTERVAL_TIME);
    }

    private void stop() {
        removeCallbacks(this);
    }

    public static int dip2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }
}

布局代码

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:rlv_start_color="#B4B4B4"
    app:rlv_end_color="#FFFFFF"
    app:rlv_ring_width="2dp"
    app:rlv_auto_start="true"/>