分享一個自己制作的Android自定義View。是一個圓環形狀的反映真實進度的進度條，百分比的進度文字跟隨已完成進度的圓弧轉動。以下是效果圖：
這個自定義View可以根據需要設定圓環的寬度和百分比文字的大小。
先說一下思路：這個View一共分為三部分：第一部分也就是灰色的圓環部分，代表未完成的進度；第二部分是藍色的圓弧部分，代表已經完成的進度；第三部分是紅色的百分比的數字百分比文本，顯示當前確切的完成進度。
下面是View的編寫思路：
①：定義三個畫筆，分別畫灰色圓環，藍色圓弧，紅色文字；
②：構造器中初始化數據，設置三個畫筆的屬性；
③：重寫View的onMeasure方法，得到本View的寬度，高度，計算出中心點的坐標；
④：由于這個View是一個圓環形狀，所以定義本View寬高中較小者的一半為整個圓環部分（包括圓環和文字）最外側的半徑，這樣使用者可以任意指定本View的寬高，圓環可以恰好嵌入其中，不會超出空間，也不會浪費空間；
⑤：繪制圓環需要一個RectF對象，創建一個RectF對象，指定它的左上右下邊界均距離View中心為整個圓環部分（包括圓環和文字）最外側的半徑減去圓環畫筆寬度和文字高度較大者的一半，這樣，整個圓環部分（包括圓環和文字）的邊界恰好會與View的邊界重合；
⑥：繪制緊貼著圓環的文字，需要一個Path對象來指定文字的路徑。給這個Path對象添加一小段圓弧的軌跡，然后在圓弧上面繪制文字。這段圓弧也需要一個RectF對象，但是這個RectF要比上一個RectF小一些，來保證文字恰好在圓環軌跡上；
⑦：然后是最關鍵的重繪部分，重寫onDraw方法。首先畫出灰色圓環，這個比較簡單，它不需要隨進度變化而變化，只是一個圓環；
⑧：其次畫出藍色的圓弧。設定圓弧開始的角度是-90度，也就是圓環頂部。掃過的角度是當前百分比乘以360度一整圈的角度，并且隨著progress增加而不斷增加，產生動畫的效果；
⑨：最難的部分，畫文字。在路徑上面畫文字并不難，但是要精確確定文字的位置，使文字的中央恰好處于藍色進度條的最前端。在這里我使用了Paint的一個方法：getTextWidths，這個方法可以根據當前需要繪制的文字，返回所有單個字符的寬度組成的一個float型的數組，然后根據這個數組可以得到要繪制文字所占的寬度，進而可以得到需要的Path對象需要的圓弧軌跡的長度，然后根據圓弧長度，得到圓弧角度（width = sweepAngle * 2 * π * R / 360 →sweepAngle = width * 360 / 2 / π / R），然后就可以用這個Path對象去畫文字了。
⑩：這里我們給View添加了 一個方法，setProgress，參數為int型的進度，這樣外界使用者就可以根據實際進度來指定View的進度來顯示當前實際工作完成的百分比。
下面是代碼View代碼：
public class CircleNumberProgress extends View { /** 進度條畫筆的寬度（dp） */ private int paintProgressWidth = 3; /** 文字百分比的字體大小（sp） */ private int paintTextSize = 20; /** 未完成進度條的顏色 */ private int paintUndoneColor = 0xffaaaaaa; /** 已完成進度條的顏色 */ private int paintDoneColor = 0xff67aae4; /** 百分比文字的顏色 */ private int paintTextColor = 0xffff0077; /** 設置進度條畫筆的寬度(px) */ private int paintProgressWidthPx; /** 文字畫筆的尺寸(px) */ private int paintTextSizePx; /** Context上下文環境 */ private Context context; /** 調用者設置的進程 0 - 100 */ private int progress; /** 畫未完成進度圓弧的畫筆 */ private Paint paintUndone = new Paint(); /** 畫已經完成進度條的畫筆 */ private Paint paintDone = new Paint(); /** 畫文字的畫筆 */ private Paint paintText = new Paint(); /** 包圍進度條圓弧的矩形 */ private RectF rectF = new RectF(); /** 包圍文字所在路徑圓弧的矩形，比上一個矩形略小 */ private RectF rectF2 = new RectF(); /** 進度文字所在的路徑 */ private Path path = new Path(); /** 文字所在路徑圓弧的半徑 */ private int radiusText; /** 是否進行過了測量 */ private boolean isMeasured = false; public CircleNumberProgress(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; // 構造器中初始化數據 initData(); } /** 初始化數據 */ private void initData() { // 設置進度條畫筆的寬度 paintProgressWidthPx = Utils.dip2px(context, paintProgressWidth); // 設置文字畫筆的尺寸(px) paintTextSizePx = Utils.sp2px(context, paintTextSize); // 未完成進度圓環的畫筆的屬性 paintUndone.setColor(paintUndoneColor); paintUndone.setStrokeWidth(paintProgressWidthPx); paintUndone.setAntiAlias(true); paintUndone.setStyle(Paint.Style.STROKE); // 已經完成進度條的畫筆的屬性 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; } } /** 得到視圖等的高度寬度尺寸數據 */ private void getWidthAndHeight() { // 得到自定義視圖的高度 int viewHeight; // 得到自定義視圖的寬度 int viewWidth; // 得到自定義視圖的X軸中心點 int viewCenterX; // 得到自定義視圖的Y軸中心點 int viewCenterY; viewHeight = getMeasuredHeight(); viewWidth = getMeasuredWidth(); viewCenterX = viewWidth / 2; viewCenterY = viewHeight / 2; // 取本View長寬較小者的一半為整個圓環部分（包括圓環和文字）最外側的半徑 int minLenth = viewHeight > viewWidth ? viewWidth / 2 : viewHeight / 2; // 比較文字高度和圓環寬度，如果文字高度較大，那么文字將突破圓環，否則，圓環會把文字包裹在內部 Rect rect = new Rect(); paintText.getTextBounds("100%", 0, "100%".length(), rect); int textHeight = rect.height(); // 得到圓環的中間半徑（外徑和內徑平均值） 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); // 畫未完成進度的圓環 canvas.drawArc(rectF, 0, 360, false, paintUndone); // 畫已經完成進度的圓弧 從-90度開始，即從圓環頂部開始 canvas.drawArc(rectF, -90, progress / 100.0f * 360, false, paintDone); // 為文字所在路徑添加一段圓弧軌跡，進度為0%-9%時應該最短，進度為10%-99%時應該邊長，進度為100%時應該最長 // 這樣才能保證文字和圓弧的進度一致，不會出現超前或者滯后的情況 // 要畫的文字 String text = progress + "%"; // 存儲字符所有字符所占寬度的數組 float[] widths = new float[text.length()]; // 得到所有字符所占的寬度 paintText.getTextWidths(text, 0, text.length(), widths); // 所有字符所占寬度之和 float textWidth = 0; for (float f : widths) { textWidth += f; } // 根據長度得到路徑對應的掃過的角度 // 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); // 繪制進度的文字 canvas.drawTextOnPath(text, path, 0, 0, paintText); // 重置路徑 path.reset(); } /** * @param progress 外部傳進來的當前進度,強制重繪 */ public void setProgress(int progress) { this.progress = progress; invalidate(); }}調用者Activity代碼：
public class NumberProgressBarActivity extends Activity { /** handler消息標識 */ protected static final int WHAT_INCREASE = 1; /** 圓形帶數字的進度條 */ private CircleNumberProgress cnp_citcleNumberProgress; /** 指定給進度條的進程 */ 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); } /** * 得到兩個整數之間的一個隨機數 * * @param start 較小的數 * @param end 較大的數 * @return 隨機整數 */ 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>
還有幾個方法是dp，px，sp相互轉換的也一并貼出來：
/** * 將px值轉換為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值轉換為px值，保證尺寸大小不變 */public static int dip2px(Context context, float dipValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dipValue * scale + 0.5f);} /** * 將px值轉換為sp值，保證文字大小不變 */public static int px2sp(Context context, float pxValue) { final float fontScale = context.getResources().getDisplayMetrics().scaledDensity; return (int) (pxValue / fontScale + 0.5f);} /** * 將sp值轉換為px值，保證文字大小不變 */public static int sp2px(Context context, float spValue) { final float fontScale = context.getResources().getDisplayMetrics().scaledDensity; return (int) (spValue * fontScale + 0.5f);}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
