随记11——我的简单的自定义View之圆形进度条和长形进度条

女神镇楼

一共两个进度条，一个是水平的进度条，一个是圆形的进度条，效果如下：

先说圆形进度条，继承TextView，有几个自定义属性：

    <!--圆形进度条-->
    <declare-styleable name="circleProgressView">
        <attr name="strokeBgColor" format="color"/>
        <attr name="strokeColor" format="color"/>
        <attr name="strokeWidth" format="dimension"/>
        <attr name="progress" format="integer"/>
        <attr name="fromAngle" format="integer"/>
        <attr name="isCapRound" format="boolean"/>
    </declare-styleable>

strokeBgColor圆环的背景颜色（默认ff0000），strokeColor圆环颜色（默认f6f6f6），strokeWidth圆环宽度（默认10px），progress进度（默认0），fromAngle起始角度（默认0，定义从正上方为0度），isCapRound圆环进度起末是否为圆形（默认为true）。用法如下：

    <com.bjl.mypractice.view.CircleProgressView
        android:id="@+id/circleProgressView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:strokeBgColor="@color/colorPrimary"
        app:strokeColor="@color/color_ff0000"
        app:strokeWidth="5dp"
        app:progress="20"
        app:fromAngle="0"
        android:textColor="@color/color_ff0000"
        android:textSize="16sp"
        android:text="张三"
        android:gravity="center"/>

View代码如下：

/**
 * Created by Administrator on 2017/12/18.
 * 圆形进度条
 */

public class CircleProgressView extends android.support.v7.widget.AppCompatTextView {

    /**
     * 圆环默认宽度
     */
    private float defaultStrokeWidth = 10;
    /**
     * 进度值0~100
     */
    private int mProgress;
    /**
     * 起始角度0~360
     * -90为正上方
     * 0为3点位置
     */
    private int fromAngle = 0;//
//    private int textSize = 14;
//    private int textColor;//默认666666;
//    private String text = "张三";
    private boolean isCapRound = true;//进度是开头和结尾否是圆形的
    private Paint mPaint;
    private Paint mBgPaint;
    private Paint mTextPaint;
    RectF ovl;//圆环内环绘制的区域
    private boolean isProgressing = false;//是否正在绘制进度 防止线程多重绘制

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

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

    public CircleProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init(attrs);
    }

    private void init(AttributeSet attrs) {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.STROKE);


        mBgPaint = new Paint();
        mBgPaint.setAntiAlias(true);
        mBgPaint.setDither(true);
        mBgPaint.setStyle(Paint.Style.STROKE);

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setDither(true);
        mTextPaint.setStyle(Paint.Style.FILL);

        int strokeColor = Color.parseColor("#ff0000");
        int strokeBgColor = Color.parseColor("#f6f6f6");
        if (attrs != null){
            TypedArray array = getContext().obtainStyledAttributes(attrs, R.styleable.circleProgressView);
            strokeBgColor = array.getColor(R.styleable.circleProgressView_strokeBgColor, Color.parseColor("#f6f6f6"));
            strokeColor = array.getColor(R.styleable.circleProgressView_strokeColor, Color.parseColor("#ff0000"));
            defaultStrokeWidth = (int) array.getDimension(R.styleable.circleProgressView_strokeWidth, 10);
            mProgress = array.getInteger(R.styleable.circleProgressView_progress, 0);
            fromAngle = array.getInteger(R.styleable.circleProgressView_fromAngle, 0);
            isCapRound = array.getBoolean(R.styleable.circleProgressView_isCapRound, true);
            if (fromAngle < 0){
                fromAngle = 0;
            }else if (fromAngle > 360){
                fromAngle = -90 + fromAngle%360;
            }
            array.recycle();
        }
        if (isCapRound){
            mPaint.setStrokeCap(Paint.Cap.ROUND);
        }
        mPaint.setStrokeWidth(defaultStrokeWidth);
        mPaint.setColor(strokeColor);

        mBgPaint.setStrokeWidth(defaultStrokeWidth);
        mBgPaint.setColor(strokeBgColor);


    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);



        setMeasuredDimension(getDefaultSize(width, widthMeasureSpec), getDefaultSize(height, heightMeasureSpec));

        ovl = new RectF(0 + defaultStrokeWidth/2, 0  + defaultStrokeWidth/2, getMeasuredWidth() -  + defaultStrokeWidth/2, getMeasuredHeight() -  + defaultStrokeWidth/2);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        ovl = new RectF(0 + defaultStrokeWidth/2, 0  + defaultStrokeWidth/2, getMeasuredWidth() -  + defaultStrokeWidth/2, getMeasuredHeight() -  + defaultStrokeWidth/2);
        canvas.drawArc(ovl, fromAngle - 90, 360, false, mBgPaint);
        canvas.drawArc(ovl, fromAngle - 90, 360 * mProgress/100, false, mPaint);
//        canvas.drawText(text, getWidth()/2, getHeight()/2, mTextPaint);

    }


    public void setProgress(int progress){
        if (progress <= 0){
            progress = 0;
            mProgress  = 0;
            postInvalidate();
        }else if (progress > 100){
            progress = 100;
        }

        //解决多个线程同时修改界面的问题
        if (isProgressing)
            isProgressing = false;
        final int finalProgress = progress;
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                isProgressing = true;
                new Thread() {
                    @Override
                    public void run() {
                        super.run();
                        //防止上一个线程的影响
                        for (int i = 0; i < finalProgress; i++) {
                            mProgress = i;
                            postInvalidate();
                            try {
                                Thread.sleep(30);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                            if (!isProgressing) {
                                break;
                            }
                        }
                        isProgressing = false;
                    }
                }.start();
            }
        }, 50);

    }

}

下面是长形进度条，同圆形进度条差不多。

自定义属性如下：

    <!--长形进度条-->
    <declare-styleable name="horProgressView">
        
        <attr name="progressColor" format="color"/>
        <attr name="progressBgColor" format="color"/>
        <attr name="progress"/>
        <attr name="isCapRound"/>

    </declare-styleable>

progressColor进度颜色（默认ff0000），progressBgColor进度背景颜色（默认f6f6f6），progress进度（默认0），isCapRound圆角（默认true）

用法同CricleProgressView。代码如下：

/**
 * Created by Administrator on 2017/12/19.
 * 水平进度条
 */

public class HorProgressView extends View {

    private int strokeWidth;//进度条的高度
    private Paint mProgressPaint;
    private Paint mBgPaint;
    private int mProgress;//进度
    private int progressColor;//进度颜色 默认ff0000
    private int progressBgColor;//进度背景颜色 默认f6f6f6
    private boolean isCapRound = true;//进度是开头和结尾否是圆形的
    private boolean isProgressing = false;//是否正在绘制进度 防止线程多重绘制

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

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

    public HorProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet attrs){
        mProgressPaint = new Paint();
        mProgressPaint.setAntiAlias(true);
        mProgressPaint.setDither(false);
//        mProgressPaint.setStyle(Paint.Style.STROKE);
//        mProgressPaint.setStrokeCap(Paint.Cap.ROUND);

//        mBgPaint = new Paint();
//        mBgPaint.setAntiAlias(true);
//        mBgPaint.setDither(false);
        mBgPaint.setStyle(Paint.Style.STROKE);
//        mBgPaint.setStrokeCap(Paint.Cap.ROUND);


        mBgPaint = new Paint();
        mBgPaint.setAntiAlias(true);
        mBgPaint.setDither(false);
//        mBgPaint.setStyle(Paint.Style.FILL);
//        mBgPaint.setStrokeCap(Paint.Cap.ROUND);

        if (attrs != null){
            TypedArray array = getContext().obtainStyledAttributes(attrs, R.styleable.horProgressView);
            progressColor = array.getColor(R.styleable.horProgressView_progressColor, Color.parseColor("#ff0000"));
            progressBgColor = array.getColor(R.styleable.horProgressView_progressBgColor, Color.parseColor("#f6f6f6"));
            mProgress = array.getInteger(R.styleable.horProgressView_progress, 0);
            isCapRound = array.getBoolean(R.styleable.horProgressView_isCapRound, true);
            if (mProgress < 0){
                mProgress = 0;
            }else if (mProgress > 100){
                mProgress = 100;
            }
            array.recycle();
        }
        if (isCapRound){
            mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
            mBgPaint.setStrokeCap(Paint.Cap.ROUND);
        }
        mProgressPaint.setColor(progressColor);
        mBgPaint.setColor(progressBgColor);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
//        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//        if (heightMode == MeasureSpec.EXACTLY)
        setMeasuredDimension(getDefaultSize(width, widthMeasureSpec), getDefaultSize(height, heightMeasureSpec));

        strokeWidth = getMeasuredHeight();
        mProgressPaint.setStrokeWidth(getMeasuredHeight());
        mBgPaint.setStrokeWidth(getMeasuredHeight());
    }

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

        if (isCapRound){
            //有圆角
            canvas.drawLine(getHeight()/2, getHeight()/2, getWidth() - getHeight()/2, getHeight()/2, mBgPaint);
//        canvas.drawRect(0, 0, getWidth(), getHeight(),mBgPaint);
            canvas.drawLine(getHeight()/2, getHeight()/2, (getWidth() - getHeight()) * mProgress / 100 + getHeight()/2, getHeight()/2, mProgressPaint);
        }else {
            canvas.drawLine(0, getHeight()/2, getWidth(), getHeight()/2, mBgPaint);
            canvas.drawLine(0, getHeight()/2, getWidth() * mProgress / 100 , getHeight()/2, mProgressPaint);
        }


    }

    public void setProgress(int progress) {
        if (progress <= 0){
            progress = 0;
            mProgress  = 0;
            postInvalidate();
        }else if (progress > 100){
            progress = 100;
        }

        //解决多个线程同时修改界面的问题
        if (isProgressing)
            isProgressing = false;
        final int finalProgress = progress;
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                isProgressing = true;
                new Thread() {
                    @Override
                    public void run() {
                        super.run();
                        //防止上一个线程的影响
                        for (int i = 0; i < finalProgress; i++) {
                            mProgress = i;
                            postInvalidate();
                            try {
                                Thread.sleep(30);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                            if (!isProgressing) {
                                break;
                            }
                        }
                        isProgressing = false;
                    }
                }.start();
            }
        }, 50);
    }
}

下一篇是自定义SeekBar，还有一个我个人比较满意的ColorLoadingView。

本期代码下载地址：回来跟下面的SeekBar及ColorLoadingView一起发吧。

Demo下载链接