Android自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條

更新時(shí)間：2018年12月31日 09:58:19 作者：熱木星

這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

分享一個(gè)自己制作的Android自定義View。是一個(gè)圓環(huán)形狀的反映真實(shí)進(jìn)度的進(jìn)度條，百分比的進(jìn)度文字跟隨已完成進(jìn)度的圓弧轉(zhuǎn)動(dòng)。以下是效果圖：

這個(gè)自定義View可以根據(jù)需要設(shè)定圓環(huán)的寬度和百分比文字的大小。

先說一下思路：這個(gè)View一共分為三部分：第一部分也就是灰色的圓環(huán)部分，代表未完成的進(jìn)度；第二部分是藍(lán)色的圓弧部分，代表已經(jīng)完成的進(jìn)度；第三部分是紅色的百分比的數(shù)字百分比文本，顯示當(dāng)前確切的完成進(jìn)度。

下面是View的編寫思路：

①：定義三個(gè)畫筆，分別畫灰色圓環(huán)，藍(lán)色圓弧，紅色文字；
②：構(gòu)造器中初始化數(shù)據(jù)，設(shè)置三個(gè)畫筆的屬性；
③：重寫View的onMeasure方法，得到本View的寬度，高度，計(jì)算出中心點(diǎn)的坐標(biāo)；
④：由于這個(gè)View是一個(gè)圓環(huán)形狀，所以定義本View寬高中較小者的一半為整個(gè)圓環(huán)部分（包括圓環(huán)和文字）最外側(cè)的半徑，這樣使用者可以任意指定本View的寬高，圓環(huán)可以恰好嵌入其中，不會(huì)超出空間，也不會(huì)浪費(fèi)空間；
⑤：繪制圓環(huán)需要一個(gè)RectF對(duì)象，創(chuàng)建一個(gè)RectF對(duì)象，指定它的左上右下邊界均距離View中心為整個(gè)圓環(huán)部分（包括圓環(huán)和文字）最外側(cè)的半徑減去圓環(huán)畫筆寬度和文字高度較大者的一半，這樣，整個(gè)圓環(huán)部分（包括圓環(huán)和文字）的邊界恰好會(huì)與View的邊界重合；
⑥：繪制緊貼著圓環(huán)的文字，需要一個(gè)Path對(duì)象來指定文字的路徑。給這個(gè)Path對(duì)象添加一小段圓弧的軌跡，然后在圓弧上面繪制文字。這段圓弧也需要一個(gè)RectF對(duì)象，但是這個(gè)RectF要比上一個(gè)RectF小一些，來保證文字恰好在圓環(huán)軌跡上；
⑦：然后是最關(guān)鍵的重繪部分，重寫onDraw方法。首先畫出灰色圓環(huán)，這個(gè)比較簡單，它不需要隨進(jìn)度變化而變化，只是一個(gè)圓環(huán)；
⑧：其次畫出藍(lán)色的圓弧。設(shè)定圓弧開始的角度是-90度，也就是圓環(huán)頂部。掃過的角度是當(dāng)前百分比乘以360度一整圈的角度，并且隨著progress增加而不斷增加，產(chǎn)生動(dòng)畫的效果；
⑨：最難的部分，畫文字。在路徑上面畫文字并不難，但是要精確確定文字的位置，使文字的中央恰好處于藍(lán)色進(jìn)度條的最前端。在這里我使用了Paint的一個(gè)方法：getTextWidths，這個(gè)方法可以根據(jù)當(dāng)前需要繪制的文字，返回所有單個(gè)字符的寬度組成的一個(gè)float型的數(shù)組，然后根據(jù)這個(gè)數(shù)組可以得到要繪制文字所占的寬度，進(jìn)而可以得到需要的Path對(duì)象需要的圓弧軌跡的長度，然后根據(jù)圓弧長度，得到圓弧角度（width = sweepAngle * 2 * π * R / 360 →sweepAngle = width * 360 / 2 / π / R），然后就可以用這個(gè)Path對(duì)象去畫文字了。
⑩：這里我們給View添加了一個(gè)方法，setProgress，參數(shù)為int型的進(jìn)度，這樣外界使用者就可以根據(jù)實(shí)際進(jìn)度來指定View的進(jìn)度來顯示當(dāng)前實(shí)際工作完成的百分比。

下面是代碼View代碼：

public class CircleNumberProgress extends View {
 
  /** 進(jìn)度條畫筆的寬度（dp） */
  private int paintProgressWidth = 3;
 
  /** 文字百分比的字體大小（sp） */
  private int paintTextSize = 20;
 
  /** 未完成進(jìn)度條的顏色 */
  private int paintUndoneColor = 0xffaaaaaa;
 
  /** 已完成進(jìn)度條的顏色 */
  private int paintDoneColor = 0xff67aae4;
 
  /** 百分比文字的顏色 */
  private int paintTextColor = 0xffff0077;
 
  /** 設(shè)置進(jìn)度條畫筆的寬度(px) */
  private int paintProgressWidthPx;
 
  /** 文字畫筆的尺寸(px) */
  private int paintTextSizePx;
  /** Context上下文環(huán)境 */
  private Context context;
 
  /** 調(diào)用者設(shè)置的進(jìn)程 0 - 100 */
  private int progress;
 
  /** 畫未完成進(jìn)度圓弧的畫筆 */
  private Paint paintUndone = new Paint();
 
  /** 畫已經(jīng)完成進(jìn)度條的畫筆 */
  private Paint paintDone = new Paint();
 
  /** 畫文字的畫筆 */
  private Paint paintText = new Paint();
 
  /** 包圍進(jìn)度條圓弧的矩形 */
  private RectF rectF = new RectF();
 
  /** 包圍文字所在路徑圓弧的矩形，比上一個(gè)矩形略小 */
  private RectF rectF2 = new RectF();
 
  /** 進(jìn)度文字所在的路徑 */
  private Path path = new Path();
 
  /** 文字所在路徑圓弧的半徑 */
  private int radiusText;
 
  /** 是否進(jìn)行過了測(cè)量 */
  private boolean isMeasured = false;
 
  public CircleNumberProgress(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    // 構(gòu)造器中初始化數(shù)據(jù)
    initData();
  }
 
  /** 初始化數(shù)據(jù) */
  private void initData() {
 
    // 設(shè)置進(jìn)度條畫筆的寬度
    paintProgressWidthPx = Utils.dip2px(context, paintProgressWidth);
 
    // 設(shè)置文字畫筆的尺寸(px)
    paintTextSizePx = Utils.sp2px(context, paintTextSize);
 
    // 未完成進(jìn)度圓環(huán)的畫筆的屬性
    paintUndone.setColor(paintUndoneColor);
    paintUndone.setStrokeWidth(paintProgressWidthPx);
    paintUndone.setAntiAlias(true);
    paintUndone.setStyle(Paint.Style.STROKE);
 
    // 已經(jīng)完成進(jìn)度條的畫筆的屬性
    paintDone.setColor(paintDoneColor);
    paintDone.setStrokeWidth(paintProgressWidthPx);
    paintDone.setAntiAlias(true);
    paintDone.setStyle(Paint.Style.STROKE);
 
    // 文字的畫筆的屬性
    paintText.setColor(paintTextColor);
    paintText.setTextSize(paintTextSizePx);
    paintText.setAntiAlias(true);
    paintText.setStyle(Paint.Style.STROKE);
    paintText.setTypeface(Typeface.DEFAULT_BOLD);
 
  }
 
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    if (!isMeasured) {
      getWidthAndHeight();
      isMeasured = true;
    }
  }
 
  /** 得到視圖等的高度寬度尺寸數(shù)據(jù) */
  private void getWidthAndHeight() {
 
    // 得到自定義視圖的高度
    int viewHeight;
 
    // 得到自定義視圖的寬度
    int viewWidth;
 
    // 得到自定義視圖的X軸中心點(diǎn)
    int viewCenterX;
 
    // 得到自定義視圖的Y軸中心點(diǎn)
    int viewCenterY;
 
    viewHeight = getMeasuredHeight();
    viewWidth = getMeasuredWidth();
    viewCenterX = viewWidth / 2;
    viewCenterY = viewHeight / 2;
 
    // 取本View長寬較小者的一半為整個(gè)圓環(huán)部分（包括圓環(huán)和文字）最外側(cè)的半徑
    int minLenth = viewHeight > viewWidth ? viewWidth / 2 : viewHeight / 2;
 
    // 比較文字高度和圓環(huán)寬度，如果文字高度較大，那么文字將突破圓環(huán)，否則，圓環(huán)會(huì)把文字包裹在內(nèi)部
    Rect rect = new Rect();
    paintText.getTextBounds("100%", 0, "100%".length(), rect);
    int textHeight = rect.height();
 
    // 得到圓環(huán)的中間半徑（外徑和內(nèi)徑平均值）
    int radiusArc = minLenth - (paintProgressWidthPx > textHeight ? paintProgressWidthPx / 2 : textHeight / 2);
    rectF.left = viewCenterX - radiusArc;
    rectF.top = viewCenterY - radiusArc;
    rectF.right = viewCenterX + radiusArc;
    rectF.bottom = viewCenterY + radiusArc;
 
    // 文字所依賴路徑圓弧的半徑
    radiusText = radiusArc - textHeight / 2;
    rectF2.left = viewCenterX - radiusText;
    rectF2.top = viewCenterY - radiusText;
    rectF2.right = viewCenterX + radiusText;
    rectF2.bottom = viewCenterY + radiusText;
 
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
 
    // 畫未完成進(jìn)度的圓環(huán)
    canvas.drawArc(rectF, 0, 360, false, paintUndone);
 
    // 畫已經(jīng)完成進(jìn)度的圓弧 從-90度開始，即從圓環(huán)頂部開始
    canvas.drawArc(rectF, -90, progress / 100.0f * 360, false, paintDone);
 
    // 為文字所在路徑添加一段圓弧軌跡，進(jìn)度為0%-9%時(shí)應(yīng)該最短，進(jìn)度為10%-99%時(shí)應(yīng)該邊長，進(jìn)度為100%時(shí)應(yīng)該最長
    // 這樣才能保證文字和圓弧的進(jìn)度一致，不會(huì)出現(xiàn)超前或者滯后的情況
 
    // 要畫的文字
    String text = progress + "%";
 
    // 存儲(chǔ)字符所有字符所占寬度的數(shù)組
    float[] widths = new float[text.length()];
 
    // 得到所有字符所占的寬度
    paintText.getTextWidths(text, 0, text.length(), widths);
 
    // 所有字符所占寬度之和
    float textWidth = 0;
    for (float f : widths) {
      textWidth += f;
    }
 
    // 根據(jù)長度得到路徑對(duì)應(yīng)的掃過的角度
    // width = sweepAngle * 2 * π * R / 360 ; sweepAngle = width * 360 / 2 /
    // π / R
    float sweepAngle = (float) (textWidth * 360 / 2 / Math.PI / radiusText);
 
    // 添加路徑
    path.addArc(rectF2, progress * 3.6f - 90.0f - sweepAngle / 2.0f, sweepAngle);
 
    // 繪制進(jìn)度的文字
    canvas.drawTextOnPath(text, path, 0, 0, paintText);
 
    // 重置路徑
    path.reset();
  }
 
  /**
   * @param progress 外部傳進(jìn)來的當(dāng)前進(jìn)度,強(qiáng)制重繪
   */
  public void setProgress(int progress) {
    this.progress = progress;
    invalidate();
  }
}

調(diào)用者Activity代碼：

public class NumberProgressBarActivity extends Activity {
 
  /** handler消息標(biāo)識(shí) */
  protected static final int WHAT_INCREASE = 1;
 
  /** 圓形帶數(shù)字的進(jìn)度條 */
  private CircleNumberProgress cnp_citcleNumberProgress;
 
  /** 指定給進(jìn)度條的進(jìn)程 */
  private int progress;
 
  private Handler handler = new Handler() {
    public void handleMessage(android.os.Message msg) {
      progress++;
      cnp_citcleNumberProgress.setProgress(progress);
      handler.sendEmptyMessageDelayed(WHAT_INCREASE, getRadomNumber(50, 300));
      if (progress >= 100) {
        handler.removeMessages(WHAT_INCREASE);
      }
    }
 
  };
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_number_progress_bar);
    cnp_citcleNumberProgress = (CircleNumberProgress) findViewById(R.id.cnp_citcleNumberProgress);
    Button btn_numberProgressBar = (Button) findViewById(R.id.btn_numberProgressBar);
    btn_numberProgressBar.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        increase();
      }
    });
  }
 
  private void increase() {
    progress = 0;
    handler.removeMessages(WHAT_INCREASE);
    handler.sendEmptyMessage(WHAT_INCREASE);
  }
 
  /**
   * 得到兩個(gè)整數(shù)之間的一個(gè)隨機(jī)數(shù)
   *
   * @param start 較小的數(shù)
   * @param end  較大的數(shù)
   * @return 隨機(jī)整數(shù)
   */
  public int getRadomNumber(int start, int end) {
    return (int) (start + Math.random() * (end - start));
  }
}

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
 
  <com.example.viewdemo.view.CircleNumberProgress
    android:id="@+id/cnp_citcleNumberProgress"
    android:layout_width="wrap_content"
    android:layout_height="300dp"
    android:layout_margin="20dp"
    android:background="#33897500"/>
 
  <Button
    android:id="@+id/btn_numberProgressBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="開始"/>
 
</LinearLayout>

還有幾個(gè)方法是dp，px，sp相互轉(zhuǎn)換的也一并貼出來：

/**
 * 將px值轉(zhuǎn)換為dip或dp值，保證尺寸大小不變
 */
public static int px2dip(Context context, float pxValue) {
  final float scale = context.getResources().getDisplayMetrics().density;
  return (int) (pxValue / scale + 0.5f);
}
 
/**
 * 將dip或dp值轉(zhuǎn)換為px值，保證尺寸大小不變
 */
public static int dip2px(Context context, float dipValue) {
  final float scale = context.getResources().getDisplayMetrics().density;
  return (int) (dipValue * scale + 0.5f);
}
 
/**
 * 將px值轉(zhuǎn)換為sp值，保證文字大小不變
 */
public static int px2sp(Context context, float pxValue) {
  final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
  return (int) (pxValue / fontScale + 0.5f);
}
 
/**
 * 將sp值轉(zhuǎn)換為px值，保證文字大小不變
 */
public static int sp2px(Context context, float spValue) {
  final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
  return (int) (spValue * fontScale + 0.5f);
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: