android自定義組件實(shí)現(xiàn)儀表計(jì)數(shù)盤(pán)
前幾天開(kāi)發(fā)公司項(xiàng)目,有個(gè)地方要做一個(gè)分?jǐn)?shù)的儀表盤(pán),根據(jù)分?jǐn)?shù)跑分,(設(shè)計(jì)的人估計(jì)是看到招商銀行App的賬號(hào)總覽)
網(wǎng)上好像找不到類(lèi)似的組件,那就只能自己開(kāi)發(fā)啦。趁著空余時(shí)間,把組件進(jìn)行了一些改進(jìn),并封裝成依賴(lài)庫(kù),分享給大家
效果展示
一款顏色,文字弧度大小,儀表角度都可以自定義的組件
項(xiàng)目集成:MeterView
項(xiàng)目目錄——>build.gradle
allprojects { repositories { ... maven { url 'https://jitpack.io' } } }
app——>build.gradle
dependencies { ... implementation 'com.github.pimaryschoolstudent:MeterView:1.0.1' }
組件使用
//添加數(shù)據(jù) var arrayList:ArrayList<String> = ArrayList() arrayList.add("0") arrayList.add("10") arrayList.add("20") arrayList.add("30") arrayList.add("40") arrayList.add("50") arrayList.add("較差") arrayList.add("中等") arrayList.add("良好") arrayList.add("優(yōu)秀") arrayList.add("100") meter.setScaleArray(arrayList) //設(shè)置數(shù)據(jù) //顏色 meter.getDataManager().ScaleTextColor = Color.BLUE //底盤(pán)弧刻度文字顏色 meter.getDataManager().DashBoardColor = Color.BLUE //底盤(pán)弧度顏色 meter.getDataManager().PointColor = Color.RED //分?jǐn)?shù)點(diǎn)顏色 meter.getDataManager().SourceTextColor = Color.RED //分?jǐn)?shù)顏色 meter.getDataManager().SourceCurveColor = Color.RED //分?jǐn)?shù)弧顏色 meter.getDataManager().CheckScaleTextColor = Color.BLACK //選中分?jǐn)?shù)刻度顏色 //大小 dp2px(dp轉(zhuǎn)px) px2dp(px轉(zhuǎn)dp) meter.getDataManager().CheckScaleTextSize = meter.dp2Px(15f) //選中分?jǐn)?shù)刻度文字大小 meter.getDataManager().ScaleTextSize = meter.dp2Px(10f) //刻度文字大小 meter.getDataManager().SourceTextSize = meter.dp2Px(40f) //分?jǐn)?shù)文字大小 meter.getDataManager().PointSize = meter.dp2Px(5f) //分?jǐn)?shù)點(diǎn)半徑大小 meter.getDataManager().SourceCurveSize = meter.dp2Px(10f) //分?jǐn)?shù)弧寬度大小 meter.getDataManager().BoardCurveSize = meter.dp2Px(5f) //底盤(pán)弧寬度大小 meter.getDataManager().SourceTextInterval = meter.dp2Px(20.5f) //分?jǐn)?shù)離頂部的間隔大小 //其他設(shè)置 meter.getDataManager().Rate = 30 //分?jǐn)?shù)弧動(dòng)畫(huà)速率(30/s) meter.getDataManager().ShowSource = true //是否顯示分?jǐn)?shù) meter.getDataManager().SourceTextAlign = MeterView.SOURCE_CENTER //分?jǐn)?shù)居中方式 SOURCE_CENTER(底盤(pán)居中) OURCE_START(底盤(pán)頂部) SOURCE_END (底盤(pán)底部) //meter.getDataManager().startAngle = -180f //底盤(pán)弧開(kāi)始點(diǎn)的角度(起點(diǎn)為組件最右邊點(diǎn),當(dāng)?shù)扔?90時(shí)為組件中點(diǎn)) //meter.getDataManager().sweepAngle = 180f //底盤(pán)弧角度大小 meter.getDataManager().sourceShowType = MeterView.SOURCE_NUMBER //顯示的分?jǐn)?shù)類(lèi)型 SOURCE_NUMBER:數(shù)字(百分制) SOURCE_SCALETEXT:刻度文字 meter.getDataManager().meterDebug = false //打開(kāi)底部矩形,方便調(diào)試和添加其他元素 //跑分 tv.text = "runSource(45)......" meter.runSource(45) //根據(jù)分?jǐn)?shù)跑分(百分制,大于100則等于100) //meter.runIndex(5) //根據(jù)數(shù)據(jù)索引跑分 (不為-1,不大于數(shù)據(jù)大小) //meter.addIndex(2) //在當(dāng)前基礎(chǔ)上增加兩個(gè)索引的分?jǐn)?shù) //meter.subtractIndex(1) //在當(dāng)前基礎(chǔ)上減少一個(gè)索引的分?jǐn)?shù) //meter.addSource(20)//在當(dāng)前基礎(chǔ)上增加20分 //meter.subtractSource(20)//在當(dāng)前基礎(chǔ)上減少20分 thread { //支持異步線程直接調(diào)用 Thread.sleep(4000) meter.addIndex(3) runOnUiThread(Runnable { tv.text = "addIndex(3)......" }) Thread.sleep(4000) meter.subtractIndex(1) runOnUiThread(Runnable { tv.text = "subtractIndex(1)......" }) Thread.sleep(4000) meter.addSource(20) runOnUiThread(Runnable { tv.text = "addSource(20)......" }) Thread.sleep(4000) meter.subtractSource(20) runOnUiThread(Runnable { tv.text = "subtractSource(20)......" }) Thread.sleep(4000) meter.runIndex(10) runOnUiThread(Runnable { tv.text = "runIndex(10)......" }) } //分?jǐn)?shù)改變監(jiān)聽(tīng)器 meter.setSourceChangeListener(object :MeterView.SourceChangeListener{ override fun CheckScaleTextChange(currentText: String) { //選中刻度文字改變 Log.e("currentScaleText"," currentScaleText $currentText") } override fun SourceChange(source: Int,currentScaleText:String) { //分?jǐn)?shù)改變 Log.e("meter","source $source currentScaleText $currentScaleText") } })
xml屬性
app:DashBoardColor="#1C65CE" //底盤(pán)弧度顏色 app:ScaleTextColor="#888585" //底盤(pán)弧刻度文字顏色 app:SourceCurveColor="#09C0E5" //分?jǐn)?shù)弧顏色 app:CheckScaleTextColor="#000" //選中分?jǐn)?shù)刻度顏色 app:PointColor="#09C0E5" //分?jǐn)?shù)點(diǎn)顏色 app:SourceTextColor="#000" //分?jǐn)?shù)顏色 app:CheckScaleTextSize="18dp" //選中分?jǐn)?shù)刻度文字大小 app:SourceTextSize="30dp" //分?jǐn)?shù)文字大小 app:ScaleTextSize="14dp" //刻度文字大小 app:BoardCurveSize="2dp" //底盤(pán)弧寬度大小 app:SourceCurveSize="10dp" //分?jǐn)?shù)弧寬度大小 app:PointSize="8dp" //分?jǐn)?shù)點(diǎn)半徑大小 app:ScaleTextInterval="0dp" //刻度離頂部的間隔大小 app:SourceTextInterval="0dp" //分?jǐn)?shù)離頂部的間隔大小 app:SourceTextAlign="start" //分?jǐn)?shù)居中方式 center(底盤(pán)居中)start(底盤(pán)頂部)end (底盤(pán)底部) app:SourceShowType="number" //顯示的分?jǐn)?shù)類(lèi)型 number:數(shù)字(百分制) scaleText:刻度文字 app:Rate="20" //分?jǐn)?shù)弧動(dòng)畫(huà)速率(20/s) app:StartAnglee="-180" //底盤(pán)弧開(kāi)始點(diǎn)的角度(起點(diǎn)為組件最右邊點(diǎn),當(dāng)?shù)扔?90時(shí)為組件中點(diǎn)) app:SweepAnglee="320" //底盤(pán)弧角度大小 app:ShowSource="true" //是否顯示分?jǐn)?shù),同下 app:ShowScaleText="true" app:ShowCheckScaleText="true" app:ShowPoint="true" app:ShowSourceCurve="true"
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android應(yīng)用程序四大組件之使用AIDL如何實(shí)現(xiàn)跨進(jìn)程調(diào)用Service
- Android的Service應(yīng)用程序組件基本編寫(xiě)方法
- Android開(kāi)發(fā)中Button組件的使用
- Android Jetpack架構(gòu)組件 ViewModel詳解
- Android ListView UI組件使用說(shuō)明
- Android中butterknife的使用與自動(dòng)化查找組件插件詳解
- Android開(kāi)發(fā)之組件GridView簡(jiǎn)單使用方法示例
- Android列表組件ListView使用詳解之動(dòng)態(tài)加載或修改列表數(shù)據(jù)
- Android四大組件之Service詳解
- Android框架組件Lifecycle的使用詳解
- Android UI新組件學(xué)習(xí)和使用
- 詳解Android的四大應(yīng)用程序組件
相關(guān)文章
Android okhttp的啟動(dòng)流程及源碼解析
這篇文章主要介紹了Android okhttp的啟動(dòng)流程及源碼解析,幫助大家更好的理解和學(xué)習(xí)使用Android開(kāi)發(fā),感興趣的朋友可以了解下2021-03-03Flutter添加頁(yè)面過(guò)渡動(dòng)畫(huà)實(shí)現(xiàn)步驟
這篇文章主要為大家介紹了Flutter添加頁(yè)面過(guò)渡動(dòng)畫(huà),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05Android簡(jiǎn)單實(shí)現(xiàn)自定義流式布局的方法
這篇文章主要介紹了Android簡(jiǎn)單實(shí)現(xiàn)自定義流式布局的方法,結(jié)合實(shí)例形式分析了Android流式布局的原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-07-07Android手機(jī)聯(lián)系人帶字母索引的快速查找
這篇文章主要為大家詳細(xì)介紹了Android手機(jī)聯(lián)系人帶字母索引的快速查找實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下2016-03-03Android自定義scrollview實(shí)現(xiàn)回彈效果
這篇文章主要為大家詳細(xì)介紹了Android自定義scrollview實(shí)現(xiàn)回彈效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Android開(kāi)發(fā)利器之pidcat安裝方式
pidcat 是Android屆JakeWharton大神開(kāi)發(fā)的一款命令行工具,堪稱(chēng)Android開(kāi)發(fā)利器,它能方便Android程序猿捕獲日志,過(guò)濾日志,定位程序問(wèn)題,超級(jí)好用。這篇文章給大家介紹了Android開(kāi)發(fā)利器之pidcat,需要的朋友可以參考下2019-05-05Android通過(guò)bin二進(jìn)制程序調(diào)用jar原理
最近在研究monkey測(cè)試,發(fā)現(xiàn)monkey測(cè)試的代碼都是JAVA編寫(xiě)的,通過(guò)編譯生成jar包,而我們?cè)趫?zhí)行測(cè)試時(shí)直接執(zhí)行/system/bin/monkey這個(gè)二進(jìn)制程序的,那么它是如何能調(diào)起java程序的呢,本文小編給大家介紹了Android通過(guò)bin二進(jìn)制程序調(diào)用jar原理,需要的朋友可以參考下2023-10-10Android ActionBarActivity設(shè)置全屏無(wú)標(biāo)題實(shí)現(xiàn)方法總結(jié)
這篇文章主要介紹了Android ActionBarActivity設(shè)置全屏無(wú)標(biāo)題實(shí)現(xiàn)方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04