圓形投票進度條

2022-08-26 08:27:08 字數 2201 閱讀 3350

我們經常看到一些手機投票結果如果只有兩種情況,使用以下效果往往看起來比較直觀,我之前在乙個android開發群裡邊發現有人問這個問題,今天閒著沒事,就順帶著做出來了。個人只製作了圓形條部分,你當然可以在下方再加乙個布局說明黑色代表什麼,粉色代表什麼。

做任何一件事,最最需要的是整體上有個規劃,其次是細節上有個考量。先說整體思路:1、找一張畫布,畫乙個底色;2、畫乙個粉色圓形;3、畫乙個封閉的黑色弧形;4、在圓環內部畫乙個底色圓形,截出乙個圓環

簡單吧?然後就是寫**的體力活了,為了讓看官們都懂,在下當然會上**。

1、activity原始碼,很簡單,載入乙個布局檔案

public

class

mainactivity extends activity

}

2、voteview類,使用自定義資源declare-styleable,在ondraw方法中進行繪製

public

class

voteview extends view

public

voteview(context context,attributeset attrs)

public voteview(context context, attributeset attrs, int

defstyleattr)

}mtype.recycle();

paint = new

paint();

path = new

path();

paint.setcolor(background);

paint.setantialias(

true

); paint.setstyle(style.fill);

}@override

protected

void

ondraw(canvas canvas)

else

paint.setcolor(foreground);

canvas.drawarc(mrectf,

90,progress,true

,paint);

paint.setcolor(color.white);

path.reset();

path.addcircle(mwidth/2,mheight/2,math.min(mwidth/4,mheight/4

),direction.cw);

canvas.drawpath(path,paint);

}

3、使用的declare屬性xml

<?xml version="

1.0" encoding="

utf-8

"?>

"voteattr

">

"background

" format="

color|reference

"/>

"foreground

" format="

color|reference

"/>

"max" format="

integer

"/>

"progress

" format="

integer

"/>

4、activity載入的資源檔案

"

"xmlns:tools="

"android:layout_width="

match_parent

"android:layout_height="

match_parent

"tools:context="

$.$" >

xmlns:vote="

"android:layout_width="

300dp

"android:layout_height="

200dp

"vote:background="

#ff00ff

"vote:foreground="

#0f0f0f

"vote:progress="90"

/>

不知道怎麼上傳原始碼,反正到此為止所有的**都已經上傳了,(●'◡'●)

圓形進度條

public class circleprogress extends view public int getmheight public void setmheight int mheight public int getmwidth public void setmwidth int mwidt...

canvas圓形進度條

canvas中沒有直接繪製圓的方法,但有乙個繪製弧線的context.arc方法,下面講下用該方法如何繪製出效果。引數說明 看到這裡,大家就會明白怎麼畫圓了把,只要讓起始角和結束角度為乙個圓周就可以了。下面開始畫圖咯!環形進度條主要兩部分組成,一是灰色圓,另一是藍色弧度。也就是說灰色圓圈和藍色弧同圓...

IOS 圓形進度條

demo created by leao on 2017 8 7.import typedef ns enum nsinteger,ccprogressviewstyle inte ce ccprogressview uiview property nonatomic,assign,setter s...