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

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_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

感谢

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

欢迎加入我的圈子

图片描述