您好,登錄后才能下訂單哦!
本篇文章為大家展示了怎么在Android中自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
下面是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對象,創(chuàng)建一個(gè)RectF對象,指定它的左上右下邊界均距離View中心為整個(gè)圓環(huán)部分(包括圓環(huán)和文字)最外側(cè)的半徑減去圓環(huán)畫筆寬度和文字高度較大者的一半,這樣,整個(gè)圓環(huán)部分(包括圓環(huán)和文字)的邊界恰好會(huì)與View的邊界重合;
⑥:繪制緊貼著圓環(huán)的文字,需要一個(gè)Path對象來指定文字的路徑。給這個(gè)Path對象添加一小段圓弧的軌跡,然后在圓弧上面繪制文字。這段圓弧也需要一個(gè)RectF對象,但是這個(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對象需要的圓弧軌跡的長度,然后根據(jù)圓弧長度,得到圓弧角度(width = sweepAngle * 2 * π * R / 360 →sweepAngle = width * 360 / 2 / π / R),然后就可以用這個(gè)Path對象去畫文字了。
⑩:這里我們給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; /** 文字百分比的字體大?。╯p) */ 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)行過了測量 */ 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ù)長度得到路徑對應(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)識 */ 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)容就是怎么在Android中自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。