帶進度的圓形進度條的實現

2021-08-19 13:39:36 字數 3346 閱讀 4703

今天通過自定義view來實現乙個帶進度的圓形進度條，實現的最終效果如下圖所示：

現在來講一下設計的思路：首先這個進度條可以自定義小圓角矩形的數量、小圓角矩形大小、小圓角矩形的圓角角度、未完成進度時的顏色，完成進度時的顏色、文字大小、文字顏色、圓形半徑，所以需要自定義這些引數；那如何畫這個圓形進度呢？我們需要先畫乙個小圓角矩形，再旋轉畫布再畫矩形，如圖這裡有12個小圓角矩形，每次旋轉360/12=30度，畫乙個小圓角矩形，共畫12個。然後畫中間的進度值，畫中間的進度值，主要需要計算文字的位置，這個稍後再介紹。下面通過**進行詳細的講解下實現過程。**如下：

import android.content.context;


import android.content.res.typedarray;


import android.graphics.canvas;


import android.graphics.paint;


import android.graphics.rectf;


import android.graphics.typeface;


import android.support.annotation.floatrange;


import android.support.annotation.nullable;


import android.text.textpaint;


import android.util.attributeset;


import android.util.log;


import android.view.view;


/** * created by 劉信 on 2018/4/27.


*/public


class


loadview


extends


view 


public


loadview(context context, @nullable attributeset attrs) 


public


loadview(context context, @nullable attributeset attrs, int defstyleattr) 


private


void


init(context context, attributeset attrs, int destyleattr) 


//外半徑等於使用者設定的內半徑加上小矩形的高度


mouterradius = minnerradius + mrectangleheight;


//這裡是畫第乙個圓形矩形需要的retcf。通過左上角和右下角座標確定，


// 這裡左上角座標（mouterradius - mrectanglewidth / 2f,0),


//右下角座標（mouterradius + mrectanglewidth / 2f, mrectangleheight）;        


mrectf = new rectf(mouterradius - mrectanglewidth / 2f, 0, mouterradius + mrectanglewidth / 2f, mrectangleheight);


mpaint = new paint();


mpaint.setcolor(mnormalloadcolor);


mpaint.setantialias(true);


mpaint.setstyle(paint.style.fill);


mtextpaint = new textpaint();


//這裡還可以設定文字的字型，我去掉了


/*try  catch (exception e) */


mtextpaint.settextsize(mtextsize);


mtextpaint.setcolor(mhasloadcolor);


}private


intdiptopixels(context context, float dip) 


/***供外界呼叫


* 請在主線程呼叫,設定進度 0到1


*@param percent


*/public


void


setpercent(@floatrange(from=0.0, to=1.0) float percent)


@override


protected


void


onmeasure(int widthmeasurespec, int heightmeasurespec) 


@override


protected


void


ondraw(canvas canvas)  else 


//畫圓角矩形


canvas.drawroundrect(mrectf, mrectangleradius, mrectangleradius, mpaint);


//以中心點旋轉畫布，這裡想象下你現實中拿只筆在紙上畫，每畫乙個你就旋轉紙，你就知道了


canvas.rotate(degress, mouterradius, mouterradius);


}//回到之前的畫布狀態


canvas.restore();


//文字寬度


float textwidth = mtextpaint.measuretext(mpercentstr);


//計算高度要注意了


//drawtext是以文字的baseline為準的


//所以計算高度步驟：文字高度(descent-ascent)的一半減去descent；得到的結果


// 是baseline離中心圓點的偏移量，再加上半徑就是高度了


//還不懂？看下面的圖


paint.fontmetrics fontmetrics = mtextpaint.getfontmetrics();


float diffbaseline = (-(fontmetrics.ascent + fontmetrics.descent)) / 2;


//x預設是這個字串的左邊在螢幕的位置，如果設定了paint.settextalign(paint.align.center);那就是字元的中心，y是指定這個字元baseline在螢幕上的位置


**已上傳，鏈結位址loadview
				
圓形進度條
public class circleprogress extends view public int getmheight public void setmheight int mheight public int getmwidth public void setmwidth int mwidt...

				
C 實現帶進度條的ListView
推薦閱讀 listview 百分比進度條 delphi版 對於已經有的元件，可以直接新增進來，新增後要先執行一下，然後會在工具箱內找到相應控制項。1 首先編寫元件，然後將元件新增到工具箱內 編寫 如下 public partial class listviewex system.windows.fo...

				
React Native實現圓形進度條
react native實現自定義的圓形進度條動畫，主要需要用到animated和react native svg這個外掛程式。先看看最終實現的效果 大致思路如下 1.使用svg建立畫布，指定畫布的寬高 2.建立外層倒計時circle，這裡需要使用兩個完全重合的circle疊起來實現，這兩個circ...