android自定义组件实现仪表计数盘

前几天开发公司项目，有个地方要做一个分数的仪表盘，根据分数跑分，（设计的人估计是看到招商银行app的账号总览）

网上好像找不到类似的组件，那就只能自己开发啦。趁着空余时间，把组件进行了一些改进，并封装成依赖库，分享给大家

效果展示

一款颜色，文字弧度大小，仪表角度都可以自定义的组件

项目集成：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"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。