圆形进度

自定义控件如下:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

/**
 * 环形的进度条
 */
public class CircularProgressBar extends View {

    /**
     * 总进度
     */
    private int mDuration = 100;

    /**
     * 当前进度
     */
    private int mProgress = 30;

    /**
     * 画圆圈的画笔
     */
    private Paint mPaint = new Paint();

    /**
     * 画进度的画笔
     */
    private Paint mProgressPaint = new Paint();

    /**
     * 画文本的
     */
    private Paint mTextPaint = new Paint();
    private RectF mRectF = new RectF();


    private int mBackgroundColor = Color.LTGRAY;

    /**
     * 进度开始的颜色
     */
    private int mPrimaryStartColor = Color.parseColor("#006699ff");
    /**
     * 进度结束的颜色
     */
    private int mPrimaryEndColor = Color.parseColor("#ff6699ff");

    /**
     * 圆圈的宽度
     */
    private float mStrokeWidth = 20F;
    
    /**
     * 进度条改变监听
     * 
     * {@link #onChange( int duration, int progress, float rate)}
     */
    public interface OnProgressChangeListener {
        /**
         * 进度改变事件,当进度条进度改变,就会调用该方法
         * @param duration 总进度
         * @param progress 当前进度
         * @param rate 当前进度与总进度的商 即:rate = (float)progress / duration
         */
        public void onChange(int duration, int progress, float rate);
    }
    
    private OnProgressChangeListener mOnChangeListener;
    
    /**
     * 设置进度条改变监听
     * @param l
     */
    public void setOnProgressChangeListener(OnProgressChangeListener l) {
        mOnChangeListener = l;
    }
    
    public CircularProgressBar(Context context) {
        this(context,null);
    }
    
    public CircularProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 设置圆圈画笔
        mPaint.setColor(mBackgroundColor);
        mPaint.setDither(true);
        mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(mStrokeWidth);
        mPaint.setStyle(Paint.Style.STROKE);    //设置图形为空心

        // 设置进度的画笔
        //mProgressPaint.setColor(mPrimaryStartColor);
        mProgressPaint.setDither(true);
        mProgressPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
        mProgressPaint.setAntiAlias(true);
        mProgressPaint.setStrokeWidth(mStrokeWidth);
        mProgressPaint.setStyle(Paint.Style.STROKE);    //设置图形为空心

        //设置文本画笔
        mTextPaint.setColor(Color.parseColor("#000000"));
        mTextPaint.setStrokeWidth(mStrokeWidth);
        mTextPaint.setTextSize(80);
    }
    
    /**
     * 设置进度条的最大值, 该值要 大于 0
     * @param max
     */
    public void setMax( int max ) {
        if( max < 0 ) {
            max = 0;
        }
        mDuration = max;
    }
    
    /**
     * 得到进度条的最大值
     * @return
     */
    public int getMax() {
        return mDuration;
    }
    
    /**
     * 设置进度条的当前的值
     * @param progress 
     */
    public void setProgress( int progress ) {
        if( progress > mDuration ) {
            progress = mDuration;
        }
        mProgress = progress;
        if( mOnChangeListener != null ) {
            mOnChangeListener.onChange(mDuration, progress, getRateOfProgress());
        }
        invalidate();
    }
    
    /**
     * 得到进度条当前的值
     * @return
     */
    public int getProgress() {
        return mProgress;
    }
    
    /**
     * 设置进度条背景的颜色
     */
    public void setBackgroundColor( int color ) {
        mBackgroundColor = color;
    }
    
    /**
     * 设置进度条进度的颜色
     */
    public void setPrimaryColor( int startColor,int endColor ) {
        mPrimaryStartColor = startColor;
        mPrimaryEndColor = endColor;
    }
    
    /**
     * 设置环形的宽度
     * @param width
     */
    public void setCircleWidth(float width) {
        mStrokeWidth = width;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        int halfWidth = getWidth() / 2;
        int halfHeight = getHeight() /2;
        int radius = halfWidth < halfHeight ? halfWidth : halfHeight;
        float halfStrokeWidth = mStrokeWidth / 2;
        
        // 画背景
        canvas.drawCircle(halfWidth, halfHeight, radius - halfStrokeWidth, mPaint);

        //画文本
        Rect rect = new Rect();
        String text = mProgress+"";
        mTextPaint.getTextBounds(text,0,text.length(),rect);
        canvas.drawText(mProgress+"",radius-rect.width()/2,radius+rect.height()/2, mTextPaint);
        
        // 画当前进度的圆环
        mProgressPaint.setStrokeCap(Paint.Cap.ROUND); // 定义圆弧为圆头
        mRectF.top = halfHeight - radius + halfStrokeWidth;
        mRectF.bottom = halfHeight + radius - halfStrokeWidth;
        mRectF.left = halfWidth - radius + halfStrokeWidth;
        mRectF.right = halfWidth + radius - halfStrokeWidth;

        //线性渐变
        LinearGradient mShader = new LinearGradient(
                mRectF.left,
                mRectF.top,
                mRectF.right,
                mRectF.bottom,
                mPrimaryStartColor,
                mPrimaryEndColor,//渐变开始于结束的颜色
                Shader.TileMode.MIRROR
        );
        mProgressPaint.setShader(mShader);
        canvas.drawArc(mRectF, -90, getRateOfProgress() * 360, false, mProgressPaint);
        canvas.save();
    }
    
    /**
     * 得到当前的进度的比率
     * <p> 用进度条当前的值 与 进度条的最大值求商 </p>
     * @return
     */
    private float getRateOfProgress() {
        return (float)mProgress / mDuration;
    }


    /**
     * 设置中间进度百分比文字的尺寸
     * @param size
     */
    public void setTextSize(float size) {
        mTextPaint.setTextSize(size);
    }

    /**
     * 设置中间进度文字的颜色
     * @param color
     */
    public void setTextColor( int color) {
        mTextPaint.setColor(color);
    }
    
}

使用如下:

progress = (CircularProgressBar) findViewById(R.id.progress);
        //progress.setBackgroundColor();设置圆环的背景色
        //progress.setCircleWidth();设置圆环的宽度
        //progress.setPrimaryColor(getResources().getColor(R.color.Blue),getResources().getColor(R.color.Yellow));//设置进度条的开始于结束颜色,渐变效果

效果图:

 

posted @ 2017-04-14 16:41  ts-android  阅读(190)  评论(0编辑  收藏  举报