一般我们表示容量使用进度,或者出售量/库存,还是当期那拼团人数/剩余拼团人数这种表示时 一般可用数字来表示,或者圆形图。但是每个老板审美不一样,最近就遇到了一个要求使用柱状图来表示的需求。
类似下图表示:
或者
这种效果使用ProgressBar/Seekbar自定义也行。但是吧,感觉直接集成ProgressBar/Seekbar显得太臃肿,大多属性用不到,我也不知道有没有类似轮子,不知道如何搜索关键词。搜索一下柱状图,矩形进度条什么的,没有什么符合条件的。于是动手写一下。
原理不难就不赘述了,看源码应该就知道,简单说明一下目前实现功能:
1.已使用颜色/未使用颜色
2.已使用区域文字颜色/未使用区域颜色
3.是否描绘边框/边框大小/边框颜色
4.字体大小
5.文字是否分两部分显示/文字只显示一行居中
6.圆角大小/是否使用圆角
--目前所有属性都是通过代码设置,可以配置成xml设置方式,可自行拓展--
--区分两部分显示文字时,会根据各自区域居中,如果文字长度大于区域 则左对齐或者右对齐,并穿透到另一个区域显示,如下图:
预计可以应用场景(也可用作ProgressBar):
-下载进度
-库存/容量显示
-横向状增长图
-正反观点人数
-投票
- ...
这只是一个简单开发的初版,已经有考虑性能,代码注释明了,拓展性强。可自行拓展
使用简单示范:
mPercentRectangleView = findViewById(R.id.percentRectangleView);//支持链式调用,更新内容记得调用 update()方法//设置已使用的百分比 设置值 0-1mPercentRectangleView.setPercent(0.3f)//设置边框,参数1是边框大小,参数2是圆角.setStroke(0,10)//圆角为10 无边框.setStroke(10,0)//无圆角 边框为10.setStroke(10,10)//圆角和边框为10//设置边框颜色.setStrokeColor(Color.GREEN)//设置字体大小,已控件高度为基准 设置值0-1 代表字体大小是高度的几分之几 .setTestSizePercent(0.5f)//设置总量的颜色.setTotalColor(Color.BLUE)//设置已使用量的颜色.setUsedColor(Color.BLUE)//设置总量里面的文字颜色,如果是单行文字则表示的是单行文字的颜色.setTotalTextColor(Color.BLUE)//设置已使用量的文字颜色, 如果是单行文字则无效果.setUsedTextColor(Color.BLUE)//设置单行文字,如果不为Null 则优先显示单行.setTips("这里是单行文字")//分别显示文字,如果要分别显示,请设置setTips(null),否则会优先显示单行.setTipArray("已用 xx%","剩余 xx%")//切记,更新属性记得调用此方法.update();
源码以及测试用例(TestActivity)地址:点击直达Github