Android 矩形/柱状进度条

  • 时间:
  • 来源:互联网

一般我们表示容量使用进度,或者出售量/库存,还是当期那拼团人数/剩余拼团人数这种表示时 一般可用数字来表示,或者圆形图。但是每个老板审美不一样,最近就遇到了一个要求使用柱状图来表示的需求。

类似下图表示:

 

或者

 

这种效果使用ProgressBar/Seekbar自定义也行。但是吧,感觉直接集成ProgressBar/Seekbar显得太臃肿,大多属性用不到,我也不知道有没有类似轮子,不知道如何搜索关键词。搜索一下柱状图,矩形进度条什么的,没有什么符合条件的。于是动手写一下。

 

原理不难就不赘述了,看源码应该就知道,简单说明一下目前实现功能:

1.已使用颜色/未使用颜色

2.已使用区域文字颜色/未使用区域颜色

3.是否描绘边框/边框大小/边框颜色

4.字体大小

5.文字是否分两部分显示/文字只显示一行居中

6.圆角大小/是否使用圆角

 

--目前所有属性都是通过代码设置,可以配置成xml设置方式,可自行拓展--

--区分两部分显示文字时,会根据各自区域居中,如果文字长度大于区域 则左对齐或者右对齐,并穿透到另一个区域显示,如下图:

 

 

 

 

预计可以应用场景(也可用作ProgressBar):

-下载进度

-库存/容量显示

-横向状增长图

-正反观点人数

-投票

- ...

 

这只是一个简单开发的初版,已经有考虑性能,代码注释明了,拓展性强。可自行拓展

 

 

使用简单示范:

     mPercentRectangleView = findViewById(R.id.percentRectangleView);
        //支持链式调用,更新内容记得调用 update()方法
        //设置已使用的百分比  设置值 0-1
        mPercentRectangleView.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

天才小汪汪
发布了39 篇原创文章 · 获赞 49 · 访问量 9万+
私信 关注

本文链接http://element-ui.cn/news/show-987.aspx