自定义View(二)

简单的自定义圆弧加载框。比较简单，勿喷。

res/下的文件：

<resources>
    <attr name="firstcolor" format="color" />
    <attr name="firststroke" format="dimension" />
    <attr name="secondcolor" format="color" />
    <attr name="secondstroke" format="dimension" />
    <attr name="threecolor" format="color" />
    <attr name="radious" format="dimension" />
    <declare-styleable name="DefineProgress">
        <attr name="firstcolor" />
        <attr name="firststroke" />
        <attr name="secondcolor" />
        <attr name="secondstroke" />
        <attr name="threecolor" />
        <attr name="radious"/>
    </declare-styleable>
</resources>

获取相应的属性：

  /**
     * 第一个圆的颜色
     */
    private int firstcolor;
    /**
     * 第二个圆的颜色
     */
    private int secondcolor;
    /**
     * 第三个圆的颜色
     */
    private int threecolor;
    /**
     * 第一个圆的宽度
     */
    private int firststroke;
    /**
     * 第二个圆的宽度
     */
    private int secondstroke;
    /**
     * 第三个圆的宽度
     */
    private int threestroke;
    /**
     * 画笔
     */
    private Paint mPaint;
    /**
     * 矩形
     */
    private RectF rect;
    /**
     * 设置加载的度数
     */
    private int progress;

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

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

    public DefineProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DefineProgress, defStyleAttr, 0);
        int n = array.getIndexCount();
        for (int i = 0; i < n; i++) {
            int arr = array.getIndex(i);
            switch (arr) {
                case R.styleable.DefineProgress_firstcolor:
                    firstcolor = array.getColor(arr, Color.BLUE);
                    break;
                case R.styleable.DefineProgress_secondcolor:
                    secondcolor = array.getColor(arr, Color.RED);
                    break;
                case R.styleable.DefineProgress_threecolor:
                    threecolor = array.getColor(arr, Color.WHITE);
                    break;
                case R.styleable.DefineProgress_firststroke:
                    firststroke = array.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.DefineProgress_secondstroke:
                    secondstroke = array.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.DefineProgress_radious:
                    threestroke = array.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics()));
                    break;
            }
        }
        array.recycle();
        init();
    }
     private void init() {
        mPaint = new Paint();
        rect = new RectF();
    }

然后重写onMeasure方法：

 int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width = 0;
        int height = 0;
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = 200;
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            height = 200;
        }
        setMeasuredDimension(width, height);

在onDraw()方法里面画圆：

 mPaint.setColor(firstcolor);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(firststroke);
        mPaint.setStyle(Paint.Style.STROKE);
        int center = getWidth() / 2;
        final int radious = center - secondstroke / 2;

        canvas.drawCircle(getMeasuredHeight() / 2, getMeasuredWidth() / 2, radious, mPaint);
        rect.left = center - radious;
        rect.top = center - radious;
        rect.bottom = center + radious;
        rect.right = center + radious;
        mPaint.setColor(secondcolor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(secondstroke);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawArc(rect, 270, progress, false, mPaint);

        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(threecolor);
        canvas.drawCircle(center, secondstroke / 2, threestroke, mPaint);

为了使圆弧可以随着设置的值画出，设置了一个方法：

public void setUpdateAngle(final int angle) {
        new Thread() {
            @Override
            public void run() {
                while (true) {
                    if (progress <= angle) {
                        progress++;
                        try {
                            sleep(50);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        postInvalidate();
                    }
                }
            }
        }.start();
    }

最后在MainActivity设置进度值：

setContentView(R.layout.activity_main);
        DefineProgress progress = (DefineProgress) findViewById(R.id.progress);
        progress.setUpdateAngle(90);

源码链接：源码