android 圓形進度View
阿新 • • 發佈:2018-12-03
這個圓形進度View是根據https://blog.csdn.net/qq_32519693/article/details/76726525
進行簡單的修改成自己想要的效果的
效果圖
1.arrts.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <!--圓弧進度條--> <declare-styleable name="CircleProgressValue"> <attr name="strokeWidth" format="dimension"/> <attr name="circleColor" format="color"/> <attr name="ringColor" format="color"/> <attr name="ringBgColor" format="color"/> <attr name="circleText" format="string"/> <attr name="textSize" format="dimension"/> <attr name="totalProgress" format="integer"/> </declare-styleable> </resources>
2.CircleProgressView.java
public class CircleProgressView extends View { // 畫實心圓的畫筆 private Paint mCirclePaint; // 畫圓環的畫筆 private Paint mRingPaint; // 畫圓環的畫筆背景色 private Paint mRingPaintBg; // 畫字型的畫筆 private TextPaint mTextPaint; // 圓形顏色 private int mCircleColor; // 圓環顏色 private int mRingColor; // 圓環背景顏色 private int mRingBgColor; // 半徑 private float mRadius; // 圓環半徑 private float mRingRadius; // 圓環寬度 private float mStrokeWidth; // 圓心x座標 private int mXCenter; // 圓心y座標 private int mYCenter; //園中心顯示文字 private String mCircleText; // 字的長度 private int mTxtWidth; // 字的高度 private int mTxtHeight; // 文字大小 private float mTextSize; // 總進度 private int mTotalProgress; // 當前進度 private int mProgress; public CircleProgressView(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.CircleProgressValue, 0, 0); mStrokeWidth = typeArray.getDimension(R.styleable.CircleProgressValue_strokeWidth, 10); mCircleColor = typeArray.getColor(R.styleable.CircleProgressValue_circleColor, 0xFFFFFFFF); mRingColor = typeArray.getColor(R.styleable.CircleProgressValue_ringColor, 0xFFFFFFFF); mRingBgColor = typeArray.getColor(R.styleable.CircleProgressValue_ringBgColor, 0xFFFFFFFF); mTotalProgress=typeArray.getInt(R.styleable.CircleProgressValue_totalProgress,100); mTextSize = typeArray.getDimension(R.styleable.CircleProgressValue_textSize, mRadius/4); if (!TextUtils.isEmpty(typeArray.getString(R.styleable.CircleProgressValue_circleText))){ mCircleText=typeArray.getString(R.styleable.CircleProgressValue_circleText); } } //初始化畫筆 private void initVariable() { //內圓 mCirclePaint = new Paint(); mCirclePaint.setAntiAlias(true); mCirclePaint.setColor(mCircleColor); mCirclePaint.setStyle(Paint.Style.FILL); //外圓弧背景 mRingPaintBg = new Paint(); mRingPaintBg.setAntiAlias(true); mRingPaintBg.setColor(mRingBgColor); mRingPaintBg.setStyle(Paint.Style.STROKE); mRingPaintBg.setStrokeWidth(mStrokeWidth); //外圓弧 mRingPaint = new Paint(); mRingPaint.setAntiAlias(true); mRingPaint.setColor(mRingColor); mRingPaint.setStyle(Paint.Style.STROKE); mRingPaint.setStrokeWidth(mStrokeWidth); //mRingPaint.setStrokeCap(Paint.Cap.ROUND);//設定線冒樣式,有圓 有方 //中間字 mTextPaint = new TextPaint(); mTextPaint.setAntiAlias(true); mTextPaint.setStyle(Paint.Style.FILL); mTextPaint.setColor(mRingColor); mTextPaint.setTextSize(mTextSize); 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; if (getWidth()>getHeight()){//如果寬>高,半徑=高/2-邊粗 mRadius=mYCenter-mStrokeWidth; }else { mRadius=mXCenter-mStrokeWidth; } mRingRadius = mRadius + mStrokeWidth / 2; //內圓 canvas.drawCircle(mXCenter, mYCenter, mRadius, 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); canvas.drawArc(oval1, 0, 360, false, mRingPaintBg); //圓弧所在的橢圓物件、圓弧的起始角度、圓弧的角度、是否顯示半徑連線 //外圓弧 if (mProgress > 0 ) { RectF oval = new RectF(); oval.left = (mXCenter - mRingRadius); oval.top = (mYCenter - mRingRadius); oval.right = mRingRadius * 2 + (mXCenter - mRingRadius); oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius); canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint); // //字型 if (!TextUtils.isEmpty(mCircleText)){ //文字過長則換行 StaticLayout textLayout = new StaticLayout(mCircleText,mTextPaint,mXCenter-mXCenter/4, Layout.Alignment.ALIGN_CENTER, 1.0f, 0f,false); canvas.translate(mXCenter-mXCenter/2+mXCenter/8, mYCenter - mTxtHeight); textLayout.draw(canvas); } } } //設定進度 public void setProgress(int progress) { mProgress = progress; postInvalidate();//重繪 } public void setCircleText(String mCircleText) { this.mCircleText = mCircleText; } }