自定义圆环进度条

自定义View, 慢慢研究

public class AnswerChartView extends View{

    // 圆画笔
    private Paint mCirclePaint;
    // 圆环画笔
    private Paint mRingPaint;
    private Paint mRingPaint1;
    private Paint mRingPaint2;
    // 百分数画笔
    private Paint mTextPaint;
    // 文本画笔
    private Paint mTextPaint2;
    // 里面圆颜色
    private int mCircleColor;
    // 里面弧颜色
    private int mInnerRingColor;
    //进度条颜色1
    private int mProgressColor;
    //进度条颜色2
    private int mProgressColor1;
    // 外面弧颜色
    private int mOutRingColor;
    // 空白的圆半径
    private float mRadius;
    // 里面的弧半径
    private float mRingRadius;
    // 最外弧半径
    private float mRingRadius2;
    //进度条半径
    private float mRingRadius3;
    // 圆环的宽度
    private float mStrokeWidth;

    // 文本的中心x轴位置
    private int mXCenter;
    // 文本的中心y轴位置
    private int mYCenter;
    // 百分比文本的宽度
    private float mTxtWidth;
    // 描述文本的宽度
    private float mTxtWidth2;
    // 文本的高度
    private float mTxtHeight;
    // 文本的大小
    private float mTxtSize;
    // 总数
    private int mMax;
    // 进度条
    private double mInnerProgress;
    //字
    private String text;

    public AnswerChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(context, attrs);
        initVariable();
    }

    //初始化属性
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.AnswerChartView, 0, 0);
        mRadius = typeArray.getDimension(R.styleable.AnswerChartView_yuanradius, 80);
        mTxtSize=typeArray.getDimension(R.styleable.AnswerChartView_textSize, 20);
        text = typeArray.getString(R.styleable.AnswerChartView_text);
        mStrokeWidth = typeArray.getDimension(R.styleable.AnswerChartView_strokeWidth, 10);
        mCircleColor = typeArray.getColor(R.styleable.AnswerChartView_circleColor, 0xFFFFFFFF);
        mOutRingColor = typeArray.getColor(R.styleable.AnswerChartView_innerringColor, 0xFFFFFFFF);
        mInnerRingColor = typeArray.getColor(R.styleable.AnswerChartView_outringColor, 0xFFFFFFFF);
        mProgressColor = typeArray.getColor(R.styleable.AnswerChartView_progressColor, 0xFFFFFFFF);
        mProgressColor1 = typeArray.getColor(R.styleable.AnswerChartView_progressColor1, 0xFFFFFFFF);
        //内环半径
        mRingRadius = mRadius + mStrokeWidth / 2;
        //外环半径
        mRingRadius2 = mRadius + mStrokeWidth/2*3;
        //进度条半径
        mRingRadius3 = mRadius + mStrokeWidth;
    }

    //初始化 画笔
    private void initVariable() {
        //渐变色
        LinearGradient linearGradient = new LinearGradient(0, 0, getMeasuredWidth(), 0,new int[]{mProgressColor,mProgressColor1}, null, LinearGradient.TileMode.CLAMP);

        mCirclePaint = new Paint();
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setStyle(Paint.Style.FILL);
        mCirclePaint.setColor(mProgressColor);
        mCirclePaint.setStrokeWidth(mStrokeWidth);

        mRingPaint = new Paint();
        mRingPaint.setAntiAlias(true);
        mRingPaint.setColor(mOutRingColor);
        mRingPaint.setStyle(Paint.Style.STROKE);
        mRingPaint.setStrokeWidth(5);

        mRingPaint1 = new Paint();
        mRingPaint1.setAntiAlias(true);
        mRingPaint1.setColor(mInnerRingColor);
        mRingPaint1.setStyle(Paint.Style.STROKE);
        mRingPaint1.setStrokeWidth(5);
        mRingPaint1.setShader(linearGradient);

        mRingPaint2 = new Paint();
        mRingPaint2.setAntiAlias(true);
        mRingPaint2.setColor(mInnerRingColor);
        mRingPaint2.setStyle(Paint.Style.STROKE);
        mRingPaint2.setStrokeWidth(mStrokeWidth);
        mRingPaint2.setShader(linearGradient);
        mRingPaint2.setStrokeCap(Paint.Cap.ROUND);

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setStyle(Paint.Style.FILL);
        mTextPaint.setColor(mProgressColor);
        mTextPaint.setTextSize(mTxtSize);
        mTextPaint.setShader(linearGradient);


        mTextPaint2 = new Paint();
        mTextPaint2.setAntiAlias(true);
        mTextPaint2.setStyle(Paint.Style.FILL);
        mTextPaint2.setColor(mProgressColor);
        mTextPaint2.setTextSize(20);
        mTextPaint2.setShader(linearGradient);
        Paint.FontMetrics fm = mTextPaint.getFontMetrics();
        mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);


    }


    @Override
    protected void onDraw(Canvas canvas) {


        mXCenter = getWidth() / 2;
        mYCenter = getHeight() / 2;


        mCirclePaint.setColor(mCircleColor);
        canvas.drawCircle(mXCenter,mYCenter, mRadius + mStrokeWidth*2, mCirclePaint);

        //内环
        RectF oval1 = new RectF();
        oval1.left = (mXCenter - mRingRadius);
        oval1.top = (mYCenter - mRingRadius);
        oval1.right = mRingRadius * 2 + (mXCenter - mRingRadius);
        oval1.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
        mRingPaint.setColor(mOutRingColor);
        canvas.drawArc(oval1, -90, 360, false, mRingPaint);
        //外环
        RectF oval2 = new RectF();
        oval2.left = (mXCenter - mRingRadius2);
        oval2.top = (mYCenter - mRingRadius2);
        oval2.right = mRingRadius2 * 2 + (mXCenter - mRingRadius2);
        oval2.bottom = mRingRadius2 * 2 + (mYCenter - mRingRadius2);
        canvas.drawArc(oval2, -90, 360, false, mRingPaint1);

        //进度
        RectF oval3 = new RectF();
        oval3.left = (mXCenter - mRingRadius3);
        oval3.top = (mYCenter - mRingRadius3);
        oval3.right = mRingRadius3 * 2 + (mXCenter - mRingRadius3);
        oval3.bottom = mRingRadius3 * 2 + (mYCenter - mRingRadius3);
        canvas.drawArc(oval3, -90, (float) mInnerProgress/mMax*360, false, mRingPaint2);

        //白色圆
        canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);
        //画字
        String txt = (int)mInnerProgress + "";
        mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());
        mTxtWidth2 = mTextPaint2.measureText(text, 0, text.length());
        canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter+mTxtWidth / 8, mTextPaint);
        canvas.drawText(text ,mXCenter - mTxtWidth2 / 2, mYCenter + mTxtWidth / 2, mTextPaint2);
 
    }

   /*
   设置进度条
   */
    public void setInnerProgress(double progress) {
        mInnerProgress = progress;
        //      invalidate();
        postInvalidate();
    }
//设置最大值
    public void setMa(int max){
        mMax=max;
    }
}

 

 

 

<!--  attrs 里 自定义圆环-->
<declare-styleable name="AnswerChartView">
    <attr name="progressColor" format="color"/>
    <attr name="progressColor1" format="color"/>
    <attr name="strokeWidth" format="dimension"/>
    <attr name="circleColor" format="color"/>
    <attr name="innerringColor" format="color"/>
    <attr name="outringColor" format="color"/>
    <attr name="textSize" format="dimension"/>
    <attr name="strokewidth" format="dimension"/>
    <attr name="yuanradius" format="dimension"/>
    <attr name="text" format="string"/>
</declare-styleable>

 

然后就在xml 布局里调用