Android View實現圓形進度條
本文實例為大傢分享瞭Android View實現圓形進度條的具體代碼,供大傢參考,具體內容如下
主要涉及到下面幾個方法:
// 畫圓 canvas.drawCircle // 畫圓弧 canvas.drawArc // 畫文本 canvas.drawText // 抗鋸齒 paint.setAntiAlias(true); // 設置顏色 paint.setColor(getResources().getColor(mFgColor, null));
其次就是對坐標的計算,還有註意就是畫圓弧的時候,起始從-90度開始才是垂直上方。
效果圖:
自定義View:
public class MyView extends View { // 線寬度 private static final int mStrokeWidth = 50; private int mVal = 0; private static final int mMaxVal = 200; private int mGgColor = R.color.arcbg; private int mFgColor = R.color.arcfg; public MyView(Context context) { super(context); } public MyView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } // 設置值 public void setProgressValue(int val){ this.mVal = val; invalidate(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int width = getMeasuredWidth(); int height = getMeasuredHeight(); drawBGCircle(canvas, width, height); drawFGArc(canvas, width, height); drawText(canvas, width, height); } // 文本 private void drawText(Canvas canvas, int width, int height) { Paint paint = new Paint(); paint.setAntiAlias(true); paint.setColor(getResources().getColor(mFgColor, null)); paint.setTextSize(120); int percent = (int) (( mVal / (float) mMaxVal ) * 100); canvas.drawText(percent + "%", (width - paint.measureText(percent + "%")) / 2, (height + paint.measureText("%")) / 2, paint); } // 圓弧 private void drawFGArc(Canvas canvas, int width, int height) { Paint paint = new Paint(); paint.setColor(getResources().getColor(mFgColor, null)); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(mStrokeWidth); paint.setAntiAlias(true); RectF mRectF = new RectF(mStrokeWidth, mStrokeWidth, width - mStrokeWidth, height - mStrokeWidth); int sweepAngle = (int) (360 * mVal / (float) mMaxVal); canvas.drawArc(mRectF, -90, sweepAngle, false, paint); } // 底部圓形 private void drawBGCircle(Canvas canvas, int width, int height) { int r = (width - 2 * mStrokeWidth) / 2; Paint cPaint = new Paint(); cPaint.setColor(getResources().getColor(mGgColor, null)); cPaint.setStyle(Paint.Style.STROKE); cPaint.setStrokeWidth(mStrokeWidth); cPaint.setAntiAlias(true); canvas.drawCircle(width / 2, height / 2, r, cPaint); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = getSize(widthMeasureSpec, 200); int height = getSize(heightMeasureSpec, 200); setMeasuredDimension(width, height); } private int getSize(int widthMeasureSpec, int defultSize) { int realSize = defultSize; int mode = MeasureSpec.getMode(widthMeasureSpec); int size = MeasureSpec.getSize(widthMeasureSpec); switch (mode){ case MeasureSpec.UNSPECIFIED: realSize = defultSize; break; case MeasureSpec.AT_MOST: realSize = size; break; case MeasureSpec.EXACTLY: realSize = size; break; } return realSize; } }
然後在佈局文件中引用:
<com.weizu.myapplication.view.MyView android:id="@+id/myView" android:layout_width="150dp" android:layout_height="150dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
最後,我們設置其點擊效果,並開始耗時操作模擬:
MyView view = findViewById(R.id.myView); view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { new Thread(new Runnable() { @Override public void run() { int val = 0; while(val <= 200){ view.setProgressValue(val); val++; try { Thread.sleep(20); } catch (InterruptedException e) { e.printStackTrace(); } } } }).start(); } });
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Android自定義有限制區域圖例角度自識別塗鴉工具類中篇
- Android自定義View繪制貝塞爾曲線的方法
- Android自定義View實現隨機數驗證碼
- Android自定義view貝塞爾曲線
- android UI繪制加減號按鈕