自定义view-制作一个加载中的圆形

最近因为项目的需求做的一个加载中圆，刚好记录一下

/**
 * 自定义加载中的圆，主要代码
 */
public class LoadingSearchView extends View {

    private Paint mCirclePaint;
    private Paint mInnerPaint;
    private float mCircleRadius;
    private final static float RADIUS = 180f;
    private final static float INITIAL_ANGLE = 90f;

    /**
     * 旋转角度
     */
    private float mRotationAngle = 0;
    /**
     * 实心半圆最初的位置
     */
    private float mCircleStartAngle;
    /**
     * 实心半圆应该绘制多大的
     */
    private float mCircleSweepAngle;
    /**
     * 文字的画笔
     */
    private Paint mTextPaint;
    /**
     * 外圈圆的宽
     */
    private float mLoadingRoundWidth;
    /**
     * 外圈圆与内圆的间距
     */
    private float mSpacingOfCircles;
    /**
     * 内圆的颜色
     */
    private int mInnerCircleColor;
    /**
     * 设置几个默认的值
     */
    private float mInitialDefaultSize, mLoadingRoundDefaultWidth, mSpacingOfDefaultCircles;

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

    public LoadingSearchView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LoadingSearchView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initDefaultValue();
        initAttributeSet(attrs);
        setCirclePaint();
        initTextPaint();
    }

    /**
     * 初始化一些默认值
     */
    private void initDefaultValue() {
        mCircleStartAngle = INITIAL_ANGLE;
        mLoadingRoundDefaultWidth = dp2px(getContext(), 8);
        mInitialDefaultSize = sp2px(getContext(), 50);
        mSpacingOfDefaultCircles = dp2px(getContext(), 5);
    }

    /**
     * 初始化画笔的颜色
     */
    private void initTextPaint() {
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(sp2px(getContext(), 16));
        mTextPaint.setColor(Color.WHITE);
    }

    /**
     * 初始化圆的画笔
     */
    private void setCirclePaint() {
        mCirclePaint = initCircle();
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setStrokeWidth(mLoadingRoundWidth);

        mInnerPaint = initCircle();
        mInnerPaint.setStyle(Paint.Style.FILL);
        mInnerPaint.setColor(mInnerCircleColor);
    }

    private Paint initCircle() {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStrokeJoin(Paint.Join.ROUND);
        return paint;
    }

    private void initAttributeSet(AttributeSet attrs) {
        TypedArray array = getContext().obtainStyledAttributes(attrs, R.styleable.LoadingSearchView);
        mLoadingRoundWidth = array.getDimension(R.styleable.LoadingSearchView_loading_round_width, mLoadingRoundDefaultWidth);
        mSpacingOfCircles = array.getDimension(R.styleable.LoadingSearchView_spacing_of_circles, mSpacingOfDefaultCircles);
        float defaultCircle = mLoadingRoundDefaultWidth + mSpacingOfDefaultCircles + mInitialDefaultSize;
        mCircleRadius = array.getDimension(R.styleable.LoadingSearchView_loading_circle_radius, defaultCircle);
        mInnerCircleColor = array.getColor(R.styleable.LoadingSearchView_inner_circle_color, Color.parseColor("#00d8c9"));
        array.recycle();
    }

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

        int measuredWidth = getMeasuredWidth();
        float digitalDifference = (measuredWidth - mCircleRadius * 2) / 2;

        if (digitalDifference < 0) {
            setMeasuredDimension((int) (mCircleRadius * 2), (int) (mCircleRadius * 2));
        }

        drawOuterCircle(digitalDifference, canvas);

        drawInnerCircle(digitalDifference, canvas);

        drawSuccessAnimator(digitalDifference, canvas);

    }

    private void drawSuccessAnimator(float digitalDifference, Canvas canvas) {
        if (mCircleSweepAngle >= 360) {
            String success = "成功";
            Rect bounds = new Rect();
            mTextPaint.getTextBounds(success, 0, success.length(), bounds);
            float startX = mCircleRadius - bounds.right / 2;
            Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
            int dy = (fontMetricsInt.top - fontMetricsInt.bottom) / 2 - fontMetricsInt.top;
            float baseLine = mCircleRadius + dy;
            canvas.drawText(success, startX + digitalDifference, baseLine + digitalDifference, mTextPaint);
        }
    }

    private void drawInnerCircle(float digitalDifference, Canvas canvas) {
        RectF circleRectF = new RectF(mLoadingRoundWidth + mSpacingOfCircles + digitalDifference, mLoadingRoundWidth + mSpacingOfCircles + digitalDifference,
                (mCircleRadius * 2 - (mLoadingRoundWidth + mSpacingOfCircles)) + digitalDifference, (mCircleRadius * 2 - (mLoadingRoundWidth + mSpacingOfCircles)) + digitalDifference);
        canvas.drawArc(circleRectF, mCircleStartAngle, mCircleSweepAngle, false, mInnerPaint);
    }

    /**
     * 画外圆
     *
     * @param digitalDifference
     * @param canvas
     */
    private void drawOuterCircle(float digitalDifference, Canvas canvas) {
        RectF rectF = new RectF(mLoadingRoundWidth / 2 + digitalDifference, mLoadingRoundWidth / 2 + digitalDifference,
                (mCircleRadius * 2 - mLoadingRoundWidth / 2) + digitalDifference, (mCircleRadius * 2 - mLoadingRoundWidth / 2) + digitalDifference);
        mCirclePaint.setColor(Color.parseColor("#00d8c9"));
        canvas.drawArc(rectF, mRotationAngle, RADIUS, false, mCirclePaint);
        mCirclePaint.setColor(Color.parseColor("#64e27f"));
        float rotationAngle = mRotationAngle + RADIUS;
        canvas.drawArc(rectF, rotationAngle, RADIUS, false, mCirclePaint);
    }

    public void setRotationAngle(float rotationAngle) {
        mRotationAngle = mRotationAngle + 3;
        float angle = RADIUS * rotationAngle;
        mCircleStartAngle = INITIAL_ANGLE - angle;
        mCircleSweepAngle = angle * 2;
        invalidate();
    }

    /**
     * dp转px
     */
    public float dp2px(Context context, float dpVal) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, context.getApplicationContext().getResources().getDisplayMetrics());
    }

    /**
     * sp转px
     */
    public int sp2px(Context context, float spVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                spVal, context.getApplicationContext().getResources().getDisplayMetrics());
    }
}

自定义的属性如下，在values文件中创建文件attrs.xml：

<declare-styleable name="LoadingSearchView">
        <attr name="loading_circle_radius" format="dimension"/>
        <attr name="loading_round_width" format="dimension"/>
        <attr name="spacing_of_circles" format="dimension"/>
        <attr name="inner_circle_color" format="color"/>
    </declare-styleable>

activity页面的布局也是只有一个加载的view，如下：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <com.lift.ajun.testapplication.LoadingSearchView
        android:id="@+id/test_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:loading_round_width="10dp"/>

</LinearLayout>

MainActivity里面的代码如下：

public class MainActivity extends AppCompatActivity {

    private LoadingSearchView mTestView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTestView = findViewById(R.id.test_view);
        mTestView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
            	// 创建一个属性动画，来启动圆的动画
                ObjectAnimator animator = ObjectAnimator.ofFloat(mTestView, "rotationAngle", 1f);
                animator.setInterpolator(new DecelerateInterpolator());
                animator.setDuration(4000);
                animator.start();
            }
        });
    }
}