摘要:開(kāi)箱即用的源碼地址洋蔥數(shù)學(xué)同款雷達(dá)圖支持自定義屬性雷達(dá)網(wǎng)的半徑該屬性決定了的寬高各屬性表示的最大進(jìn)度雷達(dá)網(wǎng)的顏色雷達(dá)網(wǎng)的線寬各屬性文字的顏色各屬性文字和中心處名字的字體路徑中心連接區(qū)域的顏色中心連接區(qū)域的邊框顏色中心處的名字中
開(kāi)箱即用的源碼地址
洋蔥數(shù)學(xué)同款雷達(dá)圖-RadarView
支持XML自定義屬性:
rv_webRadius:雷達(dá)網(wǎng)的半徑(該屬性決定了View的寬高)
rv_webMaxProgress:各屬性表示的最大進(jìn)度
rv_webLineColor:雷達(dá)網(wǎng)的顏色
rv_webLineWidth:雷達(dá)網(wǎng)的線寬
rv_textArrayedColor:各屬性文字的顏色
rv_textArrayedFontPath:各屬性文字和中心處名字的字體路徑
rv_areaColor:中心連接區(qū)域的顏色
rv_areaBorderColor:中心連接區(qū)域的邊框顏色
rv_textCenteredName:中心處的名字
rv_textCenteredColor:中心文字的顏色
rv_textCenteredFontPath:中心數(shù)字文字的字體路徑
rv_animateTime:動(dòng)畫執(zhí)行時(shí)間
rv_animateMode:動(dòng)畫模式
TIME:時(shí)間一定,動(dòng)畫執(zhí)行時(shí)間為rv_animateTime
SPEED:速度一定,動(dòng)畫執(zhí)行速度為rv_webMaxProgress?rv_animateTime
支持代碼設(shè)置數(shù)據(jù)源:
setTextArray(textList: List
setProgressList(progressList: List
setOldProgressList(oldProgressList: List
支持代碼執(zhí)行動(dòng)畫:
doInvalidate():各個(gè)屬性的動(dòng)畫一起執(zhí)行
doInvalidate(index: Int, block: ((Int) -> Unit));:指定某屬性執(zhí)行動(dòng)畫,可傳入?yún)?shù)接收動(dòng)畫結(jié)束的回調(diào)
起源近來(lái)我司產(chǎn)品側(cè)在重構(gòu)一項(xiàng)業(yè)務(wù),連帶UI也有變動(dòng),其中就涉及到了雷達(dá)圖,所以也就有了這次封裝的RadarView,其主要特點(diǎn)是:
有豐富的自定義屬性,可對(duì)雷達(dá)圖外觀進(jìn)行設(shè)置
支持自由設(shè)置屬性個(gè)數(shù)
支持兩種動(dòng)畫模式(時(shí)間一定、速度一定)
支持指定某屬性執(zhí)行動(dòng)畫(從而滿足UI稿的個(gè)性需求,見(jiàn)頭圖三)
頭圖三聯(lián)是演示了該View的主要特點(diǎn),然后結(jié)合局部UI稿,大家可以對(duì)比看下(還原度99%,?(? ? ??)嘿嘿嘿)。
思考分析
NOTE:
我們把六角形抽象成N角形,后文統(tǒng)一使用N角形表示
我們?cè)诶L制前會(huì)把坐標(biāo)系原點(diǎn)移動(dòng)到雷達(dá)圖中心,后文統(tǒng)一使用原點(diǎn)表示
我們先來(lái)思考下關(guān)鍵技術(shù)點(diǎn):
繪制N角形雷達(dá)網(wǎng)
繪制虛線
虛線可以給Paint設(shè)置DashPathEffect實(shí)現(xiàn)
以雷達(dá)圖中心為原點(diǎn),將坐標(biāo)系每逆時(shí)針旋轉(zhuǎn)360/N度,從原點(diǎn)向上繪制長(zhǎng)度為雷達(dá)網(wǎng)半徑的虛線
繪制實(shí)線
在繪制完一條虛線后,緊接著繪制實(shí)線
同樣以雷達(dá)圖中心為原點(diǎn),將坐標(biāo)系每向上移動(dòng)雷達(dá)網(wǎng)半徑/4后,并且順時(shí)針旋轉(zhuǎn)360/N/2度(為什么是這個(gè)值?大家可自行
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/7057.html
摘要:原文鏈接公司產(chǎn)品需要一個(gè)雷達(dá)圖來(lái)展示各維度的比重,網(wǎng)上找了一波,學(xué)到不少,直接自己上手來(lái)擼一記無(wú)圖言虛空簡(jiǎn)單分析一波,確定雷達(dá)圖正幾邊形的正五邊形,分為幾個(gè)層數(shù)層畫邊畫線描繪文字覆蓋區(qū)域主要這幾步,開(kāi)擼自定義繼承確定需要使用的變量, 原文鏈接 https://mp.weixin.qq.com/s/Ms... 公司產(chǎn)品需要一個(gè)雷達(dá)圖來(lái)展示各維度的比重,網(wǎng)上找了一波,學(xué)到不少,直接自己上...
摘要:導(dǎo)語(yǔ)本期訪談對(duì)象小猴機(jī)器人,清華人工智能專業(yè)博士在讀。或許因?yàn)槌砷L(zhǎng)于廣袤的內(nèi)蒙,小猴身上帶著大山和草原一般的灑脫與樂(lè)觀,在他鐘愛(ài)的無(wú)人車上,印上了一個(gè)美好的我們的征途是星辰大海。技術(shù)人攻略除了規(guī)則挖掘,人工智能遇到的難題還 showImg(https://segmentfault.com/img/bVc1yA); 文:Gracia,攝影:周振邦 (本文為原創(chuàng)內(nèi)容,部分或全文轉(zhuǎn)載均需經(jīng)作...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00