快捷導(dǎo)航

android自定義組件實(shí)現(xiàn)儀表計(jì)數(shù)盤(pán)

更新時(shí)間：2019年11月27日 17:13:28 作者：博客_黃大大

這篇文章主要為大家詳細(xì)介紹了android自定義組件實(shí)現(xiàn)儀表計(jì)數(shù)盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前幾天開(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 {   //支持異步線(xiàn)程直接調(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: