請幾天開發公司項目,有個地方要做一個分數的儀表盤,根據分數跑分,(設計的人估計是看到招商銀行App的賬號總覽)
網上好像找不到類似的組件,那就只能自己開發啦。趁着空餘時間,把組件進行了一些改進,並封裝成依賴庫,分享給大家^_^
有啥問題,有啥改進的想法,都可以在評論提一下,個人空餘時間開發,不定時更新~
轉載請註明原地址,謝謝合作,都是本人花空餘時間碼出來~~
https://blog.csdn.net/qq_28741899/article/details/103253736
效果展示
一款顏色,文字弧度大小,儀表角度都可以自定義的組件
項目集成
https://github.com/pimaryschoolstudent/MeterView
項目目錄——>build.gradle
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
app——>build.gradle
dependencies {
...
implementation 'com.github.pimaryschoolstudent:MeterView:1.0.1'
}
組件使用
//添加數據
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("優秀")
arrayList.add("100")
meter.setScaleArray(arrayList)
//設置數據
//顏色
meter.getDataManager().ScaleTextColor = Color.BLUE //底盤弧刻度文字顏色
meter.getDataManager().DashBoardColor = Color.BLUE //底盤弧度顏色
meter.getDataManager().PointColor = Color.RED //分數點顏色
meter.getDataManager().SourceTextColor = Color.RED //分數顏色
meter.getDataManager().SourceCurveColor = Color.RED //分數弧顏色
meter.getDataManager().CheckScaleTextColor = Color.BLACK //選中分數刻度顏色
//大小 dp2px(dp轉px) px2dp(px轉dp)
meter.getDataManager().CheckScaleTextSize = meter.dp2Px(15f) //選中分數刻度文字大小
meter.getDataManager().ScaleTextSize = meter.dp2Px(10f) //刻度文字大小
meter.getDataManager().SourceTextSize = meter.dp2Px(40f) //分數文字大小
meter.getDataManager().PointSize = meter.dp2Px(5f) //分數點半徑大小
meter.getDataManager().SourceCurveSize = meter.dp2Px(10f) //分數弧寬度大小
meter.getDataManager().BoardCurveSize = meter.dp2Px(5f) //底盤弧寬度大小
meter.getDataManager().SourceTextInterval = meter.dp2Px(20.5f) //分數離頂部的間隔大小
//其他設置
meter.getDataManager().Rate = 30 //分數弧動畫速率(30/s)
meter.getDataManager().ShowSource = true //是否顯示分數
meter.getDataManager().SourceTextAlign = MeterView.SOURCE_CENTER //分數居中方式 SOURCE_CENTER(底盤居中) OURCE_START(底盤頂部) SOURCE_END (底盤底部)
//meter.getDataManager().startAngle = -180f //底盤弧開始點的角度(起點爲組件最右邊點,當等於-90時爲組件中點)
//meter.getDataManager().sweepAngle = 180f //底盤弧角度大小
meter.getDataManager().sourceShowType = MeterView.SOURCE_NUMBER //顯示的分數類型 SOURCE_NUMBER:數字(百分制) SOURCE_SCALETEXT:刻度文字
meter.getDataManager().meterDebug = false //打開底部矩形,方便調試和添加其他元素
//跑分
tv.text = "runSource(45)......"
meter.runSource(45) //根據分數跑分(百分制,大於100則等於100)
//meter.runIndex(5) //根據數據索引跑分 (不爲-1,不大於數據大小)
//meter.addIndex(2) //在當前基礎上增加兩個索引的分數
//meter.subtractIndex(1) //在當前基礎上減少一個索引的分數
//meter.addSource(20)//在當前基礎上增加20分
//meter.subtractSource(20)//在當前基礎上減少20分
thread { //支持異步線程直接調用
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)......" })
}
//分數改變監聽器
meter.setSourceChangeListener(object :MeterView.SourceChangeListener{
override fun CheckScaleTextChange(currentText: String) { //選中刻度文字改變
Log.e("currentScaleText"," currentScaleText $currentText")
}
override fun SourceChange(source: Int,currentScaleText:String) { //分數改變
Log.e("meter","source $source currentScaleText $currentScaleText")
}
})
xml屬性
app:DashBoardColor="#1C65CE" //底盤弧度顏色
app:ScaleTextColor="#888585" //底盤弧刻度文字顏色
app:SourceCurveColor="#09C0E5" //分數弧顏色
app:CheckScaleTextColor="#000" //選中分數刻度顏色
app:PointColor="#09C0E5" //分數點顏色
app:SourceTextColor="#000" //分數顏色
app:CheckScaleTextSize="18dp" //選中分數刻度文字大小
app:SourceTextSize="30dp" //分數文字大小
app:ScaleTextSize="14dp" //刻度文字大小
app:BoardCurveSize="2dp" //底盤弧寬度大小
app:SourceCurveSize="10dp" //分數弧寬度大小
app:PointSize="8dp" //分數點半徑大小
app:ScaleTextInterval="0dp" //刻度離頂部的間隔大小
app:SourceTextInterval="0dp" //分數離頂部的間隔大小
app:SourceTextAlign="start" //分數居中方式 center(底盤居中)start(底盤頂部)end (底盤底部)
app:SourceShowType="number" //顯示的分數類型 number:數字(百分制) scaleText:刻度文字
app:Rate="20" //分數弧動畫速率(20/s)
app:StartAnglee="-180" //底盤弧開始點的角度(起點爲組件最右邊點,當等於-90時爲組件中點)
app:SweepAnglee="320" //底盤弧角度大小
app:ShowSource="true" //是否顯示分數,同下
app:ShowScaleText="true"
app:ShowCheckScaleText="true"
app:ShowPoint="true"
app:ShowSourceCurve="true"