自定义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 布局里调用