Android进阶学习-使用Canvas自定义ProgressView(3)

圆环交替显示,效果图

    

    1.attrs属性文件

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="mCircleWidth" format="dimension" />
    <attr name="mCircleFirstColor" format="color" />
    <attr name="mCircleSecondColor" format="color" />
    <attr name="mCircleSpeed" format="integer" />
    <declare-styleable name="CircleProgressView">
        <attr name="mCircleWidth" />
        <attr name="mCircleFirstColor" />
        <attr name="mCircleSecondColor" />
        <attr name="mCircleSpeed" />
    </declare-styleable>
</resources>

 

    2.View代码+三个构造器+onDraw()方法,因为只有一个圆,所以圆的占据整个View测量出来的空间的,不想之前的有多中不同的元素,所以onMeasure()方法不用重写

    View代码

public class CircleProgressView extends View {
    private intmCircleWidth;
    private intmCircleFirstColor;
    private intmCircleSecondColor;
    private intmSpeed;
    /**
     * 接收前面设置的属性
     */
    private PaintmPaint;
    private booleanisSecond= false;
    /**
     * 当前是否为第二圈
     */
    private intmProgress= 0;
    /**
     * 进度
     */
}

 

    2个构造器

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

 

‍    主角构造器‍

public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyleAttr,
    0);
    int n = ta.getIndexCount();
    for (int i = 0; i < n; i++) {
        int attr = ta.getIndex(i);
        switch (attr) {
            case R.styleable.CircleProgressView_mCircleWidth:
                mCircleWidth = ta.getDimensionPixelSize(attr, (int) TypedValue
            .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()));
                break;
            case R.styleable.CircleProgressView_mCircleFirstColor:
                mCircleFirstColor = ta.getColor(attr, 0);
                break;
            case R.styleable.CircleProgressView_mCircleSecondColor:
                mCircleSecondColor = ta.getColor(attr, 0);
                break;
            case R.styleable.CircleProgressView_mCircleSpeed:
                mSpeed = ta.getInteger(attr, 20);
                break;
        }
    }    
    ta.recycle();
    mPaint = new Paint();
    new Thread() {
        @Override
        public void run() {
            while (true) {
                mProgress++;
                if (mProgress == 360) {
                mProgress = 0;
                isSecond = !isSecond;
                /**
                 * 控制颜色的切换
                 */
                }
                try {
                    Thread.sleep(mSpeed);//速度的设置
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                postInvalidate();//通过postInvalidate来调用onDraw方法重新绘画
            }
        }
    }.start();
    }

 

3.onDraw()方法:结合图片看

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int center = getWidth() / 2;//圆心位置,因为圆的半径一致,所以圆心只需确定一次
        int radius = center - mCircleWidth;//确定圆的半径
        mPaint.setStrokeWidth(mCircleWidth);//设置画笔粗细
        mPaint.setStyle(Paint.Style.STROKE);//设置空心画笔,不使用填充
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        /**
         * 设置圆的边界
         */
        
        if (isSecond) {
            mPaint.setColor(mCircleSecondColor);
            canvas.drawCircle(center, center, radius, mPaint);//画圆
            mPaint.setColor(mCircleFirstColor);
            canvas.drawArc(oval, 0, mProgress, false, mPaint);
            /**
             * 0是开始画的度数,参考直角坐标系
             * 0是x的正半轴
             * 90是y的负半轴
             * 180是x的负半轴
             * 270是y的正半轴
             * 可用负数表示
             */
        } else {
            mPaint.setColor(mCircleFirstColor);
            canvas.drawCircle(center, center, radius, mPaint);
            mPaint.setColor(mCircleSecondColor);
            canvas.drawArc(oval, 0, mProgress, false, mPaint);
        }
    }

 

整体代码

package com.example.androidtest;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
/**
 * Created by August on 16/4/9.
 */
public class CircleProgressView extends View {
private intmCircleWidth;
private intmCircleFirstColor;
private intmCircleSecondColor;
private intmSpeed;
/**
 * 接收前面设置的属性
 */
private PaintmPaint;
private booleanisSecond= false;
/**
 * 当前是否为第二圈
 */
private intmProgress= 0;
/**
 * 进度
 */
    public CircleProgressView(Context context) {
        this(context, null);
    }
    public CircleProgressView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyleAttr,
        0);
        int n = ta.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = ta.getIndex(i);
            switch (attr) {
                case R.styleable.CircleProgressView_mCircleWidth:
                    mCircleWidth = ta.getDimensionPixelSize(attr, (int) TypedValue
                .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CircleProgressView_mCircleFirstColor:
                    mCircleFirstColor = ta.getColor(attr, 0);
                    break;
                case R.styleable.CircleProgressView_mCircleSecondColor:
                    mCircleSecondColor = ta.getColor(attr, 0);
                    break;
                case R.styleable.CircleProgressView_mCircleSpeed:
                    mSpeed = ta.getInteger(attr, 20);
                    break;
            }
        }
        ta.recycle();
        mPaint = new Paint();
        new Thread() {
            @Override
            public void run() {
                while (true) {
                mProgress++;
                if (mProgress == 360) {
                    mProgress = 0;
                    isSecond = !isSecond;
                    /**
                     * 控制颜色的切换
                     */
                    }
                    try {
                        Thread.sleep(mSpeed);//速度的设置
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    postInvalidate();//通过postInvalidate来调用onDraw方法重新绘画
                }
            }
        }.start();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int center = getWidth() / 2;//圆心位置,因为圆的半径一致,所以圆心只需确定一次
        int radius = center - mCircleWidth;//确定圆的半径
        mPaint.setStrokeWidth(mCircleWidth);//设置画笔粗细
        mPaint.setStyle(Paint.Style.STROKE);//设置空心画笔,不使用填充
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        /**
         * 设置圆的边界
         */
        
        
        if (isSecond) {
            mPaint.setColor(mCircleSecondColor);
            canvas.drawCircle(center, center, radius, mPaint);//画圆
            mPaint.setColor(mCircleFirstColor);
            canvas.drawArc(oval, 0, mProgress, false, mPaint);
            /**
             * 0是开始画的度数,参考直角坐标系
             * 0是x的正半轴
             * 90是y的负半轴
             * 180是x的负半轴
             * 270是y的正半轴
             * 可用负数表示
             */
        } else {
            mPaint.setColor(mCircleFirstColor);
            canvas.drawCircle(center, center, radius, mPaint);
            mPaint.setColor(mCircleSecondColor);
            canvas.drawArc(oval, 0, mProgress, false, mPaint);
        }
    }
}

 

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.example.androidtest"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <com.example.androidtest.CircleProgressView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:mCircleFirstColor="#FF0000"
        app:mCircleSecondColor="#00FF00"
        app:mCircleSpeed="1"
        app:mCircleWidth="30dp" />
</LinearLayout>

 

转载于:https://my.oschina.net/august1996/blog/655682