分享一個自己製作的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);
}