EasySegmentedBarView简单易用的自定义分段控件,方便快速实现分段效果

github源码地址:https://github.com/zhou-you/EasySegmentedBarView

EasySegmentedBarView

本库主要提供一个简单易用的自定义分段控件,方便快速实现分段效果,支持xml配置、代码配置、分段规则按均分/比例分、数字分段、文本分段、渐变分段、bar条样式正常/圆形/三角形,segment文字样式、进度设置、进度指示标记类型设置、分段描述设置、分段间距、其它更多自定义设置等功能。

功能

  • 支持xml配置;
  • 支持通过代码配置;
  • 支持bar条分段规则按均分/比例分;
  • 支持数字分段、文本分段;
  • 支持bar条渐变分段;
  • 支持设置bar条side样式正常/圆形/三角形;
  • 支持segment文字样式;
  • 支持进度设置,unit单位显示,进度为数字或指定文本;
  • 支持进度指示标记类型设置,上部显示/覆盖叠加显示;
  • 支持进度指示三角形是否显示;
  • 支持分段间距设置;
  • 支持其它更多自定义设置、包括颜色、长宽、间距等;

关于我

联系方式

本群旨在为使用我github项目的人提供方便,如果遇到问题欢迎在群里提问。

欢迎加入QQ交流群:581235049

演示(请star支持)


版本说明

Demo下载

用法介绍

build.gradle设置

dependencies {
 compile 'com.zhouyou:segmentedbar:1.0.1'
}

想查看所有版本,请点击下面地址。

在xml布局中

<com.zhouyou.view.segmentedbar.SegmentedBarView
                android:id="@+id/barView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp"
                android:paddingTop="5dp"
                app:sbv_empty_segment_text="No segments"
                app:sbv_segment_gap_width="5dp"
                app:sbv_segment_rule="average"
                app:sbv_segment_text_size="15sp"
                app:sbv_show_description_text="true"
                app:sbv_side_style="rounded"
                app:sbv_side_text_style="twoSided"
                app:sbv_value_sign_height="30dp"
                app:sbv_value_sign_round="8dp"
                app:sbv_value_sign_width="100dp"
                />

具体属性设置

属性 类型 默认值 说明
sbv_side_style enum rounded 分段条样式normal/rounded/angle,normal:正常样式 rounded:圆角样式 angle:三角样式
sbv_sliderType enum 进度框 支持设置:Sign/Slider Sign:进度框指示,在分段条上部 Slider:滑块指示,覆盖在分段条上
sbv_sliderImg reference 没有默认图片 设置sbv_sliderType属性为Slider模式时,需要设置图片,例如:app:sbv_sliderImg="@mipmap/slider"
sbv_segment_gap_width dimension 2dp 每个分段之间的间隙,如果不需要可以设置0dp
sbv_side_text_style enum oneSided 分段条上文字显示样式oneSided/twoSided oneSided例如:<50 twoSided 例如:40-60
sbv_segment_text_size dimension 14sp 分段条上文字颜色
sbv_bar_height dimension 24dp 分段条高度
sbv_show_segment_text boolean true (显示) 是否显示分段条上文字
sbv_show_description_text boolean false(不显示) 是否显示分段条底部说明文字
sbv_show_description_top_text boolean false(不显示) 是否显示分段条上部说明文字
sbv_segment_bg boolean false(不显示) 是否显示分段条背景
sbv_segment_startcolor color 红色 渐变背景的起始颜色(sbv_segment_bg属性为true才起作用 )
sbv_segment_endcolor color 绿色 渐变背景的结束颜色(sbv_segment_bg属性为true才起作用 )
sbv_empty_segment_text string Empty 空分段展示的提示文字
sbv_empty_segment_background color #858585 空分段bar条的背景颜色
sbv_value_sign_background color #7492E2 进度块背景颜色
sbv_value_sign_border_color color #7492E2 进度块边框颜色
sbv_value_text_size dimension 14sp 进度文字大小
sbv_value_sign_border_size dimension 2dp 分段条上部value背景框边框粗细
sbv_value_sign_height dimension 32dp 进度块高度
sbv_value_sign_width dimension 72dp 进度块宽度
sbv_value_sign_round dimension 4dp 进度块圆角大小
sbv_arrow_height dimension 5dp 进度块上三角指示高度
sbv_arrow_width dimension 10dp 进度块上三角指示宽度
sbv_show_sign_boder boolean false(不显示) 是否显示进度块边框
sbv_description_text_color color Color.DKGRAY 描述文字字体颜色
sbv_description_text_size dimension 14sp 描述文字字体大小
sbv_description_box_height dimension 24dp 分段条上部描述文字方块高度
sbv_description_box_top_height dimension 24dp 分段条底部描述文字方块高度
sbv_descriptionAlign enum Center 分段条底部描述文字对齐方式支持Center/Both模式,Center:居中显示 ,Both:两端显示
sbv_descriptionTopAlign enum Center 分段条上部部描述文字对齐方式支持Center/Both模式,Center:居中显示 ,Both:两端显示
sbv_segment_rule enum average 设置分段规则scale/average模式,scale:按比例分段 average:平均分段

在代码中

方式一

       SegmentedBarView barView = (SegmentedBarView) findViewById(R.id.barView);
        ArrayList<Segment> segments = new ArrayList<>();
        Segment segment = new Segment(0, 4.5f, "Low", Color.parseColor("#EF3D2F"));
        segments.add(segment);
        Segment segment2 = new Segment(4.5f, 9.5f, "Optimal", Color.parseColor("#8CC63E"));
        segments.add(segment2);
        Segment segment3 = new Segment(9.5f, 20f, "High", Color.parseColor("#EF3D2F"));
        segments.add(segment3);
        barView.setValueWithUnit(13.96f, "10<sup>12</sup>/l");
        //barView.setSegmentSideRule(SegmentedBarViewSideRule.average);//通过代码设置规则
        //barView.setValue(13.96f);
        //barView.setValue(13.96f,"Optimal");
        barView.setSegments(segments);

方式二

       SegmentedBarView barView = new SegmentedBarView(this);
        ArrayList<Segment> segments = new ArrayList<>();
        Segment segment = new Segment(0, 4.5f, "Low", Color.parseColor("#EF3D2F"));
        segments.add(segment);
        Segment segment2 = new Segment(4.5f, 6.5f, "Optimal", Color.parseColor("#8CC63E"));
        segments.add(segment2);
        Segment segment3 = new Segment(6.5f, 20f, "High", Color.parseColor("#EF3D2F"));
        segments.add(segment3);
        barView.setValue(4.96f);
        barView.setUnit("m");
        barView.setSideTextStyle(SegmentedBarViewSideTextStyle.TWO_SIDED);
        barView.setSideStyle(SegmentedBarViewSideStyle.ROUNDED);
        barView.setSegments(segments);
        barView.setShowDescriptionText(false);
        barView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        barView.setPadding(0, getResources().getDimensionPixelSize(R.dimen.vertical_padding), 0, 0);
        sideStyleLayout.addView(barView);

方式三

        ArrayList<Segment> segments = new ArrayList<>();
        Segment segment = new Segment(0, 4.5f, "Low", Color.parseColor("#EF3D2F"));
        segments.add(segment);
        Segment segment2 = new Segment(4.5f, 6.5f, "Optimal", Color.parseColor("#8CC63E"));
        segments.add(segment2);
        Segment segment3 = new Segment(6.5f, 20f, "High", Color.parseColor("#EF3D2F"));
        segments.add(segment3);
        SegmentedBarView barView = SegmentedBarView.builder(this)
                .segments(segments)
                .value(5.25f)
                .unit("ml<sup>2</sup>")
                .showDescriptionText(true)
                .sideStyle(SegmentedBarViewSideStyle.ANGLE)
                .build();
        barView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        barView.setPadding(0, getResources().getDimensionPixelSize(R.dimen.vertical_padding), 0, 0);
        javaCodeLayout.addView(barView);

具体方法设置

方法 说明
setBarHeight(int barHeight) 设置分段条高度
setDescriptionBoxHeight(int descriptionBoxHeight) 分段条底部部描述文字方块高度
setDescriptionTextColor(int descriptionTextColor) 分段条底部描述文字颜色
setDescriptionTextSize(int descriptionTextSize) 分段条底部描述文字字体大小
setDrawSegmentBg(boolean drawSegmentBg) 设置是否显示分段条背景
setEmptySegmentColor(int emptySegmentColor) 设置没有分段时分段条颜色
setGapWidth(int gapWidth) 设置分段之间的间距
setGradientBgSegmentColor(int startColor, int endColor) 设置分段条背景的渐变色,启始颜色值和结束颜色值
setSegments(List<Segment> segments) 设置分段集合
setSegmentSideRule(int sideRule) 设置分段规则scale/average模式,scale:按比例分段 average:平均分段
setSegmentTextColor(int segmentTextColor) 分段条上文字颜色
setSegmentTextSize(int segmentTextSize) 分段条上文字字体大小
setShowDescriptionText(boolean showDescriptionText) 是否显示分段条底部的描述文字
setShowSegmentText(boolean showSegmentText) 是否显示分段条上的文字
setSideStyle(int sideStyle) 分段条样式normal/rounded/angle,normal:正常样式 rounded:圆角样式 angle:三角样式 ,例如:setSideStyle(SegmentedBarViewSideStyle.NORMAL)
setSideTextStyle(int sideTextStyle) 分段条上文字显示样式SegmentedBarViewSideTextStyle.TWO_SIDEDSegmentedBarViewSideTextStyle.ONE_SIDED
setUnit(String unit) 设置单位 ,例如:"ml<sup>2</sup>"
setValue(Float value) 设置当前进度值
setValue(float value, String valueText) 设置当前进度值,例如(80,“优秀”),进度框上文字不会显示80,会显示“优秀”,主要用于转换使用
setValueSegment(Integer valueSegment) 设置文字分段时,进度位置,例如:分3段,从0开始 ValueSegment=1,表示进度块在第二个位置上展示
setValueSegmentText(String valueSegmentText) 设置分段进度块上的文字描述,配合setValueSegment使用,只针对文字分段没有数字进度,具体看Demo4,非数字分段
setValueSignColor(int valueSignColor) 进度框背景颜色
setValueSignSize(int width, int height) 进度框大小设置
setValueTextColor(int valueTextColor) 进度框上文字字体颜色
setValueTextSize(int valueTextSize) 进度框上文字字体大小
setValueWithUnit(Float value, String unitHtml) 设置有单位的进度

Other

其它更多设置和使用方法,请参考Demo

感谢

该库部分思想借鉴了以下项目:
https://github.com/gspd-mobi/SegmentedBarView-Android
在此特别感谢上述作者,喜欢原作的可以去使用原项目。同时欢迎大家下载体验本项目,如果使用过程中遇到什么问题,欢迎反馈。

支持开源

乐于赞赏,感谢朋友们的支持和鼓励,让我们一起努力做一些好东西!

可以使用「微信」「支付宝」客户端赞赏:

支付
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,947评论 4 60
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,216评论 7 249
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • 读书可以了解历史 摄影能够记录现在 写作将回忆留在将来
    独孤思齐阅读 154评论 0 1
  • 一直憧憬着时间自由财务自由的一天,没承想到财务还没自由,时间被自由了。刚坐拥这一天天自由的时间,我前所未有地感受到...
    我爱心自在阅读 423评论 4 3