----邮箱验证没有收到邮件?注意:在您的邮箱的垃圾箱或垃圾邮件内找到邮件!!!(验证成功可使用邮箱登录)点击查看详情----
----温馨提醒:请及时验证邮箱以便于忘记密码时找回!!!----

查看: 2030|回复: 8

[分段选择(Segment)] BarView 一个简单易用的自定义分段控件

[复制链接]

3190

主题

3661

帖子

5万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
57657

热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

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

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

演示
fenduan.png

下载方式:
1.便捷下载zip包: EasySegmentedBarView-master.zip (394.69 KB, 下载次数: 185)
2.github地址回帖下载:
游客,如果您要查看本帖隐藏内容请回复
3.免回复跳转github下载:
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

文件名称: BarView 一个简单易用的自定义分段控件  

下载次数:0    查看状态:您未购买  售价:6 秀币 [充值秀币]
下载权限: 新手上路 以上或 [VIP会员]   [购买VIP]   [会员等级]  [免费领秀币]


关注 秀源码 微信公众号 !!

每日不间断的 推送好的文章与源码!


用法介绍
build.gradle设置
[Java] 纯文本查看 复制代码
dependencies {
 compile 'com.zhouyou:segmentedbar:1.0.3'
}


在xml布局中
[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_styleenumrounded分段条样式normal/rounded/angle,normal:正常样式 rounded:圆角样式 angle:三角样式
sbv_sliderTypeenum进度框支持设置:Sign/Slider Sign:进度框指示,在分段条上部 Slider:滑块指示,覆盖在分段条上
sbv_sliderImgreference没有默认图片设置sbv_sliderType属性为Slider模式时,需要设置图片,例如:app:sbv_sliderImg="@mipmap/slider"
sbv_segment_gap_widthdimension2dp每个分段之间的间隙,如果不需要可以设置0dp
sbv_side_text_styleenumoneSided分段条上文字显示样式oneSided/twoSided oneSided例如:<50 twoSided 例如:40-60
sbv_segment_text_sizedimension14sp分段条上文字颜色
sbv_bar_heightdimension24dp分段条高度
sbv_show_segment_textbooleantrue (显示)是否显示分段条上文字
sbv_show_description_textbooleanfalse(不显示)是否显示分段条底部说明文字
sbv_show_description_top_textbooleanfalse(不显示)是否显示分段条上部说明文字
sbv_segment_bgbooleanfalse(不显示)是否显示分段条背景
sbv_segment_startcolorcolor红色渐变背景的起始颜色(sbv_segment_bg属性为true才起作用 )
sbv_segment_endcolorcolor绿色渐变背景的结束颜色(sbv_segment_bg属性为true才起作用 )
sbv_empty_segment_textstringEmpty空分段展示的提示文字
sbv_empty_segment_backgroundcolor#858585空分段bar条的背景颜色
sbv_value_sign_backgroundcolor#7492E2进度块背景颜色
sbv_value_sign_border_colorcolor#7492E2进度块边框颜色
sbv_value_text_sizedimension14sp进度文字大小
sbv_value_sign_border_sizedimension2dp分段条上部value背景框边框粗细
sbv_value_sign_heightdimension32dp进度块高度
sbv_value_sign_widthdimension72dp进度块宽度
sbv_value_sign_rounddimension4dp进度块圆角大小
sbv_arrow_heightdimension5dp进度块上三角指示高度
sbv_arrow_widthdimension10dp进度块上三角指示宽度
sbv_show_sign_boderbooleanfalse(不显示)是否显示进度块边框
sbv_description_text_colorcolorColor.DKGRAY描述文字字体颜色
sbv_description_text_sizedimension14sp描述文字字体大小
sbv_description_box_heightdimension24dp分段条上部描述文字方块高度
sbv_description_box_top_heightdimension24dp分段条底部描述文字方块高度
sbv_descriptionAlignenumCenter分段条底部描述文字对齐方式支持Center/Both模式,Center:居中显示 ,Both:两端显示
sbv_descriptionTopAlignenumCenter分段条上部部描述文字对齐方式支持Center/Both模式,Center:居中显示 ,Both:两端显示
sbv_segment_ruleenumaverage设置分段规则scale/average模式,scale:按比例分段 average:平均分段

在代码中
方式一
[Java] 纯文本查看 复制代码
       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);
方式二
[Java] 纯文本查看 复制代码
       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);
方式三
[Java] 纯文本查看 复制代码
        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 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_SIDED和SegmentedBarViewSideTextStyle.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


Android秀源码  做最大移动免费社区-郭杰
回复

使用道具 举报

0

主题

22

帖子

114

积分

注册会员

Rank: 2

积分
114
发表于 2017-11-9 09:05:31 | 显示全部楼层
支持秀源码、支持楼主ing……
回复 支持 反对

使用道具 举报

4

主题

607

帖子

5377

积分

论坛元老

Rank: 6Rank: 6

积分
5377
发表于 2017-11-9 16:09:39 | 显示全部楼层
秀源码加油,越做越好!
回复 支持 反对

使用道具 举报

0

主题

43

帖子

115

积分

注册会员

Rank: 2

积分
115
发表于 2018-3-15 16:10:42 | 显示全部楼层
秀源码--给力的源码!
回复 支持 反对

使用道具 举报

0

主题

33

帖子

80

积分

注册会员

Rank: 2

积分
80
发表于 2018-6-12 18:19:38 | 显示全部楼层
秀源码加油,越做越好!
回复 支持 反对

使用道具 举报

发表于 2018-6-26 09:53:48 | 显示全部楼层
支持秀源码、支持楼主ing……
回复 支持 反对

使用道具 举报

0

主题

17

帖子

128

积分

注册会员

Rank: 2

积分
128
发表于 2018-9-27 10:58:06 | 显示全部楼层
感谢秀源码!免费一路有你!
回复 支持 反对

使用道具 举报

0

主题

6

帖子

23

积分

新手上路

Rank: 1

积分
23
发表于 2019-10-24 17:38:02 | 显示全部楼层
多谢大佬分享
回复 支持 反对

使用道具 举报

0

主题

21

帖子

80

积分

注册会员

Rank: 2

积分
80
发表于 2019-11-12 18:35:56 | 显示全部楼层
看到这帖子真是高兴!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 欢迎注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

快速回复 返回顶部 返回列表