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"

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

(0)

相关推荐

  • Android自定义view之仿支付宝芝麻信用仪表盘示例

    自定义view练习 仿支付宝芝麻信用的仪表盘 对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RoundIndicatorView"> <!--最大数值--> <attr name="maxNum" form

  • Android自定义View制作仪表盘界面

    前言 最近我跟自定义View杠上了,甚至说有点上瘾到走火入魔了.身为菜鸟的我自然要查阅大量的资料,学习大神们的代码,这不,前两天正好在郭神在微信公众号里推送一片自定义控件的文章--一步步实现精美的钟表界面.正适合我这种菜鸟来学习,闲着没事,我就差不多依葫芦画瓢也写了一个自定义表盘View,现在纯粹最为笔记记录下来.先展示下效果图: 下面进入正题 自定义表盘属性 老规矩,先在attrs文件里添加表盘自定义属性 <declare-styleable name="WatchView"&

  • Android自定义View实现渐变色仪表盘

    前言:最近一直在学自定义View的相关知识,感觉这在Android中还是挺难的一块,当然这也是每个程序员必经之路,正好公司项目要求实现类似仪表盘的效果用于直观的显示公司数据,于是就简单的写了个demo,记录实现的过程.上篇<Android自定义View实现圆弧进度效果>简单记录了圆弧及文字的绘制,渐变色的仪表盘效果将更加升入的介绍canvas及paint的使用(如画布旋转,paint的渐变色设置等). 知识梳理 1.圆弧渐变色(SweepGradient) 2.圆弧上刻度绘制 3.指针指示当前

  • Android自定义View仿支付宝芝麻信用分仪表盘

    先看下iOS的芝麻信用分截图 这是我做的效果,还是有点差距的 支付宝9.9版本芝麻信用分的实现 首先初始化各种画笔,默认的size,padding,小圆点. (因为实在找不到原版芝麻信用的带点模糊效果的小圆点,所以只好用这个代替) //View的默认大小 defaultSize = dp2px(250); //默认Padding大小 arcDistance = dp2px(14); //外层圆环画笔 mMiddleArcPaint = new Paint(Paint.ANTI_ALIAS_FLA

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

    前几天开发公司项目,有个地方要做一个分数的仪表盘,根据分数跑分,(设计的人估计是看到招商银行App的账号总览) 网上好像找不到类似的组件,那就只能自己开发啦.趁着空余时间,把组件进行了一些改进,并封装成依赖库,分享给大家 效果展示 一款颜色,文字弧度大小,仪表角度都可以自定义的组件 项目集成:MeterView 项目目录-->build.gradle allprojects { repositories { ... maven { url 'https://jitpack.io' } } } a

  • Android 自定义组件成JAR包的实现方法

    Android 自定义组件成JAR包的实现方法,这里对自己实现的Android View 组件进行JAR 包的处理. 在项目开发过程中,我们难免会用到自己去制作自定义的VIEW控件,之后我们别的项目如果需要的话就直接将其复制到对应的项目中使用,虽说这么做是一个解决问题的方法,但毕竟不是很好. 原因是,当我们项目积累越来越多,会发现自定义的控件越来越多,而且这些自定义的控件都是可以重复利用的,这时我们可以想想,如果把这些自定义控件都封装成一个JAR包,然后用一个项目积累起来,之后我们以后开发项目只

  • android自定义组件实现方法

    本文实例讲述了android自定义组件实现方法.分享给大家供大家参考.具体如下: atts.xml: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="TopBar"> <attr name="titleText" format="string"/> <

  • Android自定义组件获取本地图片和相机拍照图片

    iOS中有封装好的选择图片后长按出现动画删除效果,效果如下 而Android找了很久都没有找到有这样效果的第三方组件,最后懒得找了还是自己实现这效果吧 选择图片后还可对图片进行剪裁 当然,代码中还有很多不完善的地方,我接下来会继续完善这个组件的 已经上传到开源社区,欢迎大家来Star啊~ Demo源码:传送门 设计中的碰到的一些问题和解决思路 1.如何让加号图片显示在GridView最后面 首先在调用GridAdapter构造方法时就加载加号图片 /** * 图片适配器 * @param con

  • Android 自定义组件卫星菜单的实现

    卫星菜单 ArcMenu 相信大家接触安卓,从新手到入门的过渡,就应该会了解到卫星菜单.抽屉.Xutils.Coolmenu.一些大神封装好的一些组件.这些组件在 Github 上面很容易搜得到,但是有时候打开会发现看不懂里面的代码,包括一些方法和函数 ..... 首先先上效果图: 实现效果 首先如果要想自定义组件 1.那么第一件事就是赋予自定义组件的属性,从效果图上看出,该组件可以存在屏幕的各个角落点,那么位置是其属性之一. 2.既然是卫星菜单,那么主按钮和其附属的小按钮之间的围绕半径也应该作

  • Android自定义组件跟随自己手指主动画圆

    本文实例为大家分享了Android实现跟随手指画圆的具体代码,供大家参考,具体内容如下 首先自己定义一个View子类: package com.example.androidtest0.myView; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.Att

  • Android自定义组件ListPopWindow

    先看一下效果: 效果就是这样,看一下实现,其实也没多难,就是想开源出来供小伙伴们使用,如有不合理地方,希望大家多多指正. 1.自定义PopWindow 首先我们分析一下,这样的效果肯定是一个PopWindow嵌套着listview,而上面的title.和下面的cancel是两个文本框,实现起来也比较简单. 然后我们在PopWindow中声明两个接口,用来回调cancel和item的点击事件 public interface OnPopItemClickListener{ void onPopIt

  • Android自定义DataTimePicker实例代码(日期选择器)

    笔者有一段时间没有发表关于Android的文章了,关于Android自定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中.本篇博客给大家分享的是自定义一个日期选择器,可以让用户同时选择年月日和当前时间. 先看看效果: 实现的效果就是在同一个布局上显示日期选择和时间选择. 自定义一个类: /DateTimePicker/src/com/wwj/datetimepicker/DateTimePickDialogUtil.java package com.wwj.datetimepicker; i

  • Android编程自定义组件实例详解

    本文实例讲述了Android编程自定义组件.分享给大家供大家参考,具体如下: 在Android中,所有的UI界面都是由View类和ViewGroup类及其子类组合而成.其中,View类是所有UI组件的基类,而ViewGroup类是容纳这些UI组件的容器. 其本身也是View类的子类. 在实际开发中,View类还不足以满足程序所有的需求.这时,便可以通过继承View类来开发自己的组件. 开发自定义组件的步骤: 1.创建一个继承android.view.View类的View类,并且重写构造方法. 2

  • Android自定义短信验证码组件

    Android自定义短信验证码组件,供大家参考,具体内容如下 效果图 1.布局实现 因为要禁用光标,所以我用TextView代替了EditText,每一行显示的验证码个数由用户决定,所以我这里用线性布局的权重,对TextView进行控制宽度等分,然后设置选中和未选中当前TextView的底部边框,设置高亮颜色背景 2.接受用户输入 我这里使用了TextView,但是怎么接受用户输入的值呢.这里我直接继承了RelativeLayout,然后添加了一个透明的EditText,覆盖在这几个TextVi

随机推荐