困了,写一个自定义环形进度条

来源:互联网 发布:淘宝店铺装修大学教程 编辑:程序博客网 时间:2024/06/02 10:00

自定义效果图如上图所示

一、定义自定义属性:

attrs文件下:

<declare-styleable name="ProgressView">        <!--背景色 -->        <attr name="background_color" format="color"/>        <!--进度条的颜色-->        <attr name="progress_color" format="color"/>        <!--进度条的宽度 -->        <attr name="progress_width" format="float"/>        <!--百分比文字的颜色 -->        <attr name="text_color" format="color"/>        <!--百分比文字的大小-->        <attr name="text_size" format="dimension"/>    </declare-styleable>
二、初始化自定义属性:

 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ProgressView);        mBackColor = a.getColor(R.styleable.ProgressView_background_color, Color.RED);        mProgressColor = a.getColor(R.styleable.ProgressView_progress_color, Color.BLUE);        mTextColor = a.getColor(R.styleable.ProgressView_text_color, Color.WHITE);        mProgressWidth = a.getFloat(R.styleable.ProgressView_progress_width,30);        textSize = a.getDimension(R.styleable.ProgressView_text_size,18);        a.recycle();
三、onMeasure测量宽高:

 int width = MeasureSpec.getSize(widthMeasureSpec);        int height = MeasureSpec.getSize(heightMeasureSpec);        int size= Math.min(width,height);        //设置宽高,取两者最小值        setMeasuredDimension(size,size);
四、onDraw绘制圆环、进度条、文字

 canvas.drawCircle(mOuterWidth, mOuterWidth, mRadius, mBackPaint);        /**         * 绘制圆弧         * public void drawArc(@NonNull RectF oval, float startAngle,         *      float sweepAngle, boolean useCenter, @NonNull Paint paint){}         */        RectF rectF = new RectF(mProgressWidth / 2, mProgressWidth / 2, getWidth() - mProgressWidth / 2, getWidth() - mProgressWidth / 2);        float percent = (float) mValue / mMax; //百分比        float angle = percent * 360; //角度        canvas.drawArc(rectF, -90, angle, false, mProgressPaint);        float textHalfWidth = mTextPaint.measureText(mValue + "%") * 0.5f;        canvas.drawText(mValue + "%", mOuterWidth - textHalfWidth, mOuterWidth + textSize / 2, mTextPaint);        if (mValue>0){            //以(mOuterWidth,mOuterWidth)为圆心旋转画布            canvas.rotate(angle, mOuterWidth, mOuterWidth);            //画个圆            canvas.drawCircle(mOuterWidth, mProgressWidth / 2, mProgressWidth / 2, mPaint);//          画个半圆//          RectF rectF1 = new RectF(mOuterWidth-mProgressWidth/2,0,mOuterWidth+mProgressWidth/2,mProgressWidth);//          canvas.drawArc(rectF1,-90,180,true,mPaint);        }

五、完整代码:

public class ProgressView extends View{    private Paint mBackPaint; //背景画笔    private Paint mProgressPaint;//进度条画笔    private Paint mPaint;//进度条上的半圆画笔    private Paint mTextPaint; //文字    private int mBackColor; //背景色    private int mProgressColor;//进度条颜色    private int mTextColor; //文字颜色    private float textSize; //文字大小    private float mProgressWidth; //进度条宽度    private int mOuterWidth; //圆心坐标    private int mRadius; //半径    private static final int mMax = 100; //总进度    private int mValue; //进度值(小于100)    private String TAG = "progress";    public ProgressView(Context context) {        super(context);        initView();    }    public ProgressView(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ProgressView);        mBackColor = a.getColor(R.styleable.ProgressView_background_color, Color.RED);        mProgressColor = a.getColor(R.styleable.ProgressView_progress_color, Color.BLUE);        mTextColor = a.getColor(R.styleable.ProgressView_text_color, Color.WHITE);        mProgressWidth = a.getFloat(R.styleable.ProgressView_progress_width,30);        textSize = a.getDimension(R.styleable.ProgressView_text_size,18);        a.recycle();        initView();    }    public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initView();    }    //初始化画笔    public void initView(){        mBackPaint = new Paint();        mBackPaint.setColor(mBackColor);        mBackPaint.setStyle(Paint.Style.STROKE);        mBackPaint.setStrokeWidth(mProgressWidth); //画笔半径        mBackPaint.setAntiAlias(true);        mProgressPaint = new Paint();        mProgressPaint.setColor(mProgressColor);        mProgressPaint.setStyle(Paint.Style.STROKE);        mProgressPaint.setStrokeWidth(mProgressWidth);        mProgressPaint.setAntiAlias(true);        mPaint = new Paint();        mPaint.setColor(mProgressColor);        mPaint.setStyle(Paint.Style.FILL);        mPaint.setStrokeWidth(1f);        mPaint.setAntiAlias(true);        mTextPaint = new Paint();        mTextPaint.setColor(mTextColor);        mTextPaint.setTextSize(textSize);        mTextPaint.setStyle(Paint.Style.FILL);        mTextPaint.setStrokeWidth(5f);        mTextPaint.setAntiAlias(true);        mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int width = MeasureSpec.getSize(widthMeasureSpec);        int height = MeasureSpec.getSize(heightMeasureSpec);        int size= Math.min(width,height);        //设置宽高,取两者最小值        setMeasuredDimension(size,size);        //背景圆环(需要原点的坐标和半径)        mOuterWidth = getWidth() / 2;        //圆的半径=宽度的一半-画笔宽度的一半        mRadius = (int) (mOuterWidth - mProgressWidth / 2);    }    //设置进度    public void setValue(int value){        mValue = value;        LogUtil.e(TAG,mValue+"---");        if (mValue<=mMax){            //刷新进度条            postInvalidate();        }else {            if (listener!=null){                listener.finish();            }        }    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //以(mOuterWidth,mOuterWidth)为圆心,mRadius为半径画个圆        canvas.drawCircle(mOuterWidth, mOuterWidth, mRadius, mBackPaint);        //以左上的坐标和右下的坐标画个矩形        RectF rectF = new RectF(mProgressWidth / 2, mProgressWidth / 2, getWidth() - mProgressWidth / 2, getWidth() - mProgressWidth / 2);        //百分比        float percent = (float) mValue / mMax;        //角度        float angle = percent * 360;         /**         * 绘制圆弧         * public void drawArc(@NonNull RectF oval, float startAngle,         *      float sweepAngle, boolean useCenter, @NonNull Paint paint){}         */        canvas.drawArc(rectF, -90, angle, false, mProgressPaint);        //文字的宽度一半        float textHalfWidth = mTextPaint.measureText(mValue + "%") * 0.5f;        //写文字        canvas.drawText(mValue + "%", mOuterWidth - textHalfWidth, mOuterWidth + textSize / 2, mTextPaint);        if (mValue>0){            //以(mOuterWidth,mOuterWidth)为圆心旋转画布            canvas.rotate(angle, mOuterWidth, mOuterWidth);            //画个圆            canvas.drawCircle(mOuterWidth, mProgressWidth / 2, mProgressWidth / 2, mPaint);//          画个半圆//          RectF rectF1 = new RectF(mOuterWidth-mProgressWidth/2,0,mOuterWidth+mProgressWidth/2,mProgressWidth);//          canvas.drawArc(rectF1,-90,180,true,mPaint);        }        //进行回调        if (listener!=null){            if (mValue<mMax){                listener.getValue(mValue);            }else if (mValue==mMax){                listener.finish();            }        }    }    /**     * 回调接口     */    public interface ProgressListener{        //完成回调        void finish();        //进度过程中传值        void getValue(int value);    }    ProgressListener listener;    public void setListener(ProgressListener listener){        this.listener = listener;    }}

六、测试:

 Handler handler = new Handler(){        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            progressView.setValue(msg.what);        }    };    @Override    public void initView() {        super.initView();        progressView.setListener(new ProgressView.ProgressListener() {            @Override            public void finish() {                ToastUtil.showShort(ImageActivity.this,"完成了");            }            @Override            public void getValue(int value) {            }        });            new Thread(new Runnable(){                public void run(){                    for (int i1 = 1; i1 <= 100; i1++) {                        SystemClock.sleep(200);                        handler.sendEmptyMessage(i1);                    }                }            }).start();    }















0 0
原创粉丝点击